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
300
Firebase を使った Web アプリケーション開発/serverless
kiharu
14
12k
Firebaseを使ったリアルタイム同期アプリケーション開発/firebase
kiharu
9
5.2k
AWS Lambda と Node.js で作るサーバ不要のイベントドリブンアプリケーション/aws-lambda
kiharu
24
8.9k
WordPress サイトを iPhone アプリにしてみた
kiharu
6
1.5k
Other Decks in Programming
See All in Programming
[DroidKaigi 2024] Android ViewからJetpack Composeへ 〜Jetpack Compose移行のすゝめ〜 / From Android View to Jetpack Compose: A Guide to Migration
syarihu
1
630
開発を加速する共有Swift Package実践
elmetal
PRO
0
420
LangChainでWebサイトの内容取得やGitHubソースコード取得
shukob
0
160
XStateでReactに秩序を与えたい
gizm000
0
730
KSPの導入・移行を前向きに検討しよう!
shxun6934
PRO
0
280
Pythonで改めて考える「クラス(class)」の使いどころ
os1ma
1
360
Some more adventure of Happy Eyeballs
coe401_
2
190
あなたのアプリ、ログはでてますか?あるいはログをだしてますか? (Funabashi.dev用 軽量版)
uzulla
2
120
The Sequel to a Dream of Ruby Parser's Grammar
ydah
1
220
実践!難読化ガイド
mitchan
0
200
Prompt Cachingは本当に効果的なのか検証してみた.pdf
ttnyt8701
0
530
Amazon Neptuneで始める初めてのグラフDB ー グラフDBを使う意味を考える ー
satoshi256kbyte
2
260
Featured
See All Featured
The Brand Is Dead. Long Live the Brand.
mthomps
53
38k
Designing Experiences People Love
moore
138
23k
What's new in Ruby 2.0
geeforr
340
31k
For a Future-Friendly Web
brad_frost
174
9.3k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
36
2.1k
The Mythical Team-Month
searls
218
43k
The Invisible Customer
myddelton
119
13k
Fashionably flexible responsive web design (full day workshop)
malarkey
401
65k
Fontdeck: Realign not Redesign
paulrobertlloyd
80
5.1k
Intergalactic Javascript Robots from Outer Space
tanoku
268
26k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
166
48k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
36
1.7k
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-*'& ׀耮ָ֮הֲ׀ְׂת׃