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
ビギナーズ_レビューから学ぶ+1
Search
Yohei Munesada
November 05, 2015
Technology
6
15k
ビギナーズ_レビューから学ぶ+1
第13回HTML5ビギナーズ。ソースレビューを半年以上していて、その内容をまとめました。「バグがなくて読みやすい」がポイント。
Yohei Munesada
November 05, 2015
Tweet
Share
More Decks by Yohei Munesada
See All by Yohei Munesada
G'sデータベース設計の講義
yoheimune
4
5.3k
How to create a service, How to google !
yoheimune
0
300
Machine Learning Basic and Python
yoheimune
1
510
Python Scraping and Web Apps for G's ACADEMY TOKYO
yoheimune
0
240
DevelopWorkflow and Solving Problems
yoheimune
0
450
Git and Github for Beginners
yoheimune
1
290
Data Science BOOTCAMP Practices - Recommendation
yoheimune
0
210
Data Science BOOTCAMP Practices
yoheimune
0
370
Machine Learning with Python
yoheimune
0
350
Other Decks in Technology
See All in Technology
KubeCon + CloudNativeCon Japan 2025 Recap Opening & Choose Your Own Adventureシリーズまとめ
mmmatsuda
0
260
生まれ変わった AWS Security Hub (Preview) を紹介 #reInforce_osaka / reInforce New Security Hub
masahirokawahara
0
440
Should Our Project Join the CNCF? (Japanese Recap)
whywaita
PRO
0
330
2025-07-06 QGIS初級ハンズオン「はじめてのQGIS」
kou_kita
0
160
B2C&B2B&社内向けサービスを抱える開発組織におけるサービス価値を最大化するイニシアチブ管理
belongadmin
1
6.2k
OPENLOGI Company Profile
hr01
0
67k
Delta airlines®️ USA Contact Numbers: Complete 2025 Support Guide
airtravelguide
0
340
ビギナーであり続ける/beginning
ikuodanaka
3
720
成長し続けるアプリのためのテストと設計の関係、そして意思決定の記録。
sansantech
PRO
0
100
赤煉瓦倉庫勉強会「Databricksを選んだ理由と、絶賛真っ只中のデータ基盤移行体験記」
ivry_presentationmaterials
2
330
事業成長の裏側:エンジニア組織と開発生産性の進化 / 20250703 Rinto Ikenoue
shift_evolve
PRO
2
19k
CursorによるPMO業務の代替 / Automating PMO Tasks with Cursor
motoyoshi_kakaku
2
930
Featured
See All Featured
Scaling GitHub
holman
459
140k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
10
950
Become a Pro
speakerdeck
PRO
28
5.4k
Six Lessons from altMBA
skipperchong
28
3.9k
Being A Developer After 40
akosma
90
590k
GraphQLの誤解/rethinking-graphql
sonatard
71
11k
For a Future-Friendly Web
brad_frost
179
9.8k
Visualization
eitanlees
146
16k
How to Ace a Technical Interview
jacobian
277
23k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.8k
Building Adaptive Systems
keathley
43
2.7k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
31
1.3k
Transcript
https://flic.kr/p/7g1xov ιʔεϨϏϡʔ͔ΒֶͿ +BWB4DSJQU )5.-ϏΪφʔζ .VOFTBEB:PIFJ
About me 㾎 फఆ༸ฏ 㾎 גࣜձࣾϒοΫςʔϒϧ 㾎 !ZPIFJ.VOF 㾎 IUUQXXXZPIFJNOFU
㾎 )5.-ϏΪφʔζελοϑ 㾎 δʔεΞΧσϛʔϝϯλʔ 㾎 ࠷ۙͷڵຯɿ1ZUIPO ػցֶश ֶ ౷ܭ
㾎 εϚϗ͚ిࢠॻ੶αΠτ 㾎 IUUQTEPLVTIPPKJLBOKQUPQ ✓ jQuery, Handlebars ✓ Single Page
Architecture ಡॻͷ͓࣌ؒͰ͢
1PJOUPG7JFX ϨϏϡʔͰݟ͍ͯΔϙΠϯτʁ
1PJOUPG7JFX όά͕ͳͯ͘ಡΈ͍͢
1PJOUPG7JFX όά͕ͳͯ͘ಡΈ͍͢
1PJOUPG7JFX όά͕ͳͯ͘ಡΈ͍͢ νʔϜͷ
όά͕ͳ͍ίʔυʁ
όά͕ͳ͍ ᶃ༷௨Γʹಈ͘ w ༷ͷ௨Γʹಈ͘ w ແବͳ͜ͱ͠ͳ͍ w ͋Γ͑ΔΤϥʔέʔεʹରԠ͍ͯ͠Δ
ᶄ Ћ কདྷతʹόάʹͳΓͮΒ͍ w ࠓޙ͋Γͦ͏ͳมߋʹ͑͏ΔઃܭͰ͋Δ w ࠓ࣮͢Δඞཁͳ͍͚Ͳ
༷௨Γʹಈ͘ model.book.fetchOne = function (bookName, callback) { var url =
'/api/book/search'; var params = {name: bookName}; api(url, params).then(function (books) { callback(books[0]); }); }
ແବͳ͜ͱ͠ͳ͍όά͕ͳ͍ // OK model.book.fetchOne = function (bookName, callback) {
var url = '/api/book/search'; var params = {name: bookName}; api(url, params).then(function (books) { callback(books[0]); }); }
ແବͳ͜ͱ͠ͳ͍όά͕ͳ͍ // NG model.book.fetchOne = function (bookName, callback) {
var url = '/api/book/search'; var params = {name: bookName}; api(url, params).then(function (books) { $(‘.mypage #btn’).addClass('enable'); ແବͳ͜ͱ callback(books[0]); }); }
ΤϥʔέʔεʹରԠ͍ͯ͠Δόά͕ͳ͍ model.book.fetchOne = function (bookName, callback) { var url
= '/api/book/search'; var params = {name: bookName}; api(url, params).then(function (books) { callback(books[0]); }); }
ΤϥʔέʔεʹରԠ͍ͯ͠Δόά͕ͳ͍ model.book.fetchOne = function (bookName, callback) { var url
= ‘/api/book/search'; // 1. bookName͕ະࢦఆʁ var params = {name: bookName}; api(url, params).then(function (books) { // 2. ݕࡧ݁Ռͳ͠ʢnull͕ฦͬͯ͘Δʣʁ // 3. callback͕ະࢦఆʁ callback(books[0]); }); }
ΤϥʔέʔεʹରԠ͍ͯ͠Δόά͕ͳ͍ model.book.fetchOne = function (bookName, callback) { var url
= ‘/api/book/search'; // 1. bookName͕ະࢦఆʁ => ࠓճؾʹ͠ͳ͍ var params = {name: bookName}; api(url, params).then(function (books) { // 2. ݕࡧ݁Ռͳ͠ʢۭͷྻ͕ฦͬͯ͘Δʣ=> nullνΣοΫ // 3. callback͕ະࢦఆʁ => ؾʹ͠ͳ͍ callback(books && books[0]); }); }
ࠓޙͷมߋʹڧ͍όά͕ͳ͍ model.book.fetchOne = function (bookName, callback) { var url
= '/api/book/search'; var params = {name: bookName}; api(url, params).then(function (books) { callback(books[0]); }); }
ࠓޙͷมߋʹڧ͍όά͕ͳ͍ // ύϥϝʔλ͕૿͑Δʁ model.book.fetchOne = function (bookName, callback) {
var url = '/api/book/search'; var params = {name: bookName}; api(url, params).then(function (books) { callback(books[0]); }); }
ࠓޙͷมߋʹڧ͍όά͕ͳ͍ // ύϥϝʔλ͕૿͑Δʁ => ҾΛՃ͢Δ model.book.fetchOne = function (name,
callback, genre, author) { var url = '/api/book/search'; var params = {name: bookName}; api(url, params).then(function (books) { callback(books[0]); }); }
ࠓޙͷมߋʹڧ͍όά͕ͳ͍ // ύϥϝʔλ͕૿͑Δʁ model.book.fetchOne = function (name, callback, genre,
author) { var url = '/api/book/search'; var params = {name: bookName}; api(url, params).then(function (books) { callback(books[0]); }); }
ࠓޙͷมߋʹڧ͍όά͕ͳ͍ // ύϥϝʔλ͕૿͑Δʁ => ෳࢦఆՄೳʹ model.book.fetchOne = function (conditions,
callback) { var url = '/api/book/search'; api(url, conditions).then(function (books) { callback(books[0]); }); } // ͍ํ model.book.fetchOne({name:’φϧτ’}, callback: function () {});
3Fɿόά͕ͳ͍ ᶃ༷௨Γʹಈ͘ w ༷ͷ௨Γʹಈ͘ w ແବͳ͜ͱ͠ͳ͍ w ͋Γ͑ΔΤϥʔέʔεʹରԠ͍ͯ͠Δ
ᶄ Ћ কདྷతʹόάʹͳΓͮΒ͍ w ࠓޙ͋Γͦ͏ͳมߋʹ͑͏ΔઃܭͰ͋Δ w ࠓ࣮͢Δඞཁͳ͍͚Ͳ
ಡΈ͍͢ίʔυ https://flic.kr/p/aAvh9L
ಡΈ͍͢ίʔυʁ
ಡΈ͍͢ίʔυʁ ຊޠͷจষͱಉ͡
͡Ό͕ͷ࡞Γํ δϟΨΠϞͱਓࢀେ͖ΊͷཚΓʹͯ͠ۄͶ͗͘͠Γɺ͠ Β͖ͨચͬͯదʹ͖Γ·͢ɻத՚ುʹ༉Λେ̎ೖΕڧՐʹ͠ɺ ΛೖΕ৭͕มΘΔ·ͰᖱΊͨΒ̍ೖΕܰ͘ᖱΊ·̇ࣽ͢ोͷ ࡐྉΛೖΕಅͨ͠ΒփोΛऔΓനୌΛೖΕࠞͥதڧՐͷ··མ ֖͠Λࣽ͠ो͕ແ͘ͳΔ·Ͱఔࣽ٧Ί·͢ɻࣽ٧Ί ͨॴͰҰࠞͥɺ࠶མ֖͠Λͯࣽ͠ो͕ͳ͘ͳΔ·Ͱ༷ࢠΛݟ ͳ͕ΒߋʹҐࣽ٧Ί͍͖ͯ·͢ɻࣽो͕ແ͘ͳͬͨΒՐΛࢭ Ίམ֖͠Λͨ͠··ؒɺৠΒ͠·̇͢ຯ͕ߋʹછΈࠐΈ· ͢ΐʂ͜͜େࣄʂͦͯ͠Ͱ̇͢
ʼʻɻɻɻ http://cookpad.com/recipe/1519259
͡Ό͕ͷ࡞Γํ Լ४උ ɹδϟΨΠϞେ͖ΊͷཚΓʹͯ͠ۄͶ͗͘͠Γɺ͠Β͖ͨચͬͯదʹ͖Γ·͢ɻ ᖱΊΔ ɹத՚ುʹ༉Λେ̎ೖΕڧՐʹ͠ɺΛೖΕ৭͕มΘΔ·ͰᖱΊͨΒ̍ೖΕܰ͘ᖱΊ·̇͢ ࣽΔ ɹࣽोͷࡐྉΛೖΕಅͨ͠ΒփोΛऔΓനୌΛೖΕࠞͥதڧՐͷ··མ֖͠Λࣽ͠ो͕ແ͘ͳΔ·Ͱ ఔࣽ٧Ί·͢ɻࣽ٧ΊͨॴͰҰࠞͥɺ࠶མ֖͠Λͯࣽ͠ो͕ͳ͘ͳΔ·Ͱ༷ࢠΛݟͳ͕Β ߋʹҐࣽ٧Ί͍͖ͯ·͢ɻࣽो͕ແ͘ͳͬͨΒՐΛࢭΊམ֖͠Λͨ͠··ؒɺৠΒ͠·̇͢ຯ ͕ߋʹછΈࠐΈ·͢ΐʂ͜͜େࣄʂͦͯ͠Ͱ̇͢
?Т? http://cookpad.com/recipe/1519259
ಡΈ͍͢ຊޠͷϙΠϯτ ͭͷஈམʹͭͷ༰ʹߜΔ μϥμϥͱ͍จষΛॻ͔ͳ͍ ൱ఆจΑΓߠఆจΛ͏ ͘ॻ͘
ಡΈखʹΘΔݴ༿ΛબͿ
ಡΈ͍͢ຊޠͷϙΠϯτ ͭͷஈམʹͭͷ༰ʹߜΔ ɹɹॲཧΛؔͱͯ͠Γग़͢୯Ұͷݪଇ μϥμϥͱ͍จষΛॻ͔ͳ͍ ɹɹؔ࠷େߦҎ ൱ఆจΑΓߠఆจΛ͏ ɹɹOPU)FBWZ6TFS
Ͱͳ͘JT)FBWZ6TFS ͘ॻ͘ ɹɹࡾ߲ԋࢉࢠΛ͏υɾϞϧΨϯͰׂ͢Δ ಡΈखʹΘΔݴ༿ΛબͿ ɹɹదͳม໊Λ͏
ಡΈ͍͢ιʔείʔυΛॻ͘ʹʁ 㾎 ॲཧΛׂ͢Δ 㾎 Θ͔Γ͍͢ม໊Λ͚ͭΔ 㾎 దͳίϝϯτΛ͚ͭΔ 㾎 ΠϯσϯτΛదʹͱΔ 㾎
൱ఆΑΓߠఆΛ͏ 㾎 ωετΛઙ͘͢Δ 㾎 ؆ܿʹॻ͘ 㾎 HPUPจΛΘͳ͍ 㾎 είʔϓͷൣғ࠷খݶʹ͢Δ 㾎 ୯Ұͷݪଇ 㾎 ίʔυΛখ͘͞อͭ 㾎 ࣮ͷҙਤΛ͢ 㾎 ໊લ͖Ҿ 㾎 Ҿͷͭ·Ͱ 㾎 ૬ޓࢀরΛආ͚Δ 㾎 ίʔϧόοΫࠈΛආ͚Δ 㾎 ΦϒδΣΫτͷґଘΛԼ͛Δ 㾎 ͳͲ
ࢀߟਤॻ
ಡΈ͍͢ιʔείʔυΛॻ͘ʹʁ 㾎 ॲཧΛׂ͢Δ 㾎 Θ͔Γ͍͢ม໊Λ͚ͭΔ 㾎 దͳίϝϯτΛ͚ͭΔ 㾎 ΠϯσϯτΛదʹͱΔ 㾎
൱ఆΑΓߠఆΛ͏ 㾎 ωετΛઙ͘͢Δ 㾎 ؆ܿʹॻ͘ 㾎 HPUPจΛΘͳ͍ 㾎 είʔϓͷൣғ࠷খݶʹ͢Δ 㾎 ୯Ұͷݪଇ 㾎 ίʔυΛখ͘͞อͭ 㾎 ࣮ͷҙਤΛ͢ 㾎 ໊લ͖Ҿ 㾎 Ҿͷͭ·Ͱ 㾎 ૬ޓࢀরΛආ͚Δ 㾎 ίʔϧόοΫࠈΛආ͚Δ 㾎 ΦϒδΣΫτͷґଘΛԼ͛Δ 㾎 ͳͲ
͔Γ͍͢ม໊Λ͚ͭΔ // Is it an array? -> isArray -> Yes
/ No (True / False) function isArray (arrayObject) {} // Does this array contain the item ? => Yes / No (True / False) function contains(array, item) {} // ಈࢺ + తޠ function fetchBooks () {} // ಈࢺΛબͿ => ӳޠྗ + ͕ࣝඞཁ function push() / append() / put() / add() / enqueue() / etc // ಈࢺ͡Όͳͯ͘໌֬ͳ߹ function api () {}
ಡΈ͍͢ιʔείʔυΛॻ͘ʹʁ 㾎 ॲཧΛׂ͢Δ 㾎 Θ͔Γ͍͢ม໊Λ͚ͭΔ 㾎 దͳίϝϯτΛ͚ͭΔ 㾎 ΠϯσϯτΛదʹͱΔ 㾎
൱ఆΑΓߠఆΛ͏ 㾎 ωετΛઙ͘͢Δ 㾎 ؆ܿʹॻ͘ 㾎 HPUPจΛΘͳ͍ 㾎 είʔϓͷൣғ࠷খݶʹ͢Δ 㾎 ୯Ұͷݪଇ 㾎 ίʔυΛখ͘͞อͭ 㾎 ࣮ͷҙਤΛ͢ 㾎 ໊લ͖Ҿ 㾎 Ҿͷͭ·Ͱ 㾎 ૬ޓࢀরΛආ͚Δ 㾎 ίʔϧόοΫࠈΛආ͚Δ 㾎 ΦϒδΣΫτͷґଘΛԼ͛Δ 㾎 ͳͲ
νʔϜͷΛଅ͢ https://flic.kr/p/7aFKv2
νʔϜͷΛଅ͢ ᶃΈΜͳͰϨϏϡʔ͢Δ w ଞͷਓͷίʔυΛݟֶͯͿ w ଞͷਓͷࢦఠΛݟֶͯͿ w ࢦఠͰ͖Δྔ࣭ͷมԽ͔ΒεΩϧΞοϓ͕࣮ײͰ͖Δ
https://flic.kr/p/aAvcFL Summary
·ͱΊ ᶃόά͕ͳ͍ w ༷௨Γʹಈ͖ɺΤϥʔέʔεͷߟྀ͋Δ w কདྷతʹόάʹͳΓͮΒ͍ ᶄಡΈ͍͢ w ຊޠͷจষͱҰॹ w
ͨ͘͞Μͷϊϋ͕ଘࡏ͢Δʢม໊ͷ͚ํͳͲʣ ᶅνʔϜͷΛଅ͢ w ΈΜͳͰϨϏϡʔ͢Δ
One More Step
ใॲཧٕज़ऀࢼݧc*1"
$ISPNFΞοϓσʔτc$ISPNJVN#MPH
σβΠϯύλʔϯc5&$)4$03&
͏ͭϓϩάϥϛϯάݴޠΛ
Thank you http://www.yoheim.net @yoheiMune https://flic.kr/p/mzmQK2