CLIから見るAngular, React, Vue

Transcript

1. CLIから見るAngular, React, Vue by sasurau4 Frontend Training Meetup #1

2. • Name: Daiki Ihara • ID: @sasurau4 • Job: React

   Native / Server Side Kotlin / GraphQL • Hobby: React, JavaScript, TypeScript 自己紹介

3. 今日の話題 CLIから見るAngular, React, Vue

4. フロントエンド難しくない？ • 多くのフレームワーク ◦ Angular, Elm, jQuery, React, Riot, Vue,

   etc. • 多くの用語 ◦ Transpile, Bundle, ES5, ES6, yarn/npm, store, etc. • 多くの知識 ◦ HTML, CSS/CSS in JS, JavaScript/TypeScript, NodeJS, Transpiler, Bundler, Linter, Auto Formatter, etc.

5. どこから手をつければ...

6. CLIでとりあえず、始める • CLIとは ◦ Command Line Interface ◦ 黒い画面でごにょごにょするやつ •

   最近のフロントエンドフレームワークでは、前述の難しい部分に触れずにHello Worldができるところまで構築してくれる

7. 今回のLTのモチベ • あらゆる道具には解決したい課題があって、思想がある • フロントエンドフレームワークも同じ • その思想をCLIという道具を通じて見ていきたい

8. 前提 • フロントエンドは足が早いのでversionを明記 ◦ @angular/cli: 7.3.5 ◦ create-react-app: 2.1.8 ◦

   @vue/cli & @vue/cli-service: 3.5.0 • 発表者があまりAngular / Vueに詳しくないので、間違いがあれば、Twitterで！

9. Angular • Google謹製 • One framework. Mobile & desktop. •

   依存性の注入、E2Eのツールなどおおよそウェブアプリ ケーション開発に必要なものがすべて揃ったフレーム ワーク • TypeScript

10. @angular/cli • Angular公式のCLI • 提供されるコマンド ◦ add: パッケージをinstallしSchematicsが定義されていればその方式でセットアップする ◦ build/serve:

    開発に必須なコマンド ◦ new: Angular appの雛形を作る ◦ generate: componentやserviceなどを作成するscaffold ◦ lint/e2e/test: CI向けのコマンド etc. • Angular Consoleという3rd partyのGUIツールがある

11. https://angular.jp/cli より

12. React • Facebook謹製 • A JavaScript library for building user

    interfaces • JSXというJSの中にHTMLっぽいものを埋め込む記法 でUIを構築する

13. Create React App, react-scripts • React公式のCLI • Create React AppはReact

    appの雛形を作成 • react-scriptsで提供されるコマンド ◦ start/build: 開発に必須なコマンド ◦ test: unitテスト用のコマンド ◦ eject: Create React Appがよしなにしてくれているすべての configurationをPJのlocalにコピー してきて、完全にカスタマイズ可能にするコマンド • GUIはなし

14. Vue • AngularJSの開発に携わっていたEvan You氏によっ て開発 • The Progressive JavaScript Framework

    • 豊富なドキュメントとコアライブラリなどのエコシステ ムが成熟している

15. @vue/cli • Vue公式のCLI • 提供されるコマンド ◦ add: pluginをinstallする ◦ create:

    Vue appの雛形作成 ◦ serve/build: 開発に必須なコマンド ◦ ui: CLIと同じ機能をGUIで提供する etc.

16. @vue/cli-service • Create React Appにおけるreact-scriptsと同じ • @vue/cli-plugin-hoge, vue-cli-pluginで拡張が可能 ◦ @vue/cli-plugin-eslint

    ◦ vue-cli-plugin-storybook • 提供されるコマンド ◦ serve/build: @vue/cliと同じ ◦ その他pluginで拡張したもの

17. Vue CLI UI demo

18. まとめ • Angularはウェブアプリケーションを開発するベストプラクティスがデフォルトで設 定されている • Reactは最低限の設定で、npm scriptsなど他の仕組みに頼る必要あり • Vueは最低限からカスタマイズして追加していける •

    Angular/Vueは方向性が似ている ◦ Angular Libraryやvue-cli-pluginによるカスタマイズが可能 ◦ 公式のサポートが手厚い

19. 最後に • 普段何気なく、使っているツールを相対化するのは面白い • CLIの仕組みがFWごとに違って面白い • CLIを足がかりにして、フロントエンドの世界を探求していきたい