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

フロントエンドエンジニアが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 <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など）　} サブコマンドの説明・オプション（直接型）の記述 (キー,格納する変数,説明)はこれだけ

©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 <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 <date>', 'Enter date in yyyymmdd format') .option('-s, --seat <seat>', 'Enter seat number', parseInt) .action(async (options) => { // キャンセルするコード（APIなど）　} サブコマンドの説明・オプション（直接型）の記述 (キー,格納する変数,説明)はこれだけ

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

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

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

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

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

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

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

MIERUNE

More Decks by MIERUNE

Other Decks in Technology

Featured

Transcript