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
600
Metro Bundler in Web
sasurau4
0
940
reading-mtc2018-web.pdf
sasurau4
1
550
Other Decks in Technology
See All in Technology
20250625 Snowflake Summit 2025活用事例 レポート / Nowcast Snowflake Summit 2025 Case Study Report
kkuv
1
310
5min GuardDuty Extended Threat Detection EKS
takakuni
0
140
Абьюзим random_bytes(). Фёдор Кулаков, разработчик Lamoda Tech
lamodatech
0
340
PHP開発者のためのSOLID原則再入門 #phpcon / PHP Conference Japan 2025
shogogg
4
730
Agentic Workflowという選択肢を考える
tkikuchi1002
1
500
ハノーバーメッセ2025座談会.pdf
iotcomjpadmin
0
160
PostgreSQL 18 cancel request key長の変更とRailsへの関連
yahonda
0
120
Liquid Glass革新とSwiftUI/UIKit進化
fumiyasac0921
0
210
Navigation3でViewModelにデータを渡す方法
mikanichinose
0
220
25分で解説する「最小権限の原則」を実現するための AWS「ポリシー」大全 / 20250625-aws-summit-aws-policy
opelab
9
1.1k
あなたの声を届けよう! 女性エンジニア登壇の意義とアウトプット実践ガイド #wttjp / Call for Your Voice
kondoyuko
4
440
PHPでWebブラウザのレンダリングエンジンを実装する
dip_tech
PRO
0
200
Featured
See All Featured
The Power of CSS Pseudo Elements
geoffreycrofte
77
5.8k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
8
670
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.3k
Done Done
chrislema
184
16k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
How GitHub (no longer) Works
holman
314
140k
The Cost Of JavaScript in 2023
addyosmani
51
8.4k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
138
34k
Building Applications with DynamoDB
mza
95
6.5k
Six Lessons from altMBA
skipperchong
28
3.8k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
181
53k
Rebuilding a faster, lazier Slack
samanthasiow
82
9.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を足がかりにして、フロントエンドの世界を探求していきたい