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
760
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
680
ArrayBufferとBinary
sasurau4
1
540
Metro Bundler in Web
sasurau4
0
770
reading-mtc2018-web.pdf
sasurau4
1
460
Other Decks in Technology
See All in Technology
小さな開発会社がWebサービスを作る理由
polidog
PRO
1
160
AWS を使う上で知っておきたいオンプレミス知識/aws-on-premise-essentials
emiki
1
4.2k
レガシーをぶっ壊せ。AEONで始めるDevRelの話 / Qiita Night 2024-2-22
aeonpeople
3
150
Next'24 事例セッションの紹介とクラウド資格を活用したキャリア形成について語りMuscle
yasumuusan
1
340
**強い**エンジニアのなり方 - フィードバックサイクルを勝ち取る / grow one day each day
soudai
61
18k
Databricksを活用してDELISH KITCHENのレシピレコメンドを開発した話
furu8
0
250
日本におけるデータエンジニアリングのこれまでとこれから
foursue
12
2.5k
Autonomous Database Cloud 技術詳細 / adb-s_technical_detail_jp
oracle4engineer
PRO
14
35k
PHPカンファレンス小田原2024
ysknsid25
3
660
キャラクター制御のためのプロンプト術 for LINE Bot
uezo
0
520
Four keys改善の取り組み事例紹介
sansantech
PRO
3
230
TransitGatewayの基礎
toru_kubota
0
230
Featured
See All Featured
Robots, Beer and Maslow
schacon
PRO
155
7.9k
From Idea to $5000 a Month in 5 Months
shpigford
377
45k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
220
21k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
115
18k
The Art of Programming - Codeland 2020
erikaheidi
41
12k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
29
6k
The Straight Up "How To Draw Better" Workshop
denniskardys
227
130k
How to name files
jennybc
64
92k
The Illustrated Children's Guide to Kubernetes
chrisshort
29
46k
The Invisible Side of Design
smashingmag
294
49k
Facilitating Awesome Meetings
lara
41
5.6k
The Brand Is Dead. Long Live the Brand.
mthomps
48
28k
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を足がかりにして、フロントエンドの世界を探求していきたい