フロントエンドエンジニアがCLIを開発した話 〜TSの旨味ソースがけ〜

Transcript

1. フロントエンドエンジニアがCLIを開発した話 〜TSの旨味ソースがけ〜 須田 峻宗 in 札幌ITでぃぐでぃぐ会 vol.1
2. ©Project PLATEAU / MLIT Japan 須田 峻宗 自己紹介 SUDA Takamune GWの戦歴は 　海釣り: 3日 　トラウト釣り: 2日 　登山: 1日 GISエンジニア（フロントエンド）
3. ©Project PLATEAU / MLIT Japan 自己紹介 MIERUNE　BBQ運営してます 私もこのイベント経由で入社しました 7月末の#10では最高の会場でやります
4. ©OpenStreetMap contributors 01　CLIについて 02　CLI開発してみる 03　TSの旨み 04　フロントエンドエンジニア全員CLI作れ 目次
5. ©OpenStreetMap contributors 01 CLIについて
6. ©Project PLATEAU / MLIT Japan CLI(Command Line Interface): キーボード等からの文字列を入力とし、文字列が表示される ウィンドウや古くはラインプリンタで印字される文字などを 出力とする、ユーザインタフェースの様式である。　wikipediaより ↔ GUI(Graphical User Interface) CLIとは CLIについて ←なんの温かみもない 　　こういう画面
7. ©Project PLATEAU / MLIT Japan 内容を分解してみる CLIについて コマンド サブコマンド サブコマンド （対話型） オプション（直接型） 例: GitHub CLI
8. ©Project PLATEAU / MLIT Japan 目的 CLIについて 例えば、Linuxコマンド・AWS CLI・GitHub CLI 基本的にGUIでも操作ができるが、シェルコマンドで操作できると - コマンド(処理)の再現ができる - アプリケーションレベルのスイッチングコストが減る - インターフェイスがキーボードに統一され入力・操作コスト↓ - より複雑な機能が使える
9. ©OpenStreetMap contributors 02 CLI開発してみる
10. ©Project PLATEAU / MLIT Japan ライブラリ CLI開発してみる ライブラリ commander.js : 直感的で自由度の高いサブコマンド・オプション(直接型)の設定 説明・バージョンを設定しておくと 「-h --help」「-v --version」のよく使われるサブコマンドも 勝手にサポートしてくれる。　他ライブラリ: CLI・meowなど inquirer.js : オプション（対話型）の組み込み
11. ©Project PLATEAU / MLIT Japan サンプル CLI開発してみる MIERUNE（ミエルネ）は一部固定席を除きフリーアドレスに しかし社員数に対して自由席の数が ギリギリであるため 座席予約サイト 『SUWARUNE（スワルネ）』 が運用されている。 →やっぱりエンジニアならCLIで予約 したいっすよね（?）
12. ©Project PLATEAU / MLIT Japan SUWARUNE CLI開発してみる 詳細は割愛。 エッジで動くCloudflare D1に対してAPIでCRUDしている。 　→CLIはAPI叩くだけ！楽！ありがてえ！ 一旦「SUWARUNE CLI」と命名
13. ©Project PLATEAU / MLIT Japan SUWARUNE CLI CLI開発してみる 機能 1. 新規予約 2. 予約状況取得 3. 予約変更 4. 予約キャンセル
14. ©Project PLATEAU / MLIT Japan 新規予約 CLI開発してみる 予約時にAPIに渡すパラメータ 1. 日付（デフォルトで当日） 2. 座席番号 3. 名前 program .command('reserve') .description('Make a reservation') .option('-d, --date <date>', 'Enter date in yyyymmdd format') .option('-s, --seat <seat>', 'Enter seat number', parseInt) .option('-n, --name <name>', 'Enter your name') .action(async (options) => { // 予約するコード（APIなど） 　} サブコマンドの説明・オプション（直接型）の記述 (キー,格納する変数,説明)はこれだけ
15. ©Project PLATEAU / MLIT Japan 新規予約 CLI開発してみる オプション（対話型） const questions: any[] = []; if (!name) { questions.push({ type: 'input', // テキスト入力で name: 'name',　// オプションの名前 message: 'Enter your name (up to 12 characters):', // 入力を促すメッセージ validate: input => input.length <= 12 ? true : 'up to 12 characters long.' }); // 入力値チェック＆エラーメッセージ } const answers = await prompt(questions);
16. ©Project PLATEAU / MLIT Japan 予約状況取得 CLI開発してみる 予約状況取得時にAPIに渡すパラメータ 1. 日付（デフォルトで当日） program .command('map') .option('-d, --date <date>', 'Enter date in yyyymmdd format') .action(async (options) => { // dateがundefinedなら当日の日付で補完 // 取得するコード（APIなど） 　}
17. ©Project PLATEAU / MLIT Japan 予約状況取得 CLI開発してみる AAでふざける視認性を担保することもできる
18. ©Project PLATEAU / MLIT Japan 予約変更 CLI開発してみる 新規予約→すでに同日同席に予約入っているか確認 →入っていたら、横取り上書き（変更）するか確認 questions.push({ type: 'confirm', // true or false name: 'force', message: `Already reserved by ${currentReservedUser}. Steal a seat?:`, }); true: UPDATE API実行 false: 終了
19. ©Project PLATEAU / MLIT Japan 予約キャンセル CLI開発してみる 予約時にAPIに渡すパラメータ 1. 日付（デフォルトで当日） 2. 座席番号 program .command('cancel') .description('Cancel a reservation') .option('-d, --date <date>', 'Enter date in yyyymmdd format') .option('-s, --seat <seat>', 'Enter seat number', parseInt) .action(async (options) => { // キャンセルするコード（APIなど） 　} サブコマンドの説明・オプション（直接型）の記述 (キー,格納する変数,説明)はこれだけ
20. ©Project PLATEAU / MLIT Japan やってみて CLI開発してみる かなり簡単
21. ©OpenStreetMap contributors 03 TSの旨み
22. ©Project PLATEAU / MLIT Japan あんまり無くね？？ 型安全性？・実行時間・環境依存 TSの旨み
23. フロントエンドエンジニアがCLIを開発した話 〜TSの旨味ソースがけ〜 須田 峻宗
24. ©Project PLATEAU / MLIT Japan TSの旨みソース 焦げちゃいました TSの旨み もうちょっと修行してきます
25. ©OpenStreetMap contributors 04 フロントエンドエンジニア 全員CLI作れ
26. ©Project PLATEAU / MLIT Japan 理想的なUIとは何か 考えるきっかけになる 勧める理由
27. ©Project PLATEAU / MLIT Japan 勧める理由 「理想的なUI」とは 1. 正しく使用する方が操作ミスをするより簡単 2. 誤った使い方をすることが困難 『プログラマが知るべき97のこと』Kevlin Henney著 →デフォルト設定で一番いい感じに 迷わない・迷わせない
28. ©Project PLATEAU / MLIT Japan 勧める理由 UIを設計・実装する上で 『UX/UI』U-site ビジュアルデザインが最低限しか 設定できない・見た目で誤魔化せない より本質的な設計をすることが求められる。 例: 応答性・効率性・明瞭性・アクセシビリティ 　→そもそもの戦略・要件を詰める必要性
29. ©Project PLATEAU / MLIT Japan 勧める理由 イケてるUIって？ 「見た目で誤魔化してないっすか？」 　カッケーけど操作感最悪より 　見た目ダサいけど操作感最高の方がマシ ってのはロゼッタストーンにも書かれている。
30. ©Project PLATEAU / MLIT Japan 勧める理由 フロントエンドエンジニアを名乗っているからには ある程度のビジュアルデザインセンスは 持ち合わせているハズですよね カッケーデザイン　×　最高の操作感 CLI開発でより良い品質へ
31. © 地理院地図 全国最新写真（シームレス） •CLIはかなり楽に作ることができる •TypeScript の旨み感じられるまでではなく… •フロントエンドエンジニアはCLI開発して圧倒的成長しよう まとめ