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
310
Machine Learning Basic and Python
yoheimune
1
530
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
300
Data Science BOOTCAMP Practices - Recommendation
yoheimune
0
220
Data Science BOOTCAMP Practices
yoheimune
0
370
Machine Learning with Python
yoheimune
0
360
Other Decks in Technology
See All in Technology
Kubernetes self-healing of your workload
hwchiu
0
580
20251029_Cursor Meetup Tokyo #02_MK_「あなたのAI、私のシェル」 - プロンプトインジェクションによるエージェントのハイジャック
mk0721
PRO
5
1.4k
組織全員で向き合うAI Readyなデータ利活用
gappy50
3
1.2k
AI AgentをLangflowでサクッと作って、1日働かせてみた!
yano13
1
160
東京大学「Agile-X」のFPGA AIデザインハッカソンを制したソニーのAI最適化
sony
0
140
ストレージエンジニアの仕事と、近年の計算機について / 第58回 情報科学若手の会
pfn
PRO
3
870
AWS re:Invent 2025事前勉強会資料 / AWS re:Invent 2025 pre study meetup
kinunori
0
660
RemoteFunctionを使ったコロケーション
mkazutaka
1
130
オブザーバビリティが育むシステム理解と好奇心
maruloop
3
1.4k
【SORACOM UG Explorer 2025】さらなる10年へ ~ SORACOM MVC 発表
soracom
PRO
0
160
ざっくり学ぶ 『エンジニアリングリーダー 技術組織を育てるリーダーシップと セルフマネジメント』 / 50 minute Engineering Leader
iwashi86
1
570
現場の壁を乗り越えて、 「計装注入」が拓く オブザーバビリティ / Beyond the Field Barriers: Instrumentation Injection and the Future of Observability
aoto
PRO
1
640
Featured
See All Featured
Keith and Marios Guide to Fast Websites
keithpitt
411
23k
For a Future-Friendly Web
brad_frost
180
10k
Why You Should Never Use an ORM
jnunemaker
PRO
59
9.6k
Product Roadmaps are Hard
iamctodd
PRO
55
11k
Documentation Writing (for coders)
carmenintech
75
5.1k
How to Ace a Technical Interview
jacobian
280
24k
Navigating Team Friction
lara
190
15k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
30
2.9k
Typedesign – Prime Four
hannesfritz
42
2.8k
The Invisible Side of Design
smashingmag
302
51k
The Straight Up "How To Draw Better" Workshop
denniskardys
238
140k
The Language of Interfaces
destraynor
162
25k
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