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
Agile PBL at New Grads Trainings
kawaguti
PRO
1
390
現場で効くClaude Code ─ 最新動向と企業導入
takaakikakei
1
210
250905 大吉祥寺.pm 2025 前夜祭 「プログラミングに出会って20年、『今』が1番楽しい」
msykd
PRO
1
680
企業の生成AIガバナンスにおけるエージェントとセキュリティ
lycorptech_jp
PRO
2
160
Automating Web Accessibility Testing with AI Agents
maminami373
0
1.2k
下手な強制、ダメ!絶対! 「ガードレール」を「檻」にさせない"ガバナンス"の取り方とは?
tsukaman
2
420
allow_retry と Arel.sql / allow_retry and Arel.sql
euglena1215
1
160
Firestore → Spanner 移行 を成功させた段階的移行プロセス
athug
1
440
Webブラウザ向け動画配信プレイヤーの 大規模リプレイスから得た知見と学び
yud0uhu
0
230
Language Update: Java
skrb
2
290
Snowflakeの生成AI機能を活用したデータ分析アプリの作成 〜Cortex AnalystとCortex Searchの活用とStreamlitアプリでの利用〜
nayuts
1
460
roppongirb_20250911
igaiga
1
200
Featured
See All Featured
Building Better People: How to give real-time feedback that sticks.
wjessup
368
19k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
30
9.6k
Mobile First: as difficult as doing things right
swwweet
224
9.9k
Documentation Writing (for coders)
carmenintech
74
5k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.6k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
139
34k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
358
30k
Building Flexible Design Systems
yeseniaperezcruz
328
39k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
23
1.4k
Practical Orchestrator
shlominoach
190
11k
Testing 201, or: Great Expectations
jmmastey
45
7.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を足がかりにして、フロントエンドの世界を探求していきたい