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
910
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
750
ArrayBufferとBinary
sasurau4
1
610
Metro Bundler in Web
sasurau4
0
950
reading-mtc2018-web.pdf
sasurau4
1
550
Other Decks in Technology
See All in Technology
An introduction to Claude Code SDK
choplin
2
1.4k
AI時代にも変わらぬ価値を発揮したい: インフラ・クラウドを切り口にユーザー価値と非機能要件に向き合ってエンジニアとしての地力を培う
netmarkjp
0
140
組織内、組織間の資産保護に必要なアイデンティティ基盤と関連技術の最新動向
fujie
0
300
Contract One Engineering Unit 紹介資料
sansan33
PRO
0
6.9k
Autify Company Deck
autifyhq
2
44k
Introduction to Bill One Development Engineer
sansan33
PRO
0
260
CDK Vibe Coding Fes
tomoki10
1
630
shake-upを科学する
rsakata
7
1.1k
Amazon SNSサブスクリプションの誤解除を防ぐ
y_sakata
3
190
低レイヤソフトウェア技術者が YouTuberとして食っていこうとした話
sat
PRO
3
2.3k
american aa airlines®️ USA Contact Numbers: Complete 2025 Support Guide
aaguide
0
500
PHPからはじめるコンピュータアーキテクチャ / From Scripts to Silicon: A Journey Through the Layers of Computing
tomzoh
2
150
Featured
See All Featured
The World Runs on Bad Software
bkeepers
PRO
70
11k
The Invisible Side of Design
smashingmag
301
51k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
48
2.9k
Six Lessons from altMBA
skipperchong
28
3.9k
Facilitating Awesome Meetings
lara
54
6.5k
Gamification - CAS2011
davidbonilla
81
5.4k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
8
700
Faster Mobile Websites
deanohume
308
31k
Building an army of robots
kneath
306
45k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.8k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.6k
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を足がかりにして、フロントエンドの世界を探求していきたい