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