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
Compare Tips
Search
kanayannet
July 16, 2017
Programming
0
92
Compare Tips
kanayannet
July 16, 2017
Tweet
Share
More Decks by kanayannet
See All by kanayannet
無関心の谷
kanayannet
0
180
生成AIの使いどころ
kanayannet
0
150
github copilot と 心理的安全性
kanayannet
0
190
FW と ライブラリ の考え方
kanayannet
0
220
TDDと今まで
kanayannet
0
540
個人開発 稼げなくてもいいアプリ
kanayannet
0
520
システムの堅牢性
kanayannet
0
290
Agile的学習方法
kanayannet
0
280
GUIをエンジニアが考える
kanayannet
0
250
Other Decks in Programming
See All in Programming
deno-redisの紹介とJSRパッケージの運用について (toranoana.deno #21)
uki00a
0
150
Composerが「依存解決」のためにどんな工夫をしているか #phpcon
o0h
PRO
1
230
たった 1 枚の PHP ファイルで実装する MCP サーバ / MCP Server with Vanilla PHP
okashoi
1
190
なんとなくわかった気になるブロックテーマ入門/contents.nagoya 2025 6.28
chiilog
1
210
Julia という言語について (FP in Julia « SIDE: F ») for 関数型まつり2025
antimon2
3
980
High-Level Programming Languages in AI Era -Human Thought and Mind-
hayat01sh1da
PRO
0
230
Code as Context 〜 1にコードで 2にリンタ 34がなくて 5にルール? 〜
yodakeisuke
0
100
Kotlin エンジニアへ送る:Swift 案件に参加させられる日に備えて~似てるけど色々違う Swift の仕様 / from Kotlin to Swift
lovee
1
260
ReadMoreTextView
fornewid
1
480
AIコーディング道場勉強会#2 君(エンジニア)たちはどう生きるか
misakiotb
1
250
『自分のデータだけ見せたい!』を叶える──Laravel × Casbin で複雑権限をスッキリ解きほぐす 25 分
akitotsukahara
1
550
生成AIで日々のエラー調査を進めたい
yuyaabo
0
650
Featured
See All Featured
Automating Front-end Workflow
addyosmani
1370
200k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.5k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
How to Ace a Technical Interview
jacobian
277
23k
A Modern Web Designer's Workflow
chriscoyier
694
190k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
331
22k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Into the Great Unknown - MozCon
thekraken
39
1.9k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
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