Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
CLIから見るAngular, React, Vue
Search
Daiki Ihara
March 13, 2019
Technology
1
920
CLIから見るAngular, React, Vue
Frontend-Training-Meetup #1
Daiki Ihara
March 13, 2019
Tweet
Share
More Decks by Daiki Ihara
See All by Daiki Ihara
tc39_study
sasurau4
1
760
ArrayBufferとBinary
sasurau4
1
620
Metro Bundler in Web
sasurau4
0
960
reading-mtc2018-web.pdf
sasurau4
1
550
Other Decks in Technology
See All in Technology
新規プロダクトでプロトタイプから正式リリースまでNext.jsで開発したリアル
kawanoriku0
1
110
今!ソフトウェアエンジニアがハードウェアに手を出すには
mackee
12
4.8k
いま注目のAIエージェントを作ってみよう
supermarimobros
0
260
テストを軸にした生き残り術
kworkdev
PRO
0
210
企業の生成AIガバナンスにおけるエージェントとセキュリティ
lycorptech_jp
PRO
2
170
生成AI時代のデータ基盤設計〜ペースレイヤリングで実現する高速開発と持続性〜 / Levtech Meetup_Session_2
sansan_randd
1
150
現場で効くClaude Code ─ 最新動向と企業導入
takaakikakei
1
250
250905 大吉祥寺.pm 2025 前夜祭 「プログラミングに出会って20年、『今』が1番楽しい」
msykd
PRO
1
930
LLMを搭載したプロダクトの品質保証の模索と学び
qa
0
1.1k
ZOZOマッチのアーキテクチャと技術構成
zozotech
PRO
4
1.6k
フルカイテン株式会社 エンジニア向け採用資料
fullkaiten
0
8.7k
新アイテムをどう使っていくか?みんなであーだこーだ言ってみよう / 20250911-rpi-jam-tokyo
akkiesoft
0
270
Featured
See All Featured
The Cult of Friendly URLs
andyhume
79
6.6k
Unsuck your backbone
ammeep
671
58k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
31
2.2k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
139
34k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
18
1.1k
Imperfection Machines: The Place of Print at Facebook
scottboms
268
13k
The Power of CSS Pseudo Elements
geoffreycrofte
77
6k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
4k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.6k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
RailsConf 2023
tenderlove
30
1.2k
StorybookのUI Testing Handbookを読んだ
zakiyama
31
6.1k
Transcript
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を足がかりにして、フロントエンドの世界を探求していきたい