UnJSで簡単に始めるCLIツール開発 / cli-tool-development-with-unjs

Vue Fes Japan × TSKaigi 合同イベント「次世代フロントエンドツールチェイン」登壇資料。

TypeScriptでのCLIツール開発に興味がある方に向けて、UnJSのパッケージ群を活用し、簡単かつシンプルにCLIツールを開発する方法を紹介。

Transcript

1. UnJSで簡単に始めるCLIツール開発
2. Speaker 株式会社ヤプリ フロントエンドエンジニア Aose Yuu • 2023/11〜 実質新卒入社 • ノーコードの新基盤Block UIを担当 • Vue Fes ボランティアスタッフ
3. CLIツール作っていますか？🛠
4. なんか作るの大変そう🤔
5. Vuex ▶ Pinia 移行スクリプトを作成して 自動化・CLIツール化 🤖
6. UnJSとは？
8. 使用するライブラリ • citty • unbuild • consola • jiti
9. 使用するライブラリ • citty • unbuild • consola • jiti ……　お手軽にCLIツールが作れる
10. 使用するライブラリ ……　お手軽にCLIツールが作れる ……　少ない設定でよしなにビルドしてくれる • citty • unbuild • consola • jiti
11. 使用するライブラリ ……　お手軽にCLIツールが作れる ……　少ない設定でよしなにビルドしてくれる ……　良い感じにコンソール出力を装飾できる • citty • unbuild • consola • jiti
12. 使用するライブラリ ……　お手軽にCLIツールが作れる ……　少ない設定でよしなにビルドしてくれる ……　良い感じにコンソール出力を装飾できる ……　TSファイルを簡単に実行できる • citty • unbuild • consola • jiti
13. 使用するライブラリ ……　お手軽にCLIツールが作れる ……　少ない設定でよしなにビルドしてくれる ……　良い感じにコンソール出力を装飾できる ……　TSファイルを簡単に実行できる • citty • unbuild • consola • jiti
14. ざっくりとした開発・利用の流れ
15. ざっくりとした開発・利用の流れ 1. citty でコマンドを定義 󰠁
16. ざっくりとした開発・利用の流れ 1. citty でコマンドを定義 󰠁 2. コマンドに対応する関数を作成 🔨
17. ざっくりとした開発・利用の流れ 1. citty でコマンドを定義 󰠁 2. コマンドに対応する関数を作成 🔨 3. ローカルだけで使う場合：  jiti にコマンドのファイルパスを渡して実行 🏃 󰝋
18. ざっくりとした開発・利用の流れ 1. citty でコマンドを定義 󰠁 2. コマンドに対応する関数を作成 🔨 3. ローカルだけで使う場合：  jiti にコマンドのファイルパスを渡して実行 🏃 󰝋 npm packageとして公開する場合：  unbuild でビルドして、npm publishで公開 🍳 🌎
19. ほら、簡単でしょ？😎
20. ヤプリカフェで注文したときの 値段を出力するCLI ☕ お題
26. Speaker 株式会社ヤプリ：エンジニアリングマネージャー こん 普通のエンジニアが頑張って30万行の Nuxt3バージョンアップした話 kickflowトラック 13:10〜13:40