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
15分で分かったつもりになるAngular 2 概要/angular2
Search
kiharu sasaki
December 26, 2015
Programming
23
20k
15分で分かったつもりになるAngular 2 概要/angular2
Angular 2 の特徴を美味しいところだけ凝縮してお届けします
kiharu sasaki
December 26, 2015
Tweet
Share
More Decks by kiharu sasaki
See All by kiharu sasaki
マルチクラウドナイト/multicloud-night-panel-discussion
kiharu
1
320
Firebase を使った Web アプリケーション開発/serverless
kiharu
14
13k
Firebaseを使ったリアルタイム同期アプリケーション開発/firebase
kiharu
9
5.3k
AWS Lambda と Node.js で作るサーバ不要のイベントドリブンアプリケーション/aws-lambda
kiharu
24
9k
WordPress サイトを iPhone アプリにしてみた
kiharu
6
1.6k
Other Decks in Programming
See All in Programming
ユーザーにサブドメインの ECサイトを提供したい (あるいは) 2026年函館で一番熱くなるかもしれない言語の話
uvb_76
0
160
primeNumberでのRBS導入の現在 && RBS::Traceでinline RBSを拡充してみた
mnmandahalf
0
210
『Python → TypeScript』オンボーディング奮闘記
takumi_tatsuno
1
120
Duke on CRaC with Jakarta EE
ivargrimstad
1
600
「MCPを使ってる人」が より詳しくなるための解説
yamaguchidesu
0
290
バランスを見極めよう!実装の意味を明示するための型定義 TSKaigi 2025 Day2 (5/24)
whatasoda
2
730
Blueskyのプラグインを作ってみた
hakkadaikon
1
160
Use Perl as Better Shell Script
karupanerura
0
110
JVM の仕組みを理解して PHP で実装してみよう
m3m0r7
PRO
1
240
ソフトウェア品質特性、意識してますか?AIの真の力を引き出す活用事例 / ai-and-software-quality
minodriven
19
6.4k
JSAI2025 RecSysChallenge2024 優勝報告
unonao
1
310
TypeScript だけを書いて Tauri でデスクトップアプリを作ろう / Tauri with only TypeScript
tris5572
2
480
Featured
See All Featured
Optimizing for Happiness
mojombo
378
70k
Documentation Writing (for coders)
carmenintech
71
4.8k
Adopting Sorbet at Scale
ufuk
76
9.4k
GraphQLとの向き合い方2022年版
quramy
46
14k
Reflections from 52 weeks, 52 projects
jeffersonlam
349
20k
Navigating Team Friction
lara
185
15k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
252
21k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
30
2.1k
Building Better People: How to give real-time feedback that sticks.
wjessup
368
19k
Making Projects Easy
brettharned
116
6.2k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
30
2.4k
Designing for Performance
lara
608
69k
Transcript
ⴓַאחז "OHVMBS嚊銲 ,JIBSV4BTBLJ %FD ⴓ ד
⡟ղ加ֹכ ,JIBSV4BTBLJ フリーランスでシステム開発をしています +"846(千葉 コアメンバー 普段は"OHVMBS+4や#BDLCPOF使い パダワン !CVNQ@PG@LJIBSV )"-
˘r˘ ԍ CVNQIBUFOBCMPHDPN 'SFFMBODF GBDFCPPLDPN LJIBSVTBTBLJ
1SFNJTF • 劤项俱כծ植儗挿ך剑倜غ٦آّٝ "OHVMBSˊCFUB ك٦أח ⡲䧭׃גְתׅ • ➙䖓ךغ٦آّٝ،حفח⠵ְծ 鎸鯹ⰻ㺁ה殯ז㜥さָ׀ְׂתׅկ
ַ֮ׄ׀✪䪫ְֻׁ ➙㔐ך项俱חֶֽ䲿
*/%&9 ➙傈ֶ鑧ׅⰻ㺁
䫇ִגְֶֹه؎ٝز 䨽䠬 "OHVMBS嚊銲 罋项俱
0WFSWJFX "OHVMBS嚊銲
4QFFE 1FSGPSNBODF 4USVDUVSF 4VQQPSU -BOHVBHF $SPTT 1MBUGPSN Ⳣ椚鸞䏝ָ㣐䌴ח何㊣կ
؟٦غ٦؟؎سٖٝت ؚٔٝ〳腉ח ֿתדך.78䙼䟝 ַ$PNQPOFOUT䭷ぢ ח • 5ZQF4DSJQU • &4&4 • %BSU • 8FC • رأؙزحف،فٔ • ٌغ؎ٕ،فٔ 'FBUVSFT 㛇劤涸ח"OVHMBSכծ"OVHMBS+4 禸 הכ תֻⴽ暟ה׃ג罋ִךָ姻鍑կ
4QFFE 1FSGPSNBODF أؾ٦سכWFSה嫰鯰׃ג։⦓חկ 㢌刿嗚濼ח銲ׅ儗"OHVMBSדכ孡חׅ 䗳銲ָזְٖكٕח何㊣կ 41&&% 㢌刿嗚濼
˟OHKBQBOؕٝؿ؋ٖٝأ项俱״ խ出展: IUUQTIUNMFYQFSUTKQBMCBUSPTBSZ
4USVDUVSF DPOUSPMMFSװTDPQFכ䐖姺חזծ .78ؿٖ٦يٙ٦ַؙ؝ٝه٦طٝز䭷ぢפկ Application Component List Component
Detail Component Other Component Detail Component Detail Component ؝ٝه٦طٝزהכ • "QQMJDBUJPO䠐ך֮磛䏝דⴓ ⶴ׃ػ٦خךאא • ػ٦خך䮶莸ְ $POUSPMMFS װ ر٦ةծأة؎ٕ4IBEPX%0.ח ꟗׄ鴥 ؕفإٕ⻉ ˟ • "QQMJDBUJPO荈魦ָزحفٖ كٕך㣐ֹזאך؝ٝه٦طٝز
4VQQPSU -BOHVBHF Ⱅ䒭דכ5ZQF4DSJQU䱿㤺 • 5ZQF4DSJQU &4&4
%BSU؟ه٦زָׅ "OHVMBSדכ5ZQF4DSJQUח״ ؝٦ر؍ؚٝ䱿㤺׃גְ ➙䖓ך"OHVMBSדכ54ךⵃ欽ָ ⚺崧חזגְֻה䙼
$SPTT 1MBUGPSN 4&0㼎瘻ָ䗳銲הׁؐؑـ؟؎زדך ⵃ欽〳腉ח • رأؙزحفٌغ؎ٕ،فٔ "OESPJEJ04
*POJD /BUJWF4DSJQUחג"OHVMBSפך 㼎䘔ָ鹌遤⚥ • 4&0㼎瘻ָ䗳銲ז؟؎ز ؟٦غ٦؟؎سٖٝتؚٔٝח״ 4&0㼎瘻ָ䗳銲ז؟؎زד㼪Ⰵ〳
8JUIPVU $PNQBUJCJMJUZ˘ 禸הך✼䳔䚍כ֮תׇ ׃ծ幉㖈ׇֿׁהכ〳腉J • 獳遤䩛갫 (PPHMF+BQBO%FWFMPQFST#MPH չء٦يٖأז،حفؚٖ٦سך倯岀חאְגպ
IUUQHPPHMFEFWKQCMPHTQPUKQBOHVMBSBOHVMBSIUNM • OHGPSXBSE 傀㶷ך"OHVMBS،فٔ؛٦ءّٝחOHGPSXBSEה "OHVMBSJODMVEFֿׅהד穈さׇ〳腉חׅ IUUQTHJUIVCDPNOH6QHSBEFSTOHGPSXBSE
*NQPSUBOUQPJOUT 䫇ִגְֶֹه؎ٝز
5FNQMBUF 4ZOUBY !$PNQPOFOU !*OQVU !0VUQVU %FQFOEFODZ *OKFDUJPO 3PVUJOH
/BWJHBUJPO 倯ぢر٦ةغ؎ٝسכ ⨳㖈ָծ4ZOUBYָ䗍㦩 ח㢌刿חזגְ OHBQQOHDPOUSPMMFS כ䐖姺կ$PNQPOFOU䭷 ぢדך鎸鶢然钠ׅ *NQPSUBOU 1PJOUT 劤傈כֶ鑧׃תׇN @@ N "OHVMBS㨣ח֮ג 剑ⴱח䫇ִגֶֻץֹه؎ٝز
5FNQMBUF4ZOUBY
5FNQMBUF 4ZOUBY *OUFSQPMBUJPO ⟃הず圫חؿ؍ٕة٦ָⵃ欽〳腉 \\^^ر٦ةغ؎ٝر؍ؚٝ <p>Hello {{user.name}}</p>
<p>{{user.name | uppercase}}</p> <p>{{user.birthday | date:’YYYY/mm/dd’}}</p>
5FNQMBUF 4ZOUBY 1SPQFSUZ "UUSJCVUF $MBTT4UZMFCJOEJOH <>فٗػذ؍غ؎ٝر؍ؚٝ <img
ng-src=“images_url”> <img ng-show=“images_url”> <img ng-style=“color:blue”> <img [src]=“images_url”> <img [visible]=“true”> <img [style.color]=“blue”>
5FNQMBUF 4ZOUBY &WFOUCJOEJOH ؎كٝزغ؎ٝر؍ؚٝ <button ng-click=“onClick()”>
<button ng-keyup=“onKeyUp()”> <button ng-keydown=“onKeyDown()”> <button (click)=“onClick()”> <button (keyup)=“onKeyUp()”> <button (keydown)=“onKeyDown()”>
OH.PEFMEJSFDUJWF .PEFM̔7JFX♧倯ぢغ؎ٝر؍ؚٝ OH.PEFM<>.PEFM̔7JFX 5FNQMBUF 4ZOUBY
OH.PEFM< >.PEFM̒̔7JFX OH.PEFMEJSFDUJWF 倯ぢغ؎ٝر؍ؚٝ 5FNQMBUF 4ZOUBY
OH.PEFM<> .PEFM̒̔7JFX OH.PEFMEJSFDUJWF <> ד剅ֹ䳔ִ㜥さ
5FNQMBUF 4ZOUBY
!$PNQPOFOU
؝ٝه٦طٝزך㹀纏 5ZQF4DSJQUדך鎸鶢⢽ )5.- !$PNQPOFOU
!$PNQPOFOU *OQVU !0VUQVU ؝ٝه٦طٝز鋵㶨ךծر٦ة؎كٝزך「ֽ 床׃遤ֲ؎ٝة٦ؿؑ؎أ㹀纏 Application Component
List Component Detail Component Detail Component Detail Component 親 子 鋵̔㶨ر٦ة床׃ !*OQVU 親 子 㶨̔鋵؎كٝز鸐濼 !0VUQVU
!$PNQPOFOU *OQVU،ظذ٦ءّٝ 鋵̔㶨פ「ֽ床ׅر٦ة㾩䚍ה׃ג鷄⸇ׅ 親 子 親 子
CJOE5P$POUSPMMFS みたいなもの
!$PNQPOFOU 0VUQVU،ظذ٦ءّٝ 㶨̔鋵פ؎كٝز鸐濼涪欰ׇׁ 親 子 親 &WFOU
⡲䧭 子 POCSPBEDBTU みたいなもの
*NQSFTTJPO 䨽䠬
• 㷕统؝أز넝 • 禸ך项欵ָ崞ַׇזְ • 獳遤؝أز˘PS[ #BE ؝ٝه٦طٝز䭷ぢכ➙䖓ך⚺崧ד֮ծ3FBDUKTה⚛ן չ+4ؿٖ٦يٙ٦ؙ㣐菓嵲儗➿պך崧㢌ִ〳腉䚍㣐 *NQSFTTJPO
• 禸דך铬겗ָⰋ涸ח何㊣ ׁٌتٝח • 랲눤遭ָ幾ג湫䠬涸 • Ⱅ䒭%PDָ⯍㹋 (PPE
3FGFSFODF.BUFSJBMT 罋项俱
3FGFSFODF NBUFSJBMT 参考資料 0OFGSBNFXPSLˊ"OHVMBS Ⱅ䒭سًُؗٝز IUUQTBOHVMBSJP
"OHVMBS"EWFOU$BMFOEBS IUUQRJJUBDPNBEWFOUDBMFOEBS BOHVMBS սĔٔٔ٦أ鎸䙀վⴓדⴓַ "OHVMBSךأأً IUUQTIUNMFYQFSUTKQDBOJEPXFC չ"OHVMBS膷ד鋅"OHVMBSպ IUUQXXXTMJEFTIBSFOFUN@BSBLBXB BOHVMBSBOHVMBS " # $ %
#FIBQQZZPVS +4-*'& ׀耮ָ֮הֲ׀ְׂת׃