フロントエンドエンジニアがCLIを開発した話 〜TSの旨味ソースがけ〜 須田 峻宗 in 札幌ITでぃぐでぃぐ会 vol.1

©Project PLATEAU / MLIT Japan 須田 峻宗 自己紹介 SUDA Takamune GWの戦歴は 　海釣り: 3日 　トラウト釣り: 2日 　登山: 1日 GISエンジニア（フロントエンド）

©Project PLATEAU / MLIT Japan 自己紹介 MIERUNE　BBQ運営してます 私もこのイベント経由で入社しました 7月末の#10では最高の会場でやります

©OpenStreetMap contributors 01　CLIについて 02　CLI開発してみる 03　TSの旨み 04　フロントエンドエンジニア全員CLI作れ 目次

©OpenStreetMap contributors 01 CLIについて

©Project PLATEAU / MLIT Japan CLI(Command Line Interface): キーボード等からの文字列を入力とし、文字列が表示される ウィンドウや古くはラインプリンタで印字される文字などを 出力とする、ユーザインタフェースの様式である。　wikipediaより ↔ GUI(Graphical User Interface) CLIとは CLIについて ←なんの温かみもない 　　こういう画面

©Project PLATEAU / MLIT Japan 内容を分解してみる CLIについて コマンド サブコマンド サブコマンド （対話型） オプション（直接型） 例: GitHub CLI

©Project PLATEAU / MLIT Japan 目的 CLIについて 例えば、Linuxコマンド・AWS CLI・GitHub CLI 基本的にGUIでも操作ができるが、シェルコマンドで操作できると - コマンド(処理)の再現ができる - アプリケーションレベルのスイッチングコストが減る - インターフェイスがキーボードに統一され入力・操作コスト↓ - より複雑な機能が使える

©OpenStreetMap contributors 02 CLI開発してみる

©Project PLATEAU / MLIT Japan ライブラリ CLI開発してみる ライブラリ commander.js : 直感的で自由度の高いサブコマンド・オプション(直接型)の設定 説明・バージョンを設定しておくと 「-h --help」「-v --version」のよく使われるサブコマンドも 勝手にサポートしてくれる。　他ライブラリ: CLI・meowなど inquirer.js : オプション（対話型）の組み込み

©Project PLATEAU / MLIT Japan サンプル CLI開発してみる MIERUNE（ミエルネ）は一部固定席を除きフリーアドレスに しかし社員数に対して自由席の数が ギリギリであるため 座席予約サイト 『SUWARUNE（スワルネ）』 が運用されている。 →やっぱりエンジニアならCLIで予約 したいっすよね（?）

©Project PLATEAU / MLIT Japan SUWARUNE CLI開発してみる 詳細は割愛。 エッジで動くCloudflare D1に対してAPIでCRUDしている。 　→CLIはAPI叩くだけ！楽！ありがてえ！ 一旦「SUWARUNE CLI」と命名

©Project PLATEAU / MLIT Japan SUWARUNE CLI CLI開発してみる 機能 1. 新規予約 2. 予約状況取得 3. 予約変更 4. 予約キャンセル

©Project PLATEAU / MLIT Japan 新規予約 CLI開発してみる 予約時にAPIに渡すパラメータ 1. 日付（デフォルトで当日） 2. 座席番号 3. 名前 program .command('reserve') .description('Make a reservation') .option('-d, --date ', 'Enter date in yyyymmdd format') .option('-s, --seat ', 'Enter seat number', parseInt) .option('-n, --name ', 'Enter your name') .action(async (options) => { // 予約するコード（APIなど） 　} サブコマンドの説明・オプション（直接型）の記述 (キー,格納する変数,説明)はこれだけ

©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);

©Project PLATEAU / MLIT Japan 予約状況取得 CLI開発してみる 予約状況取得時にAPIに渡すパラメータ 1. 日付（デフォルトで当日） program .command('map') .option('-d, --date ', 'Enter date in yyyymmdd format') .action(async (options) => { // dateがundefinedなら当日の日付で補完 // 取得するコード（APIなど） 　}

©Project PLATEAU / MLIT Japan 予約状況取得 CLI開発してみる AAでふざける視認性を担保することもできる

©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: 終了

©Project PLATEAU / MLIT Japan 予約キャンセル CLI開発してみる 予約時にAPIに渡すパラメータ 1. 日付（デフォルトで当日） 2. 座席番号 program .command('cancel') .description('Cancel a reservation') .option('-d, --date ', 'Enter date in yyyymmdd format') .option('-s, --seat ', 'Enter seat number', parseInt) .action(async (options) => { // キャンセルするコード（APIなど） 　} サブコマンドの説明・オプション（直接型）の記述 (キー,格納する変数,説明)はこれだけ

©Project PLATEAU / MLIT Japan やってみて CLI開発してみる かなり簡単

©OpenStreetMap contributors 03 TSの旨み

©Project PLATEAU / MLIT Japan あんまり無くね？？ 型安全性？・実行時間・環境依存 TSの旨み

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

©Project PLATEAU / MLIT Japan TSの旨みソース 焦げちゃいました TSの旨み もうちょっと修行してきます

©OpenStreetMap contributors 04 フロントエンドエンジニア 全員CLI作れ

©Project PLATEAU / MLIT Japan 理想的なUIとは何か 考えるきっかけになる 勧める理由

©Project PLATEAU / MLIT Japan 勧める理由 「理想的なUI」とは 1. 正しく使用する方が操作ミスをするより簡単 2. 誤った使い方をすることが困難 『プログラマが知るべき97のこと』Kevlin Henney著 →デフォルト設定で一番いい感じに 迷わない・迷わせない

©Project PLATEAU / MLIT Japan 勧める理由 UIを設計・実装する上で 『UX/UI』U-site ビジュアルデザインが最低限しか 設定できない・見た目で誤魔化せない より本質的な設計をすることが求められる。 例: 応答性・効率性・明瞭性・アクセシビリティ 　→そもそもの戦略・要件を詰める必要性

©Project PLATEAU / MLIT Japan 勧める理由 イケてるUIって？ 「見た目で誤魔化してないっすか？」 　カッケーけど操作感最悪より 　見た目ダサいけど操作感最高の方がマシ ってのはロゼッタストーンにも書かれている。

©Project PLATEAU / MLIT Japan 勧める理由 フロントエンドエンジニアを名乗っているからには ある程度のビジュアルデザインセンスは 持ち合わせているハズですよね カッケーデザイン　×　最高の操作感 CLI開発でより良い品質へ

© 地理院地図 全国最新写真（シームレス） ●CLIはかなり楽に作ることができる ●TypeScript の旨み感じられるまでではなく… ●フロントエンドエンジニアはCLI開発して圧倒的成長しよう まとめ