関連スライド
各ページのテキスト
社内備品の貸し出し もっと手軽にしてみたハナシ
目次 1. 自己紹介 2. そもそものハナシ 3. できたものと構成のハナシ 4. JSでフロントもバックもやっつけたハナシ 5. Flutterはいいぞっていうハナシ 6. 最後のハナシ
1. 自己紹介
1. 自己紹介 ・ 名前：竹澤 慎悟 ・ 業務：プログラマ（Web周り） ・ 趣味：音楽鑑賞・たまに曲づくり 音楽好きが行きすぎて、作曲やらボカロにまで手を出してしまいました ・ 最近ハマってること：ヘッドスパとASMR
1. 自己紹介 ・ 名前：鈴木 裕太 ・ 業務：モバイルアプリ開発 ・ 趣味：海外旅行（今年こそは・・・） ・最近受けたダメージ：車検見積もりが30万円だった
2.そもそものハナシ
2.そもそものハナシ ねこまたでは… 備品貸し出し管理 → サイボウズ上で管理 めんどくさい これがとにかく
2.そもそものハナシ めんどくさい理由
2.そもそものハナシ めんどくさい理由 ・借りたい備品を、すぐに探せない ・サイボウズへの記入漏れ ・返却確認の手間
2.そもそものハナシ めんどくさい理由 ・借りたい備品を、すぐに探せない ・サイボウズへの記入漏れ ・返却確認の手間 借りるだけでこんなにも手間が…
2.そもそものハナシ 管理もタイヘン サイボウズに 施設として登録する のがつらい… 総務の方も頭をかかえており…
2.そもそものハナシ 書くのがだるい を解決 登録は？ 返却は？
2.そもそものハナシ 書くのがだるい を解決 登録は？ 返却は？ QRコード読み取り
2.そもそものハナシ 書くのがだるい を解決 登録は？ QRコード読み取り 返却は？ QRコード読み取り
2.そもそものハナシ 書くのがだるい を解決 登録は？ QRコード読み取り 返却は？ QRコード読み取り 登録・更新の手間が一気に解消！
2.そもそものハナシ 管理側の問題を解決 サイボウズへ施設登録
2.そもそものハナシ 管理側の問題を解決 サイボウズへ施設登録 QR生成・備品へ貼り付け
2.そもそものハナシ めんどくさい理由の解消 ・借りたい備品を、すぐに探せない ・サイボウズへの記入漏れ ・返却確認の手間 👍 👍 👍
2.そもそものハナシ めんどくさい理由の解消 ・借りたい備品を、すぐに探せない ・サイボウズへの記入漏れ ・返却確認の手間 👍 👍 👍 QRが全て解決！！
3.できたものと 構成のハナシ
3.できたものと構成のハナシ 出来上がったものが こちら シンプルですね。
3.できたものと構成のハナシ アプリ 製 主な機能 ・QR読み取り ・備品情報の送信
3.できたものと構成のハナシ 管理側 と と 製
4. JSでフロントも バックもやっつけ たハナシ
4. JSでフロントもバックもやっつけたハナシ 2年目にして、バックエンド側をゴリゴリいじ る機会が増えた
4. JSでフロントもバックもやっつけたハナシ 2年目にして、バックエンド側をゴリゴリいじ る機会が増えた 同時にJSもゴリゴリすることが増えた
4. JSでフロントもバックもやっつけたハナシ JSマンになりつつあるので、 Nodeやらでサクッとサーバー作るべ そんなノリでいました
4. JSでフロントもバックもやっつけたハナシ JSマンになりつつあるので、 Nodeやらでサクッとサーバー作るべ そんなノリでいました こんな顔して考えてました
4. JSでフロントもバックもやっつけたハナシ 以外とめんどくさい (expressであーだこーだしたり、nodemonとかつっこんだり、ラジバンダリ)
4. JSでフロントもバックもやっつけたハナシ 以外とめんどくさい (expressであーだこーだしたり、nodemonとかつっこんだり、ラジバンダリ) 一番詰まった箇所 ・NodeとDB どーやってつなげる？？
4. JSでフロントもバックもやっつけたハナシ 以外とめんどくさい (expressであーだこーだしたり、nodemonとかつっこんだり、ラジバンダリ) 一番詰まった箇所 ・NodeとDB どーやってつなげる？？ こんな顔になりました
4. JSでフロントもバックもやっつけたハナシ 理想のライブラリ探しの旅へ
4. JSでフロントもバックもやっつけたハナシ 理想のライブラリ探しの旅へ ・なるだけSQLべた書きは避けたい（苦手） ・サクッとselectとかinsertしたい ・マイグレーションもよしなにしてほしい
4. JSでフロントもバックもやっつけたハナシ 理想のライブラリ探しの旅へ ・なるだけSQLべた書きは避けたい（苦手） ・サクッとselectとかinsertしたい ・マイグレーションもよしなにしてほしい そんなライブラリないかなぁ〜
4. JSでフロントもバックもやっつけたハナシ ありました。
4. JSでフロントもバックもやっつけたハナシ ありました。 Sequelize(シークライズ)くんです。 やぁ
4. JSでフロントもバックもやっつけたハナシ Sequelize、お主何奴じゃ... !?
4. JSでフロントもバックもやっつけたハナシ Sequelize、お主何奴じゃ... !? DBへのアクセスを簡単にしてくれる、 Node.jsのライブラリ
4. JSでフロントもバックもやっつけたハナシ Sequelize、お主何奴じゃ... !? DBへのアクセスを簡単にしてくれる、 Node.jsのライブラリ → ORMともいう。
4. JSでフロントもバックもやっつけたハナシ JSのデータ RDB マッピング Obj ユーザー ユーザー Obj 備品 ユーザー Obj 貸し出し記録 ユーザー
4. JSでフロントもバックもやっつけたハナシ 他にもいろいろ ・マイグレーションファイルの生成 ・なんならテーブルの生成
4. JSでフロントもバックもやっつけたハナシ 他にもいろいろ ・マイグレーションファイルの生成 ・なんならテーブルの生成 DB周りの操作がとてもスムーズに
4. JSでフロントもバックもやっつけたハナシ フロントエンドは？
4. JSでフロントもバックもやっつけたハナシ フロントエンドは？ Nuxt.jsに頼りました。
4. JSでフロントもバックもやっつけたハナシ フロントエンドは？ Nuxt.jsに頼りました。 バックエンドを触る機会もさることながら、 フロントエンドでVue.jsも触ることが多くなり、 個人的な復習もかねてNuxtを選びました (あとルーティングとかデザイン考えたりしなくていい）
4 - 1. インフラ・デプロイのハナシ インフラに関して EC2にミドルウェア群を入れて構築 AWS Cloud EC2 /tagayasu http://[IP address] equipment_rental_server_frontend equipment_rental_server_backend http://[IP address]/api
4 - 1. インフラ・デプロイのハナシ インフラに関して EC2にミドルウェア群を入れて構築 AWS Cloud EC2 /tagayasu http://[IP address] equipment_rental_server_frontend １つ問題が… equipment_rental_server_backend http://[IP address]/api
4 - 1. インフラ・デプロイのハナシ デプロイどーする？ 問題 → BackLogにてソースを管理
4 - 1. インフラ・デプロイのハナシ デプロイどーする？ 問題 → BackLogにてソースを管理 ・手動 （SSHにログイン、pullしたり)
4 - 1. インフラ・デプロイのハナシ デプロイどーする？ 問題 → BackLogにてソースを管理 ・手動 （SSHにログイン、pullしたり) ・なんちゃってデプロイ パイプラインの作成
4 - 1. インフラ・デプロイのハナシ 待ったをかけたのが、 https://quickops.sh/ @CommonCreation
4 - 1. インフラ・デプロイのハナシ 待ったをかけたのが、 https://quickops.sh/ @CommonCreation
4 - 1. インフラ・デプロイのハナシ 待ったをかけたのが、 何がすごいの？ ・BackLogがGithubActionを実行するようになります https://quickops.sh/ @CommonCreation
4 - 1. インフラ・デプロイのハナシ 待ったをかけたのが、 何がすごいの？ ・BackLogがGithubActionを実行するようになります どゆこと？？ https://quickops.sh/ @CommonCreation
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
4 - 1. インフラ・デプロイのハナシ 何で なの？ ・ねこまたは、案件情報をBacklogで一元管理 ここで問題
4 - 1. インフラ・デプロイのハナシ 何で なの？ ・ねこまたは、案件情報をBacklogで一元管理 ここで問題 PJで CI/CDしたいけど、どーする？
4 - 1. インフラ・デプロイのハナシ リポジトリを、GitHubやらGitLabにたてる → どれがどの案件のリポジトリか、整理がつかない そんなお悩みを吹っ飛ばしたのが BackLogのリポジトリに対して デプロイパイプラインを立てれる
5. Flutterはいいぞ っていうハナシ
5. Flutterはいいぞっていうハナシ 作ったアプリ
5. Flutterはいいぞっていうハナシ
5. Flutterはいいぞっていうハナシ なんでFlutter？ • • • • コーディング→ビルドの繰り返しが嫌だったから UIの構築が楽だから（個人の感想） riverpod_generatorを使ってみたかったから 社内でFlutter啓蒙すれば案件来るのではと思ったから
5. Flutterはいいぞっていうハナシ なんでFlutter？ • • • • コーディング→ビルドの繰り返しが嫌だったから UIの構築が楽だから riverpod_generatorを使ってみたかったから 社内でFlutter啓蒙すれば案件来るのではと思ったから
５-１. UIの構築が楽だから Flutterは「宣言的UI」
５-１-２. 命令的UI is 何？ そもそも従来のUIとは？ 「命令的UI」 プログラム内でUIの具体的な手順や操作を 一つずつ手動で指定するアプローチ
UIの構築は宣言的 ロジックは命令的
５-１-２. 命令的UI is 何？ 1.画面情報を取得 2.UIを取得 3.イベントを設定 UI操作、プログラムでやってます（命令）
５-１-２. 命令的UI is 何？ 命令的UI ・各ステップを順番にプログラムする必要がある ・柔軟性はある ・同時に複雑性も増す ・どの手順がどこで行われているのかを理解するのが難しい
５-１-３. 宣言的UI is 何？ 宣言的UIの特徴① UIの具体的な手順や操作を手動で指定せず 代わりに望ましい状態や結果をコードで宣言する
５-１-３. 宣言的UI is 何？ 【仕様】 ボタンを押すとテキストボックスに入力された値を 「入力されたテキスト」に表示する
５-１-３. 宣言的UI is 何？ どんな実装が思い浮かびましたか？
５-１-３. 宣言的UI is 何？ 命令的UI 1. ボタンがクリックされたら 2. テキストボックスの内容を取得する 3. 変更された内容をUIに表示する 宣言的UI ボタンがクリックされたら、 テキストボックスの内容が変更される
５-１-３. 宣言的UI is 何？ 命令的UI 1. ボタンがクリックされたら 2. テキストボックスの内容を取得する 3. 変更された内容をUIに表示する 宣言的UI ボタンがクリックされたら、 テキストボックスの内容が変更される
５-１-３. 宣言的UI is 何？ 宣言的UIで代表的な方々
５-１-３. 宣言的UI is 何？ 宣言的UIの特徴② 宣言的UIのフレームワークやライブラリは 変更があれば自動的にUIを更新する （データバインディング）
５-１-３. 宣言的UI is 何？ 宣言的UIはUIがテンプレートのようになっている 空いている場所にピース（データ）を嵌めるだけ
５-１-３. 宣言的UI is 何？ 何が言いたいかというと コードが望ましいUIの外観や動作を直感的に表現するため、 ビジュアルなイメージに近い形でUIを考えることができる
５-２. riverpod_generatorを使ってみたかったから 伝えたいこと 実装レベルの話になる 正直聞いても「？」となると思う 「ものすごくハードルが低くなってる！」 ということを伝えたい
５-２. riverpod_generatorを使ってみたかったから 宣言的UIのフレームワークやライブラリは 変更があれば自動的にUIを更新する これを実現するのがriverpod それを超パワーアップさせるのが riverpod_generator
５-２-１. riverpod is 何 Flutterの状態管理をサポートするパッケージ 状態管理とはアプリケーション内でのデータの管理を指す https://docs.google.com/presentation/d/19SrGm4lhghLsmxMqBt35rCCkd_ivHrB65D1Gu_wGZI/edit?usp=sharing
５-２-２.それで結局riverpod_generatorって？ Riverpodで宣言できるProviderは7種類ある • Provider • Future Provider • StreamProvider ？ • State Provider • StateNotifierProvider • (Async)NotifierProvider • AsyncNotifierProvider • ChangeNotifierProvider
５-２-２.それで結局riverpod_generatorって？ 正直分かりづらい 後述するけど宣言も面倒 自分はとりあえずStateNotifierProvider使ってた 大体何でもできるから・・・
５-２-２.それで結局riverpod_generatorって？ それをアノテーションをつけるだけで 良い感じにコード生成してくれるのが・・・ riverpod_generator もういちいち悩まなくて良いんです！
５-２. riverpod_generatorを使ってみたかったから 従来 この宣言で7種類のProviderと戦うことになる 引数ありだと更に複雑になる
５-２. riverpod_generatorを使ってみたかったから
５-２. riverpod_generatorを使ってみたかったから アノテーションつけるだけ！ ファイルが自動生成されるので宣言しなくてヨシ！
５-２. riverpod_generatorを使ってみたかったから
５-３.使ったパッケージたち おまけとして今回使用したパッケージを紹介 Flutterはフレームワークは小さく保ち、 Packageなどのエコシステムにの使用を奨励しており、 これにより柔軟性が最大化される by Flutter https://github.com/flutter/flutter/issues/56783#issuecomment-626260290
５-３.使ったパッケージたち mobile_scanner MLkitを使用したパッケージ 業務でMLkitを使用したQRリーダーを使用したら読み取りが爆速だったので採用
５-３.使ったパッケージたち flutter_datetime_picker_plus その名の通り、カレンダーUIを提供してくれる flutter_datetime_pickerをフォークして修正したパッケージ flutter_datetime_pickerはflutterのバージョンによってはエラーが出る（1敗） Flutterのパッケージはこういうのが多い XXXXXX_plusとかXXXXXX_v2とか Flutterのアプデが早いせいでもある
５-３.使ったパッケージたち http Http通信を実行するパッケージ http・dio・Retrofitが三大派閥 ちなみにhttpはDart公式が開発している 凝ったことしないならこれで十分
５-３.使ったパッケージたち intl 本アプリでの導入目的はDateTimeフォーマッター 他には ・多言語化 ・性別毎の表示メッセージ変更 ・複数形での表示メッセージ変更
５-３.使ったパッケージたち flutter_riverpod riverpod_annotatio 超メジャー状態管理パッケージ とりあえず入れる 状態管理パッケージは他にもある だが今はRiverpod一強
５-３.使ったパッケージたち freezed_annotation 不変(immutable)なデータクラスを自動生成するためのライブラリ Riverpodと同じくらいメジャーなパッケージ Freezedで生成したClassは以下のメソッドが提供される copyWith：ベースのインスタンスを一部変数を更新してコピーする ==：全てのメンバー変数が同じ事を確認する fromJson：Json形式をオブジェクトのメンバ変数へパース toJson：オブジェクトのメンバ変数をJson形式に変換
５-４.詰まったところ • • • • • • 最新パッケージを使ってみたくて色々やったら手こずった 色々記事読んでもわからん！！！！ とかやってたら公式docに全て書いてありました まさかriverpod_generatorがRiverpodのdocに書いてあるとは 公式docが全てを救います 周回していつもこの答えに返ってくる
５-５.勉強になったこと ・一番はriverpod_generator ・話題になり始めたのはここ1年ぐらいの印象 ・Riverpodのdoc見るとgeneratorありきで驚いた ・pub.devでpopularity見ると50%なんだよな・・・
５-５.アプリを制作して • • • • • コンポーネント設計をしてないのでUIコードのネストがめちゃ深い Riverpodもしっかり設計が必要 テストコードも書きたかった（テストが嫌いなので） Flutterの進化早すぎ（OSSだから） 他にも色々盛りたい機能があるので継続して開発したい
５-６.今からFlutterやる人へ 以下の公式docの導入編をやれば基礎は全てカバーできます Flutter Riverpod 私もこのdocをやったら記憶が蘇りました 最初はとっつきにくいかもしれません でも刺激的な体験になること間違いナシ！！！
６.最後のハナシ
6. 最後のハナシ 取り組み全体を通して ・定期的な知識の棚卸しは重要 以前行った内容 + α のことができた。 できていることを忘れないように、 「書いて」定着させること＋Updateを継続したい ・システムはこれからも実装予定 → １社内システムとして機能するところまで持っていく
ご清聴、ありがとうございました