Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up
for free
Compare Tips
kanayannet
July 16, 2017
Programming
0
32
Compare Tips
kanayannet
July 16, 2017
Tweet
Share
More Decks by kanayannet
See All by kanayannet
kanayannet
0
54
kanayannet
0
170
kanayannet
0
87
kanayannet
0
98
kanayannet
1
380
kanayannet
0
230
kanayannet
0
400
kanayannet
0
220
kanayannet
0
870
Other Decks in Programming
See All in Programming
yagitatsu
3
1.6k
wasabeef
1
570
viteinfinite
0
210
nrslib
20
13k
hr01
0
1.6k
line_developers_tw
0
1.4k
showwin
0
130
decoc
1
350
nbkouhou
1
1.3k
tommykw
1
360
hr01
1
1.3k
line_developers_tw
0
550
Featured
See All Featured
eitanlees
111
9.9k
colly
187
14k
michaelherold
225
8.5k
jrom
114
7.1k
addyosmani
1348
190k
shpigford
368
42k
reverentgeek
168
7.2k
notwaldorf
13
1.6k
sachag
446
36k
roundedbygravity
241
21k
jonrohan
1021
380k
qrush
285
18k
Transcript
Gunma.web #28 @kanayannet kanayannet / compared_tips
自己紹介 自己紹介 氏名: 金澤 宏昭 twitter: @kanayannet facebook: HiroakiKanazawa kanayannet
/ compared_tips
比較という意味 比較対象 Vue と Angular kanayannet / compared_tips
豆知識、ヒントなどを集めたもの 今回の目的: Vue と Angular 比較して役立ちそう なものを集める kanayannet / compared_tips
なぜ話すのか なぜ話すのか Vue と Angular よく解ってない 比較できるほど詳しくない 他の人の記事を参考にしながら.. Tips にできればいいなぁ。
kanayannet / compared_tips
どの程度解ってないのか どの程度解ってないのか チュートリアルをそれぞれやった程度 kanayannet / compared_tips
チュートリアル チュートリアル Vue.js Angular https://jp.vuejs.org/v2/guide/ https://angular.io/tutorial kanayannet / compared_tips
いくつかの Vue の構文は AngularJS と非常に良く似 ているように見える ソース元 https://jp.vuejs.org/v2/guide/comparison.html kanayannet /
compared_tips
例 : v-if と ng-if kanayannet / compared_tips
API と設計の両方の観点から、Vue は AngularJS と 比較してとても単純です。 重要なアプリケーションを構築するために十分学ぶ のには大抵 1 日もかからないでしょう。
kanayannet / compared_tips
「大抵 1 日もかからないでしょう。」 kanayannet / compared_tips
本当か 本当か kanayannet / compared_tips
本当か? 試しにチュートリアルをやり始める kanayannet / compared_tips
4-5時間経過 終わらないよ汗 翌日 あと少しで終わりそう... kanayannet / compared_tips
よく見る よく見る 「大抵1日」 kanayannet / compared_tips
よく見ると.. 「大抵」1日 俺が未熟者なのかな〜汗 kanayannet / compared_tips
React、Angularになじめなかった僕に手を差し伸べてくれた Vue.js ソース元 http://qiita.com/samuraikun/items/bb2939296bbead34 kanayannet / compared_tips
「イケてるフロントエンド開発をちょっと試したい と思っても、BabelやWebpackの設定など環境構築 でつまづき...」 kanayannet / compared_tips
試しにチュートリアルの初めで比較 kanayannet / compared_tips
Angular git clone cd quickstart npm install npm start https://github.com/angular/quickstart.git
kanayannet / compared_tips
ああ、なるほど。 node(npm) 当たり前の世界になってるのね。 example https://angular.io/generated/live- examples/toh-pt1/eplnkr.html kanayannet / compared_tips
ちなみに vue はこう <script src="https://unpkg.com/vue"></script> <div id="app"> {{ message }}
</div> <script> var app = new Vue({ el: '#app', data: { message: 'Hello Vue!' } }) </script> kanayannet / compared_tips
一応、言っておきます。 解りやすい方が必ずしも良いとは限らないです。 後述でちょっと出ますよ。 kanayannet / compared_tips
最も勢いのある成長があったフレームワークはvue.jsであ る。 Angular 4のリリースがある。技術的には大きな変化があ るが、それはバージョン1から2ほどの劇的な変化ではな い。 ソース元 https://www.infoq.com/jp/news/2017/01/javascript- 2017-frameworks kanayannet
/ compared_tips
成長のあったフレームワーク 何をもって? kanayannet / compared_tips
試しにググった結果 Vuejs 654,000 AngularJS 15,800,000 kanayannet / compared_tips
??? kanayannet / compared_tips
github の更新履歴 2017 Vuejs 546 Angular 2114 kanayannet / compared_tips
結局なぜか解らず... kanayannet / compared_tips
Vue.jsから手軽に始めるJavaScriptフレームワーク ソース元 http://qiita.com/icoxfog417/items/49f7301be502bc2a kanayannet / compared_tips
Knockout.js , Angular と比較している Knockout.js IEサポート(6-11) HTML5標準のバインディング v- で始まる属性を設定することでバインディ ングは..
HTML標準には当然ない属性なのでエディタ によっては警告 kanayannet / compared_tips
Angular.js Directive(v-bindなど)と呼ばれる要素でバイン ディング Filterによるインラインでの処理 Vue との共通点がある kanayannet / compared_tips
Angular.js Routing まるでサーバーサイドのコントローラーのよう なことができる Vue.js には標準でないもの ※ 公式サイトにこれ使えばいいよはある。 https://jp.vuejs.org/v2/guide/routing.html kanayannet
/ compared_tips
Angular.js Testable Angular.jsはモジュール同士が疎結合なので、 テストがしやすい ※ 公式サイトに単体テストのやり方がある https://jp.vuejs.org/v2/guide/unit- testing.html kanayannet /
compared_tips
いくつかはその通りと感じたが..実際はそうじゃな かったり うーん。ドキュメントが古かった時代なのか な〜? kanayannet / compared_tips
まとめ まとめ どっちがどうなのか?はちょっと触ったくらいじゃ 解らない。 「こっちがいい」的な記事はあるけど、具体的に 「どこを比較して」なのか解りづらい汗 エディタ戦争的なカオスな流れか? kanayannet / compared_tips
反省点 反省点 記事を色々追って Tips にするつもりが... 何を根拠に言っているのか? 裏をとる作業がメインになってしまった。 kanayannet / compared_tips
俺だけか 俺だけか 実際どうなんだろ? 根拠があって使っている方の話を聞きたい! kanayannet / compared_tips
kanayannet / compared_tips
これで終わり これで終わり 5分もかかってないだろう? <- ツッコミ kanayannet / compared_tips
もう少し話すよ もう少し話すよ kanayannet / compared_tips
雑 雑感 感 ※ あくまで @kanayannet 個人の感想 Vue.js の方が入りやすいかな? 理由
npm なしでもいけそう チュートリアル : 日本語 この二つだけでも学習強度が低い kanayannet / compared_tips
使いどころ 使いどころ SPA DOMの書き換えが多いページ 双方向データバインディング UIの変更があればデータの更新を自動的に行う 機能 コンポーネント指向 UIコンポーネント(部品)を組み合わせてアプ リケーションを作る
kanayannet / compared_tips
おっと おっと 上記のワードでググったら比較的良記事が出てきた 学習コスト 制約がなく、シンプルで学習コストが低いのは、 Vue.jsの大きな利点 制約がないということ 制約がないことから、各個人によって書き方に相 違が出やすいことも意識しておいてほしいことで す。
Web Components を意識? https://app.codegrid.net/entry/vue-1 kanayannet / compared_tips
以下の4つの仕様を組み合わせた際の総称。 Templates HTML Imports Custom Elements Shadow DOM まだ W3C
Draft 段階 ソース元 http://gihyo.jp/dev/column/newyear/2017/web- components-prospect kanayannet / compared_tips
知らない概念 知らない概念 今回最大の収穫かな? 資料作成を目指し調査していく過程... kanayannet / compared_tips
関係ないけど 関係ないけど 全く関係ない kanayannet / compared_tips
関係ないけど 関係ないけど このスライド gitpitch で書いてるよ https://gitpitch.com/ kanayannet / compared_tips
関係ないけど 関係ないけど reveal.js みたい ソース見ると... syntax ハイライトもできる 動画も流せる youtube も簡易的に...
kanayannet / compared_tips
動画 動画 kanayannet / compared_tips
ご清 ご清聴 聴 ありがとうご ありがとうご ざいました。 ざいました。 kanayannet / compared_tips
質疑 質疑応 応答 答 GitPitch 以外なら受け付けます。 GitPitch は懇談会でw kanayannet /
compared_tips