--- title: 社内備品の貸し出し もっと手軽にしてみたハナシ tags: author: [高橋　洋介](https://www.docswell.com/user/7843178382) site: [Docswell](https://www.docswell.com/) thumbnail: https://bcdn.docswell.com/page/PJR2Y9MKE9.jpg?width=480 description: 社内備品の貸し出し もっと手軽にしてみたハナシ by 高橋　洋介 published: November 22, 23 canonical: https://www.docswell.com/s/7843178382/5DEVM6-2023-11-22-111900 --- # Page. 1 ![Page Image](https://bcdn.docswell.com/page/PJR2Y9MKE9.jpg) 社内備品の貸し出し もっと手軽にしてみたハナシ # Page. 2 ![Page Image](https://bcdn.docswell.com/page/PEXDGQV57X.jpg) 目次 1. 自己紹介 2. そもそものハナシ 3. できたものと構成のハナシ 4. JSでフロントもバックもやっつけたハナシ 5. Flutterはいいぞっていうハナシ 6. 最後のハナシ # Page. 3 ![Page Image](https://bcdn.docswell.com/page/3EKX49QR7D.jpg) 1. 自己紹介 # Page. 4 ![Page Image](https://bcdn.docswell.com/page/L735LWPGE5.jpg) 1. 自己紹介 ・ 名前：竹澤 慎悟 ・ 業務：プログラマ（Web周り） ・ 趣味：音楽鑑賞・たまに曲づくり 音楽好きが行きすぎて、作曲やらボカロにまで手を出してしまいました ・ 最近ハマってること：ヘッドスパとASMR # Page. 5 ![Page Image](https://bcdn.docswell.com/page/87DDNKLN7G.jpg) 1. 自己紹介 ・ 名前：鈴木 裕太 ・ 業務：モバイルアプリ開発 ・ 趣味：海外旅行（今年こそは・・・） ・最近受けたダメージ：車検見積もりが30万円だった # Page. 6 ![Page Image](https://bcdn.docswell.com/page/VJPX5K2N78.jpg) 2.そもそものハナシ # Page. 7 ![Page Image](https://bcdn.docswell.com/page/2EVLPVDYJQ.jpg) 2.そもそものハナシ ねこまたでは… 備品貸し出し管理 → サイボウズ上で管理 めんどくさい これがとにかく # Page. 8 ![Page Image](https://bcdn.docswell.com/page/57GXPLYWEL.jpg) 2.そもそものハナシ めんどくさい理由 # Page. 9 ![Page Image](https://bcdn.docswell.com/page/4EQ82YMQJP.jpg) 2.そもそものハナシ めんどくさい理由 ・借りたい備品を、すぐに探せない ・サイボウズへの記入漏れ ・返却確認の手間 # Page. 10 ![Page Image](https://bcdn.docswell.com/page/KJ42LWVYE1.jpg) 2.そもそものハナシ めんどくさい理由 ・借りたい備品を、すぐに探せない ・サイボウズへの記入漏れ ・返却確認の手間 借りるだけでこんなにも手間が… # Page. 11 ![Page Image](https://bcdn.docswell.com/page/LE1MLY3N7G.jpg) 2.そもそものハナシ 管理もタイヘン サイボウズに 施設として登録する のがつらい… 総務の方も頭をかかえており… # Page. 12 ![Page Image](https://bcdn.docswell.com/page/GEW3VGXME2.jpg) 2.そもそものハナシ 書くのがだるい を解決 登録は？ 返却は？ # Page. 13 ![Page Image](https://bcdn.docswell.com/page/47ZV4L6ME3.jpg) 2.そもそものハナシ 書くのがだるい を解決 登録は？ 返却は？ QRコード読み取り # Page. 14 ![Page Image](https://bcdn.docswell.com/page/YJ653W257V.jpg) 2.そもそものハナシ 書くのがだるい を解決 登録は？ QRコード読み取り 返却は？ QRコード読み取り # Page. 15 ![Page Image](https://bcdn.docswell.com/page/GJ5YLM2GJ4.jpg) 2.そもそものハナシ 書くのがだるい を解決 登録は？ QRコード読み取り 返却は？ QRコード読み取り 登録・更新の手間が一気に解消！ # Page. 16 ![Page Image](https://bcdn.docswell.com/page/9E2GL94DER.jpg) 2.そもそものハナシ 管理側の問題を解決 サイボウズへ施設登録 # Page. 17 ![Page Image](https://bcdn.docswell.com/page/D7YVQ4MM7M.jpg) 2.そもそものハナシ 管理側の問題を解決 サイボウズへ施設登録 QR生成・備品へ貼り付け # Page. 18 ![Page Image](https://bcdn.docswell.com/page/VENMKYW3J8.jpg) 2.そもそものハナシ めんどくさい理由の解消 ・借りたい備品を、すぐに探せない ・サイボウズへの記入漏れ ・返却確認の手間 👍 👍 👍 # Page. 19 ![Page Image](https://bcdn.docswell.com/page/Y79NVPXP73.jpg) 2.そもそものハナシ めんどくさい理由の解消 ・借りたい備品を、すぐに探せない ・サイボウズへの記入漏れ ・返却確認の手間 👍 👍 👍 QRが全て解決！！ # Page. 20 ![Page Image](https://bcdn.docswell.com/page/G78KPD2XJD.jpg) 3.できたものと 構成のハナシ # Page. 21 ![Page Image](https://bcdn.docswell.com/page/L7LZ1M2NER.jpg) 3.できたものと構成のハナシ 出来上がったものが こちら シンプルですね。 # Page. 22 ![Page Image](https://bcdn.docswell.com/page/4EMVWY8QEW.jpg) 3.できたものと構成のハナシ アプリ 製 主な機能 ・QR読み取り ・備品情報の送信 # Page. 23 ![Page Image](https://bcdn.docswell.com/page/PER2Y95K79.jpg) 3.できたものと構成のハナシ 管理側 と と 製 # Page. 24 ![Page Image](https://bcdn.docswell.com/page/P7XDGQK5JX.jpg) 4. JSでフロントも バックもやっつけ たハナシ # Page. 25 ![Page Image](https://bcdn.docswell.com/page/37KX495RJD.jpg) 4. JSでフロントもバックもやっつけたハナシ 2年目にして、バックエンド側をゴリゴリいじ る機会が増えた # Page. 26 ![Page Image](https://bcdn.docswell.com/page/LJ35LWKG75.jpg) 4. JSでフロントもバックもやっつけたハナシ 2年目にして、バックエンド側をゴリゴリいじ る機会が増えた 同時にJSもゴリゴリすることが増えた # Page. 27 ![Page Image](https://bcdn.docswell.com/page/8JDDNK3NJG.jpg) 4. JSでフロントもバックもやっつけたハナシ JSマンになりつつあるので、 Nodeやらでサクッとサーバー作るべ そんなノリでいました # Page. 28 ![Page Image](https://bcdn.docswell.com/page/VEPX5K4NJ8.jpg) 4. JSでフロントもバックもやっつけたハナシ JSマンになりつつあるので、 Nodeやらでサクッとサーバー作るべ そんなノリでいました こんな顔して考えてました # Page. 29 ![Page Image](https://bcdn.docswell.com/page/27VLPVXYEQ.jpg) 4. JSでフロントもバックもやっつけたハナシ 以外とめんどくさい (expressであーだこーだしたり、nodemonとかつっこんだり、ラジバンダリ) # Page. 30 ![Page Image](https://bcdn.docswell.com/page/5JGXPLVW7L.jpg) 4. JSでフロントもバックもやっつけたハナシ 以外とめんどくさい (expressであーだこーだしたり、nodemonとかつっこんだり、ラジバンダリ) 一番詰まった箇所 ・NodeとDB どーやってつなげる？？ # Page. 31 ![Page Image](https://bcdn.docswell.com/page/47Q82Y6QEP.jpg) 4. JSでフロントもバックもやっつけたハナシ 以外とめんどくさい (expressであーだこーだしたり、nodemonとかつっこんだり、ラジバンダリ) 一番詰まった箇所 ・NodeとDB どーやってつなげる？？ こんな顔になりました # Page. 32 ![Page Image](https://bcdn.docswell.com/page/KE42LW4Y71.jpg) 4. JSでフロントもバックもやっつけたハナシ 理想のライブラリ探しの旅へ # Page. 33 ![Page Image](https://bcdn.docswell.com/page/L71MLY4NJG.jpg) 4. JSでフロントもバックもやっつけたハナシ 理想のライブラリ探しの旅へ ・なるだけSQLべた書きは避けたい（苦手） ・サクッとselectとかinsertしたい ・マイグレーションもよしなにしてほしい # Page. 34 ![Page Image](https://bcdn.docswell.com/page/G7W3VGZM72.jpg) 4. JSでフロントもバックもやっつけたハナシ 理想のライブラリ探しの旅へ ・なるだけSQLべた書きは避けたい（苦手） ・サクッとselectとかinsertしたい ・マイグレーションもよしなにしてほしい そんなライブラリないかなぁ〜 # Page. 35 ![Page Image](https://bcdn.docswell.com/page/4JZV4L1M73.jpg) 4. JSでフロントもバックもやっつけたハナシ ありました。 # Page. 36 ![Page Image](https://bcdn.docswell.com/page/YE653WL5JV.jpg) 4. JSでフロントもバックもやっつけたハナシ ありました。 Sequelize(シークライズ)くんです。 やぁ # Page. 37 ![Page Image](https://bcdn.docswell.com/page/GE5YLM1GE4.jpg) 4. JSでフロントもバックもやっつけたハナシ Sequelize、お主何奴じゃ... !? # Page. 38 ![Page Image](https://bcdn.docswell.com/page/972GL91D7R.jpg) 4. JSでフロントもバックもやっつけたハナシ Sequelize、お主何奴じゃ... !? DBへのアクセスを簡単にしてくれる、 Node.jsのライブラリ # Page. 39 ![Page Image](https://bcdn.docswell.com/page/DJYVQ4ZMJM.jpg) 4. JSでフロントもバックもやっつけたハナシ Sequelize、お主何奴じゃ... !? DBへのアクセスを簡単にしてくれる、 Node.jsのライブラリ → ORMともいう。 # Page. 40 ![Page Image](https://bcdn.docswell.com/page/V7NMKY33E8.jpg) 4. JSでフロントもバックもやっつけたハナシ JSのデータ RDB マッピング Obj ユーザー ユーザー Obj 備品 ユーザー Obj 貸し出し記録 ユーザー # Page. 41 ![Page Image](https://bcdn.docswell.com/page/YJ9NVP9PJ3.jpg) 4. JSでフロントもバックもやっつけたハナシ 他にもいろいろ ・マイグレーションファイルの生成 ・なんならテーブルの生成 # Page. 42 ![Page Image](https://bcdn.docswell.com/page/GJ8KPD9XED.jpg) 4. JSでフロントもバックもやっつけたハナシ 他にもいろいろ ・マイグレーションファイルの生成 ・なんならテーブルの生成 DB周りの操作がとてもスムーズに # Page. 43 ![Page Image](https://bcdn.docswell.com/page/LJLZ1MWN7R.jpg) 4. JSでフロントもバックもやっつけたハナシ フロントエンドは？ # Page. 44 ![Page Image](https://bcdn.docswell.com/page/47MVWY9Q7W.jpg) 4. JSでフロントもバックもやっつけたハナシ フロントエンドは？ Nuxt.jsに頼りました。 # Page. 45 ![Page Image](https://bcdn.docswell.com/page/P7R2Y9GKJ9.jpg) 4. JSでフロントもバックもやっつけたハナシ フロントエンドは？ Nuxt.jsに頼りました。 バックエンドを触る機会もさることながら、 フロントエンドでVue.jsも触ることが多くなり、 個人的な復習もかねてNuxtを選びました (あとルーティングとかデザイン考えたりしなくていい） # Page. 46 ![Page Image](https://bcdn.docswell.com/page/PJXDGQX5EX.jpg) 4 - 1. インフラ・デプロイのハナシ インフラに関して EC2にミドルウェア群を入れて構築 AWS Cloud EC2 /tagayasu http://[IP address] equipment_rental_server_frontend equipment_rental_server_backend http://[IP address]/api # Page. 47 ![Page Image](https://bcdn.docswell.com/page/3JKX49WRED.jpg) 4 - 1. インフラ・デプロイのハナシ インフラに関して EC2にミドルウェア群を入れて構築 AWS Cloud EC2 /tagayasu http://[IP address] equipment_rental_server_frontend １つ問題が… equipment_rental_server_backend http://[IP address]/api # Page. 48 ![Page Image](https://bcdn.docswell.com/page/LE35LW1GJ5.jpg) 4 - 1. インフラ・デプロイのハナシ デプロイどーする？ 問題 → BackLogにてソースを管理 # Page. 49 ![Page Image](https://bcdn.docswell.com/page/8EDDNKXNEG.jpg) 4 - 1. インフラ・デプロイのハナシ デプロイどーする？ 問題 → BackLogにてソースを管理 ・手動 （SSHにログイン、pullしたり) # Page. 50 ![Page Image](https://bcdn.docswell.com/page/V7PX5KPNE8.jpg) 4 - 1. インフラ・デプロイのハナシ デプロイどーする？ 問題 → BackLogにてソースを管理 ・手動 （SSHにログイン、pullしたり) ・なんちゃってデプロイ パイプラインの作成 # Page. 51 ![Page Image](https://bcdn.docswell.com/page/2JVLPV2Y7Q.jpg) 4 - 1. インフラ・デプロイのハナシ 待ったをかけたのが、 https://quickops.sh/ @CommonCreation # Page. 52 ![Page Image](https://bcdn.docswell.com/page/5EGXPLRWJL.jpg) 4 - 1. インフラ・デプロイのハナシ 待ったをかけたのが、 https://quickops.sh/ @CommonCreation # Page. 53 ![Page Image](https://bcdn.docswell.com/page/4JQ82YVQ7P.jpg) 4 - 1. インフラ・デプロイのハナシ 待ったをかけたのが、 何がすごいの？ ・BackLogがGithubActionを実行するようになります https://quickops.sh/ @CommonCreation # Page. 54 ![Page Image](https://bcdn.docswell.com/page/K742LWMYJ1.jpg) 4 - 1. インフラ・デプロイのハナシ 待ったをかけたのが、 何がすごいの？ ・BackLogがGithubActionを実行するようになります どゆこと？？ https://quickops.sh/ @CommonCreation # Page. 55 ![Page Image](https://bcdn.docswell.com/page/LJ1MLY8NEG.jpg) 4 - 1. インフラ・デプロイのハナシ AWS Cloud Backlog EC2 /tagayasu Git http://[IP address] equipment_rental_server_frontend equipment_rental_server_frontend http://[IP address]/api equipment_rental_server_backend equipment_rental_server_backend equipment_rental_mock_server equipment_rental_mock_server mainブランチにマージすると EC2の/tagayasuフォルダ配下で git pullを実行し、サーバリソースを最新化 http://[IP address]:8888/api # Page. 56 ![Page Image](https://bcdn.docswell.com/page/GJW3VGGMJ2.jpg) 4 - 1. インフラ・デプロイのハナシ 何で なの？ ・ねこまたは、案件情報をBacklogで一元管理 ここで問題 # Page. 57 ![Page Image](https://bcdn.docswell.com/page/4EZV4LLMJ3.jpg) 4 - 1. インフラ・デプロイのハナシ 何で なの？ ・ねこまたは、案件情報をBacklogで一元管理 ここで問題 PJで CI/CDしたいけど、どーする？ # Page. 58 ![Page Image](https://bcdn.docswell.com/page/Y7653WW5EV.jpg) 4 - 1. インフラ・デプロイのハナシ リポジトリを、GitHubやらGitLabにたてる → どれがどの案件のリポジトリか、整理がつかない そんなお悩みを吹っ飛ばしたのが BackLogのリポジトリに対して デプロイパイプラインを立てれる # Page. 59 ![Page Image](https://bcdn.docswell.com/page/G75YLMMG74.jpg) 5. Flutterはいいぞ っていうハナシ # Page. 60 ![Page Image](https://bcdn.docswell.com/page/9J2GL99DJR.jpg) 5. Flutterはいいぞっていうハナシ 作ったアプリ # Page. 61 ![Page Image](https://bcdn.docswell.com/page/DEYVQ44MEM.jpg) 5. Flutterはいいぞっていうハナシ # Page. 62 ![Page Image](https://bcdn.docswell.com/page/VJNMKYY378.jpg) 5. Flutterはいいぞっていうハナシ なんでFlutter？ • • • • コーディング→ビルドの繰り返しが嫌だったから UIの構築が楽だから（個人の感想） riverpod_generatorを使ってみたかったから 社内でFlutter啓蒙すれば案件来るのではと思ったから # Page. 63 ![Page Image](https://bcdn.docswell.com/page/YE9NVPPPE3.jpg) 5. Flutterはいいぞっていうハナシ なんでFlutter？ • • • • コーディング→ビルドの繰り返しが嫌だったから UIの構築が楽だから riverpod_generatorを使ってみたかったから 社内でFlutter啓蒙すれば案件来るのではと思ったから # Page. 64 ![Page Image](https://bcdn.docswell.com/page/GE8KPDDX7D.jpg) ５-１. UIの構築が楽だから Flutterは「宣言的UI」 # Page. 65 ![Page Image](https://bcdn.docswell.com/page/LELZ1MMNJR.jpg) ５-１-２. 命令的UI is 何？ そもそも従来のUIとは？ 「命令的UI」 プログラム内でUIの具体的な手順や操作を 一つずつ手動で指定するアプローチ # Page. 66 ![Page Image](https://bcdn.docswell.com/page/4JMVWYYQJW.jpg) # Page. 67 ![Page Image](https://bcdn.docswell.com/page/PJR2Y99KE9.jpg) UIの構築は宣言的 ロジックは命令的 # Page. 68 ![Page Image](https://bcdn.docswell.com/page/PEXDGQQ57X.jpg) ５-１-２. 命令的UI is 何？ 1.画面情報を取得 2.UIを取得 3.イベントを設定 UI操作、プログラムでやってます（命令） # Page. 69 ![Page Image](https://bcdn.docswell.com/page/3EKX499R7D.jpg) ５-１-２. 命令的UI is 何？ 命令的UI ・各ステップを順番にプログラムする必要がある ・柔軟性はある ・同時に複雑性も増す ・どの手順がどこで行われているのかを理解するのが難しい # Page. 70 ![Page Image](https://bcdn.docswell.com/page/L735LWWGE5.jpg) ５-１-３. 宣言的UI is 何？ 宣言的UIの特徴① UIの具体的な手順や操作を手動で指定せず 代わりに望ましい状態や結果をコードで宣言する # Page. 71 ![Page Image](https://bcdn.docswell.com/page/87DDNKKN7G.jpg) ５-１-３. 宣言的UI is 何？ 【仕様】 ボタンを押すとテキストボックスに入力された値を 「入力されたテキスト」に表示する # Page. 72 ![Page Image](https://bcdn.docswell.com/page/VJPX5KKN78.jpg) ５-１-３. 宣言的UI is 何？ どんな実装が思い浮かびましたか？ # Page. 73 ![Page Image](https://bcdn.docswell.com/page/2EVLPVVYJQ.jpg) ５-１-３. 宣言的UI is 何？ 命令的UI 1. ボタンがクリックされたら 2. テキストボックスの内容を取得する 3. 変更された内容をUIに表示する 宣言的UI ボタンがクリックされたら、 テキストボックスの内容が変更される # Page. 74 ![Page Image](https://bcdn.docswell.com/page/57GXPLLWEL.jpg) ５-１-３. 宣言的UI is 何？ 命令的UI 1. ボタンがクリックされたら 2. テキストボックスの内容を取得する 3. 変更された内容をUIに表示する 宣言的UI ボタンがクリックされたら、 テキストボックスの内容が変更される # Page. 75 ![Page Image](https://bcdn.docswell.com/page/4EQ82YYQJP.jpg) ５-１-３. 宣言的UI is 何？ 宣言的UIで代表的な方々 # Page. 76 ![Page Image](https://bcdn.docswell.com/page/KJ42LWWYE1.jpg) ５-１-３. 宣言的UI is 何？ 宣言的UIの特徴② 宣言的UIのフレームワークやライブラリは 変更があれば自動的にUIを更新する （データバインディング） # Page. 77 ![Page Image](https://bcdn.docswell.com/page/LE1MLYYN7G.jpg) ５-１-３. 宣言的UI is 何？ 宣言的UIはUIがテンプレートのようになっている 空いている場所にピース（データ）を嵌めるだけ # Page. 78 ![Page Image](https://bcdn.docswell.com/page/GEW3VG1ME2.jpg) # Page. 79 ![Page Image](https://bcdn.docswell.com/page/47ZV4LPME3.jpg) ５-１-３. 宣言的UI is 何？ 何が言いたいかというと コードが望ましいUIの外観や動作を直感的に表現するため、 ビジュアルなイメージに近い形でUIを考えることができる # Page. 80 ![Page Image](https://bcdn.docswell.com/page/YJ653WM57V.jpg) ５-２. riverpod_generatorを使ってみたかったから 伝えたいこと 実装レベルの話になる 正直聞いても「？」となると思う 「ものすごくハードルが低くなってる！」 ということを伝えたい # Page. 81 ![Page Image](https://bcdn.docswell.com/page/GJ5YLMZGJ4.jpg) ５-２. riverpod_generatorを使ってみたかったから 宣言的UIのフレームワークやライブラリは 変更があれば自動的にUIを更新する これを実現するのがriverpod それを超パワーアップさせるのが riverpod_generator # Page. 82 ![Page Image](https://bcdn.docswell.com/page/LE35LW9PJ5.jpg) ５-２-１. riverpod is 何 Flutterの状態管理をサポートするパッケージ 状態管理とはアプリケーション内でのデータの管理を指す https://docs.google.com/presentation/d/19SrGm4lhghLsmxMqBt35rCCkd_ivHrB65D1Gu_wGZI/edit?usp=sharing # Page. 83 ![Page Image](https://bcdn.docswell.com/page/8EDDNKG3EG.jpg) ５-２-２.それで結局riverpod_generatorって？ Riverpodで宣言できるProviderは7種類ある • Provider • Future Provider • StreamProvider ？ • State Provider • StateNotifierProvider • (Async)NotifierProvider • AsyncNotifierProvider • ChangeNotifierProvider # Page. 84 ![Page Image](https://bcdn.docswell.com/page/V7PX5K3PE8.jpg) ５-２-２.それで結局riverpod_generatorって？ 正直分かりづらい 後述するけど宣言も面倒 自分はとりあえずStateNotifierProvider使ってた 大体何でもできるから・・・ # Page. 85 ![Page Image](https://bcdn.docswell.com/page/2JVLPV4V7Q.jpg) ５-２-２.それで結局riverpod_generatorって？ それをアノテーションをつけるだけで 良い感じにコード生成してくれるのが・・・ riverpod_generator もういちいち悩まなくて良いんです！ # Page. 86 ![Page Image](https://bcdn.docswell.com/page/5EGXPL11JL.jpg) ５-２. riverpod_generatorを使ってみたかったから 従来 この宣言で7種類のProviderと戦うことになる 引数ありだと更に複雑になる # Page. 87 ![Page Image](https://bcdn.docswell.com/page/4JQ82YDN7P.jpg) ５-２. riverpod_generatorを使ってみたかったから # Page. 88 ![Page Image](https://bcdn.docswell.com/page/K742LWZ3J1.jpg) ５-２. riverpod_generatorを使ってみたかったから アノテーションつけるだけ！ ファイルが自動生成されるので宣言しなくてヨシ！ # Page. 89 ![Page Image](https://bcdn.docswell.com/page/LJ1MLYRZEG.jpg) ５-２. riverpod_generatorを使ってみたかったから # Page. 90 ![Page Image](https://bcdn.docswell.com/page/GJW3VG16J2.jpg) ５-３.使ったパッケージたち おまけとして今回使用したパッケージを紹介 Flutterはフレームワークは小さく保ち、 Packageなどのエコシステムにの使用を奨励しており、 これにより柔軟性が最大化される by Flutter https://github.com/flutter/flutter/issues/56783#issuecomment-626260290 # Page. 91 ![Page Image](https://bcdn.docswell.com/page/4EZV4LPRJ3.jpg) ５-３.使ったパッケージたち mobile_scanner MLkitを使用したパッケージ 業務でMLkitを使用したQRリーダーを使用したら読み取りが爆速だったので採用 # Page. 92 ![Page Image](https://bcdn.docswell.com/page/Y7653WM1EV.jpg) ５-３.使ったパッケージたち flutter_datetime_picker_plus その名の通り、カレンダーUIを提供してくれる flutter_datetime_pickerをフォークして修正したパッケージ flutter_datetime_pickerはflutterのバージョンによってはエラーが出る（1敗） Flutterのパッケージはこういうのが多い XXXXXX_plusとかXXXXXX_v2とか Flutterのアプデが早いせいでもある # Page. 93 ![Page Image](https://bcdn.docswell.com/page/G75YLMZL74.jpg) ５-３.使ったパッケージたち http Http通信を実行するパッケージ http・dio・Retrofitが三大派閥 ちなみにhttpはDart公式が開発している 凝ったことしないならこれで十分 # Page. 94 ![Page Image](https://bcdn.docswell.com/page/9J2GL9R3JR.jpg) ５-３.使ったパッケージたち intl 本アプリでの導入目的はDateTimeフォーマッター 他には ・多言語化 ・性別毎の表示メッセージ変更 ・複数形での表示メッセージ変更 # Page. 95 ![Page Image](https://bcdn.docswell.com/page/DEYVQ4D8EM.jpg) ５-３.使ったパッケージたち flutter_riverpod riverpod_annotatio 超メジャー状態管理パッケージ とりあえず入れる 状態管理パッケージは他にもある だが今はRiverpod一強 # Page. 96 ![Page Image](https://bcdn.docswell.com/page/VJNMKY6978.jpg) ５-３.使ったパッケージたち freezed_annotation 不変(immutable)なデータクラスを自動生成するためのライブラリ Riverpodと同じくらいメジャーなパッケージ Freezedで生成したClassは以下のメソッドが提供される copyWith：ベースのインスタンスを一部変数を更新してコピーする ==：全てのメンバー変数が同じ事を確認する fromJson：Json形式をオブジェクトのメンバ変数へパース toJson：オブジェクトのメンバ変数をJson形式に変換 # Page. 97 ![Page Image](https://bcdn.docswell.com/page/YE9NVPL3E3.jpg) ５-４.詰まったところ • • • • • • 最新パッケージを使ってみたくて色々やったら手こずった 色々記事読んでもわからん！！！！ とかやってたら公式docに全て書いてありました まさかriverpod_generatorがRiverpodのdocに書いてあるとは 公式docが全てを救います 周回していつもこの答えに返ってくる # Page. 98 ![Page Image](https://bcdn.docswell.com/page/GE8KPDXL7D.jpg) ５-５.勉強になったこと ・一番はriverpod_generator ・話題になり始めたのはここ1年ぐらいの印象 ・Riverpodのdoc見るとgeneratorありきで驚いた ・pub.devでpopularity見ると50%なんだよな・・・ # Page. 99 ![Page Image](https://bcdn.docswell.com/page/LELZ1M8QJR.jpg) ５-５.アプリを制作して • • • • • コンポーネント設計をしてないのでUIコードのネストがめちゃ深い Riverpodもしっかり設計が必要 テストコードも書きたかった（テストが嫌いなので） Flutterの進化早すぎ（OSSだから） 他にも色々盛りたい機能があるので継続して開発したい # Page. 100 ![Page Image](https://bcdn.docswell.com/page/4JMVWYXKJW.jpg) ５-６.今からFlutterやる人へ 以下の公式docの導入編をやれば基礎は全てカバーできます Flutter Riverpod 私もこのdocをやったら記憶が蘇りました 最初はとっつきにくいかもしれません でも刺激的な体験になること間違いナシ！！！ # Page. 101 ![Page Image](https://bcdn.docswell.com/page/PJR2Y9N6E9.jpg) ６.最後のハナシ # Page. 102 ![Page Image](https://bcdn.docswell.com/page/PEXDGQND7X.jpg) 6. 最後のハナシ 取り組み全体を通して ・定期的な知識の棚卸しは重要 以前行った内容 + α のことができた。 できていることを忘れないように、 「書いて」定着させること＋Updateを継続したい ・システムはこれからも実装予定 → １社内システムとして機能するところまで持っていく # Page. 103 ![Page Image](https://bcdn.docswell.com/page/3EKX49ND7D.jpg) ご清聴、ありがとうございました