CLIから見るAngular, React, Vue

CLIから見るAngular, React, Vue

Frontend-Training-Meetup #1

A32ef72a6a594abcf40c64154b968da6?s=128

Daiki Ihara

March 13, 2019
Tweet

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を足がかりにして、フロントエンドの世界を探求していきたい