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
84
Compare Tips
kanayannet
July 16, 2017
Tweet
Share
More Decks by kanayannet
See All by kanayannet
github copilot と 心理的安全性
kanayannet
0
130
FW と ライブラリ の考え方
kanayannet
0
180
TDDと今まで
kanayannet
0
510
個人開発 稼げなくてもいいアプリ
kanayannet
0
490
システムの堅牢性
kanayannet
0
260
Agile的学習方法
kanayannet
0
250
GUIをエンジニアが考える
kanayannet
0
220
http2http3
kanayannet
0
170
old typeからのクラウドインフラ
kanayannet
0
360
Other Decks in Programming
See All in Programming
1年目の私に伝えたい!テストコードを怖がらなくなるためのヒント/Tips for not being afraid of test code
push_gawa
1
650
pylint custom ruleで始めるレビュー自動化
shogoujiie
0
160
CDK開発におけるコーディング規約の運用
yamanashi_ren01
2
260
「個人開発マネタイズ大全」が教えてくれたこと
bani24884
1
290
責務と認知負荷を整える! 抽象レベルを意識した関心の分離
yahiru
8
1.5k
JAWS Days 2025のインフラ
komakichi
1
200
Honoをフロントエンドで使う 3つのやり方
yusukebe
7
3.6k
第3回関東Kaggler会_AtCoderはKaggleの役に立つ
chettub
3
1.2k
はじめての Go * WASM * OCR
sgash708
1
120
Honoとフロントエンドの 型安全性について
yodaka
7
1.5k
推しメソッドsource_locationのしくみを探る - はじめてRubyのコードを読んでみた
nobu09
2
350
ナレッジイネイブリングにAIを活用してみる ゆるSRE勉強会 #9
nealle
0
170
Featured
See All Featured
Practical Orchestrator
shlominoach
186
10k
Six Lessons from altMBA
skipperchong
27
3.6k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
6
580
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
59k
How to Think Like a Performance Engineer
csswizardry
22
1.4k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3k
How GitHub (no longer) Works
holman
314
140k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
129
19k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
175
52k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
4
440
Building Flexible Design Systems
yeseniaperezcruz
328
38k
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