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

● Name: Daiki Ihara ● ID: @sasurau4 ● Job: React Native / Server Side Kotlin / GraphQL ● Hobby: React, JavaScript, TypeScript 自己紹介

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

フロントエンド難しくない？ ● 多くのフレームワーク ○ 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.

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

CLIでとりあえず、始める ● CLIとは ○ Command Line Interface ○ 黒い画面でごにょごにょするやつ ● 最近のフロントエンドフレームワークでは、前述の難しい部分に触れずにHello Worldができるところまで構築してくれる

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

前提 ● フロントエンドは足が早いのでversionを明記 ○ @angular/cli: 7.3.5 ○ create-react-app: 2.1.8 ○ @vue/cli & @vue/cli-service: 3.5.0 ● 発表者があまりAngular / Vueに詳しくないので、間違いがあれば、Twitterで！

Angular ● Google謹製 ● One framework. Mobile & desktop. ● 依存性の注入、E2Eのツールなどおおよそウェブアプリ ケーション開発に必要なものがすべて揃ったフレーム ワーク ● TypeScript

@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ツールがある

https://angular.jp/cli より

React ● Facebook謹製 ● A JavaScript library for building user interfaces ● JSXというJSの中にHTMLっぽいものを埋め込む記法 でUIを構築する

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はなし

Vue ● AngularJSの開発に携わっていたEvan You氏によっ て開発 ● The Progressive JavaScript Framework ● 豊富なドキュメントとコアライブラリなどのエコシステ ムが成熟している

@vue/cli ● Vue公式のCLI ● 提供されるコマンド ○ add: pluginをinstallする ○ create: Vue appの雛形作成 ○ serve/build: 開発に必須なコマンド ○ ui: CLIと同じ機能をGUIで提供する etc.

@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で拡張したもの

Vue CLI UI demo

まとめ ● Angularはウェブアプリケーションを開発するベストプラクティスがデフォルトで設 定されている ● Reactは最低限の設定で、npm scriptsなど他の仕組みに頼る必要あり ● Vueは最低限からカスタマイズして追加していける ● Angular/Vueは方向性が似ている ○ Angular Libraryやvue-cli-pluginによるカスタマイズが可能 ○ 公式のサポートが手厚い

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