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

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

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バージョンアップした話 kickﬂowトラック 13:10〜13:40