Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
20190906 kansai.ts #02
s2terminal
GitHub@s2terminal
Twitter@suzukiterminal
Qiita@suzuki_sh
TypeScriptで
CLIアプリケーション開発
はじめに
TypeScript、何に使っていますか?
Webフロントエンド
Webバックエンド
Infrastructure as Code
Web Assembly
スマートスピーカーアプリ
CLI(コマンドラインインターフェース)
アプリケ...
TypeScriptでCLIアプリケーションを作る時の良いところ
• node.jsの豊富なライブラリを利用して開発できる
• `console.log();` でログが出るなど、node.jsの
経験が無くても、フロントエンドの開発経験が、
...
各プログラミング言語のモジュール数の比較
画像の出典: http://www.modulecounts.com/
TypeScriptでの
CLIアプリケーションの作り方
webpackでTypeScriptからJavaScriptに変換
TypeScriptで書いたコードは(通常)そのままでは動作しない
JavaScriptにコンパイルして動かす必要がある。
フロントエンド開発でよく使われるwebpackを利用...
webpackでTypeScriptからJavaScriptに変換
webpack.config.js の記載例
TypeStrong/ts-loader を利用
JSの出力先はデフォルトだと
`./dist` になる。
変更するには`outp...
package.jsonの設定
webpack用のpackage.jsonの設定
npm scriptsにwebpackコマンドを登録して
`$ npm run watch`やVS Codeの「NPMスクリプト」等で利用
package.jsonの設定
bin
PATHにインストールする実行ファイル
`$ npm install --global` すると、/usr/local/bin から
ここで指定したパスにシンボリックリンクが貼られる。
package.jsonの設定
bin
bin内のプログラムの例
webpackでコンパイルしたJavaScriptプログラムを実行
gitignoreとnpmignore
$ tree -L 2 (抜粋)
.
├── dist
│ └── main.js
├── src
│ └── index.ts
├── tsconfig.json
└── webpack.config....
gitignoreとnpmignore
npmignore
記述したファイルは、npmパッケージに含まれなくなる
.gitignore .npmignore
CLIアプリケーション開発に便利なnpmパッケージ
• Commander.js
• https://github.com/tj/commander.js/
Rubyの同名Gemにインスパイアされたnode.js用コマンドラインパーサ
• ca...
完成
作ったもの: i-read-u (https://github.com/s2terminal/i-read-u)
TypeScriptで
CLIアプリケーション開発は簡単!
発表者紹介
$ man s2terminal
WEB: https://www.s2terminal.com
NAME: s2terminal or suzuki.sh
JOB: Web Application Engineer
REGION:...
Links
• 参考文献
• TypeScriptでCLIツールを作って、npmパッケージにする
https://qiita.com/suzuki_sh/items/f3349efbfe1bdfc0c634
• Node.jsでCLIアプリ ·...
Thank you!
follow me https://twitter.com/suzukiterminal
Upcoming SlideShare
Loading in …5
×

TypeScriptでCLIアプリケーション開発

207 views

Published on

20190906
kansai.ts #2 - connpass https://kansaits.connpass.com/event/131541/

Published in: Technology
  • Be the first to comment

TypeScriptでCLIアプリケーション開発

  1. 1. 20190906 kansai.ts #02 s2terminal GitHub@s2terminal Twitter@suzukiterminal Qiita@suzuki_sh TypeScriptで CLIアプリケーション開発
  2. 2. はじめに TypeScript、何に使っていますか? Webフロントエンド Webバックエンド Infrastructure as Code Web Assembly スマートスピーカーアプリ CLI(コマンドラインインターフェース) アプリケーション
  3. 3. TypeScriptでCLIアプリケーションを作る時の良いところ • node.jsの豊富なライブラリを利用して開発できる • `console.log();` でログが出るなど、node.jsの 経験が無くても、フロントエンドの開発経験が、 ある程度そのまま使える • npm packageとして配布できる
  4. 4. 各プログラミング言語のモジュール数の比較 画像の出典: http://www.modulecounts.com/
  5. 5. TypeScriptでの CLIアプリケーションの作り方
  6. 6. webpackでTypeScriptからJavaScriptに変換 TypeScriptで書いたコードは(通常)そのままでは動作しない JavaScriptにコンパイルして動かす必要がある。 フロントエンド開発でよく使われるwebpackを利用できる。 TypeScript JavaScript webpack
  7. 7. webpackでTypeScriptからJavaScriptに変換 webpack.config.js の記載例 TypeStrong/ts-loader を利用 JSの出力先はデフォルトだと `./dist` になる。 変更するには`output.path`で 指定できる。
  8. 8. package.jsonの設定 webpack用のpackage.jsonの設定 npm scriptsにwebpackコマンドを登録して `$ npm run watch`やVS Codeの「NPMスクリプト」等で利用
  9. 9. package.jsonの設定 bin PATHにインストールする実行ファイル `$ npm install --global` すると、/usr/local/bin から ここで指定したパスにシンボリックリンクが貼られる。
  10. 10. package.jsonの設定 bin bin内のプログラムの例 webpackでコンパイルしたJavaScriptプログラムを実行
  11. 11. gitignoreとnpmignore $ tree -L 2 (抜粋) . ├── dist │ └── main.js ├── src │ └── index.ts ├── tsconfig.json └── webpack.config.js ビルド前のTypeScriptファイル Git管理下に含める必要がある npm配布時には含めたくない ビルド後のJavaScriptファイル npm配布時に含める必要がある Git管理下には含めたくない
  12. 12. gitignoreとnpmignore npmignore 記述したファイルは、npmパッケージに含まれなくなる .gitignore .npmignore
  13. 13. CLIアプリケーション開発に便利なnpmパッケージ • Commander.js • https://github.com/tj/commander.js/ Rubyの同名Gemにインスパイアされたnode.js用コマンドラインパーサ • catacli • https://github.com/akito0107/catacli 最初からTypeScript向けに開発されたライブラリで、 ユーザ定義オプション等に型推論が効くコマンドラインパーサ • Inquirer.js • https://github.com/SBoudrias/Inquirer.js CLIアプリ上でユーザに選択肢入力などを可能にする インタラクティブインターフェース
  14. 14. 完成 作ったもの: i-read-u (https://github.com/s2terminal/i-read-u)
  15. 15. TypeScriptで CLIアプリケーション開発は簡単!
  16. 16. 発表者紹介 $ man s2terminal WEB: https://www.s2terminal.com NAME: s2terminal or suzuki.sh JOB: Web Application Engineer REGION: Nagoya (5 years), Osaka (2 years) SKILL: PHP, Ruby, Azure, AWS, and TypeScript LOVE: Etrian Odyssey, Ninja Slayer, Puella Magi Madoka Magica (Miki Sayaka), THE IDOLM@STER SHINY COLORS (Kuwayama Chiyuki)
  17. 17. Links • 参考文献 • TypeScriptでCLIツールを作って、npmパッケージにする https://qiita.com/suzuki_sh/items/f3349efbfe1bdfc0c634 • Node.jsでCLIアプリ · JavaScript Primer https://jsprimer.net/use-case/nodecli/ • 画像の出典 • https://www.pexels.com/photo/blur-bright-business-codes-207580/ • http://www.modulecounts.com/ • https://pixabay.com/images/id-3302723/
  18. 18. Thank you! follow me https://twitter.com/suzukiterminal

×