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
ゆく技術_くる技術.pdf
Search
IMANISHI TOSHIFUMI
December 19, 2018
Technology
0
260
ゆく技術_くる技術.pdf
IMANISHI TOSHIFUMI
December 19, 2018
Tweet
Share
More Decks by IMANISHI TOSHIFUMI
See All by IMANISHI TOSHIFUMI
Vue 3 超入門 ー ゆく Vue くる Vue
toshifumiimanishi
0
170
Form_design_from_Netflix.pdf
toshifumiimanishi
0
130
New_Sass_Module_System.pdf
toshifumiimanishi
2
850
JAMstack_kotohajime.pdf
toshifumiimanishi
0
87
mercurial_nyuumon.pdf
toshifumiimanishi
0
66
Web制作者のためのSassの参考書.pdf
toshifumiimanishi
3
2.8k
裏CSS.pdf
toshifumiimanishi
0
110
Other Decks in Technology
See All in Technology
M3 Expressiveの思想に迫る
chnotchy
0
110
生成AI時代の開発組織・技術・プロセス 〜 ログラスの挑戦と考察 〜
itohiro73
1
270
“社内”だけで完結していた私が、AWS Community Builder になるまで
nagisa53
1
400
「Chatwork」の認証基盤の移行とログ活用によるプロダクト改善
kubell_hr
1
200
生成AI時代 文字コードを学ぶ意義を見出せるか?
hrsued
1
580
BrainPadプログラミングコンテスト記念LT会2025_社内イベント&問題解説
brainpadpr
1
170
25分で解説する「最小権限の原則」を実現するための AWS「ポリシー」大全 / 20250625-aws-summit-aws-policy
opelab
9
1.2k
低レイヤを知りたいPHPerのためのCコンパイラ作成入門 完全版 / Building a C Compiler for PHPers Who Want to Dive into Low-Level Programming - Expanded
tomzoh
4
3.3k
【5分でわかる】セーフィー エンジニア向け会社紹介
safie_recruit
0
26k
Абьюзим random_bytes(). Фёдор Кулаков, разработчик Lamoda Tech
lamodatech
0
350
PHP開発者のためのSOLID原則再入門 #phpcon / PHP Conference Japan 2025
shogogg
4
850
rubygem開発で鍛える設計力
joker1007
2
220
Featured
See All Featured
The Cost Of JavaScript in 2023
addyosmani
51
8.5k
Building Applications with DynamoDB
mza
95
6.5k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
46
9.6k
The Language of Interfaces
destraynor
158
25k
Being A Developer After 40
akosma
90
590k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.8k
Making the Leap to Tech Lead
cromwellryan
134
9.3k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.4k
How to Ace a Technical Interview
jacobian
277
23k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Code Reviewing Like a Champion
maltzj
524
40k
Transcript
Ώٕ͘ज़ɺ͘Δٕज़ Dec 19, 2018 / Toshifumi Imanishi
ͳ͔ͳ͔ͤͳ͍K2VFSZ :PV%PO`U/FFEK2VFSZɺK2VFSZ͕ۙʹͳΔɻK2VFSZɺϒϥβؒͷࠩҟΛ ٵऩ͢ΔɺωΠςΟϒ+BWB4DSJQUΑΓ؆୯ɾָνϯͱ͍͏ཧ༝Ͱଟ͘ͷ։ൃऀ͔Β͠ ·Ε͍ͯΔɻ ʲK2VFSZͷओͳཧ༝ʳ w ϒϥβͷਐԽɺ+4ͷ৽ػೳͷՃ w ػೳཁ݅Λຬͨ͢ͷʹྗྔෆ ͔͠͠ɺK2VFSZΛࣺͯΔ͜ͱͰ͖ͳ͍ɻظϓϩδΣΫτʹ͓͍ͯɺωΠςΟϒ
+BWB4DSJQU7VFKTΑΓ͍׳ΕͨK2VFSZͰ։ൃ͢Δ҆৺ײɻطଘίʔυΛK2VFSZ Ҏ֎Ͱॻ͖͑ΔֶशBOE࣌ؒతίετɻ
7VFKTͷબࢶ ͍͘ΒK2VFSZ͕༏लͰۜͷؙͰͳ͍ɻͨͱ͑ɺ͓͍߹ΘͤϑΥʔϜͷ6*Λ࣮͢ Δ߹ɺΠϕϯτͱ%0.ཁૉΛඥ͚ͮΔΑΓɺঢ়ଶʢTUBUFʣΛڬΜͩ΄͏͕εέʔϥϏ ϦςΟͰ͋Δɻ7VFKTͷϦΞΫςΟϏγεςϜɺΦϒβʔόʔύλʔϯΛϕʔεʹ࣮͞Ε ͍ͯΔͨΊɺʮঢ়ଶͷࢹʯɺʮมߋݕʯʮ%0.ͷࣗಈөʯΛ։ൃऀ͕ҙࣝ͢Δ͜ͱͳ ͘ॲཧ͞ΕΔɻ event event event element
element element element element element ঢ়ଶ event event event
ঃʑʹK2VFSZͷಓΛ୧Ζ͏ɻઌड़ͨ͠7VFKTΛ༻͢Δ߹ɺK2VFSZΑΓωΠςΟϒ +BWB4DSJQUΛར༻࣮͕ͨ͠ଟ͘ͳΔͩΖ͏ɻK2VFSZͷϝιουΛωΠςΟϒ+BWB4DSJQUʹ ॻ͖͑ΔʹɺͲ͏͢ΕΑ͍͔ʁ ͦΜͳͱ͖ɺ:PV8PO`U/FFEK2VFSZ͕͓͢͢Ίʂ :PV8PO`U/FFEK2VFSZ $('.element').offset(); ? (JU)VCͰެ։தɿIUUQTHJUIVCDPNUPTIJGVNJJNBOJTIJ:PV8POU/FFEK2VFSZ
9"ͷςϯϓϨʔτΤϯδϯɺ&+4͕σϑΝΫτελϯμʔυͰ͋Δɻ&+4ɺ)5.-ϕʔε ͷߏจΏ͑Մಡੑ͕͋Γɺֶशίετগͳ͘ಋೖෑډͷ͍ݴޠͰ͋Δɻ ͔͠͠ɺ&+4ͰύϫʔෆΛײ͡Δ͜ͱ͋Γ·ͤΜ͔ʁͨͱ͑ɺ&+4ʹςϯϓϨʔτܧঝ ͕ඪ४ͰඋΘͬͯ·ͤΜɻ͔ͱ͍ͬͯɺ1VHΠϯσϯτߏจͷͨΊՄಡੑ͕ѱ͍ʢͳΜ͔ؾ࣋ ͪѱ͍ʣɻͰɺͲ͏͢Δ͔ʜ ৽ͨͳςϯϓϨʔτΤϯδϯͷՄೳੑ ❤ ❤
/VOKVDLTͱɺ.P[JMMBۘͷςϯϓϨʔτΤϯδϯͰ͋Δɻ/VOKVDLTɺ)5.-ϕʔε ͷߏจͰςϯϓϨʔτܧঝ͕ඪ४ࡌ͞Ε͍ͯΔڧྗͳݴޠͰ͋Δɻ ςϯϓϨʔτܧঝΛར༻͢Δ͜ͱͰɺςϯϓϨʔτͷ࠶ར༻Λ༰қʹ͢Δɻ͜Εɺ&+4Ͱ๊͑ Δʢׂ౷࣏ͷʣΛղܾ͢ΔͩΖ͏ɻ/VOKVDLTͷ༗༻ੑɺ2JJUBͷΞυϕϯτΧ ϨϯμʔͰެ։༧ఆɻ·ͨɺׂ౷࣏ͷྠಡձͷײจʹެ։தɻ /VOKVDLTͷ͢͢Ί ❤
HVMQͷਖ਼ࣜϦϦʔε
HVMQͰԿ͕มΘͬͨͷʁ w+BWB4DSJQUؔͰλεΫΛFYQPSU wSVOTFRVFODFHVMQTPVSDFNBQTͷඪ४ࡌ wXBUDIػೳͷڧԽ wMBTU3VO ʹΑΔ࣮ߦ࣌ؒͷॖ ͍Ζ͍Ζศརʹͳͬͨ
(SJEͷࣗಈஔΛ*&༻ʹαϙʔτ
ΨϯΨϯ(SJE-BZPVUͰ͍͜͏ʂ *&ͰࣗಈஔΛߦ͏߹ɺBVUPQSFpYFSͷΦϓγϣϯͰbBVUPQMBDF`ࢦఆ͢ΔPSίʔυ ্ʹ BVUPQSFpYFSHSJEBVUPQMBDF ͱ͍͏ίϝϯτΛهड़͢ΔɻHSJEUFNQMBUF BSFBͱࣗಈஔ͕*&Ͱ༻Ͱ͖ΔΑ͏ʹͳͬͨࠓɺ$44(SJE-BZPVUΛΘͳ͍ཧ ༝͕ͳ͍ʂͪͳΈʹ4BGBSJʢݱࡏͷ࠷৽όʔδϣϯʣͰɺHBQϓϩύ ςΟ͕ޮ͔ͳ͍ͨΊɺHSJEHBQʢچϓϩύςΟʣͷ྆ํΛهड़͢Δඞཁ͕͋Δɻ˞ͨͩ͠ɺ "VUPQSFpYFSͰิ͞Εͳ͍߹ʹݶΔɻ
1SFUUJFSͷ)5.-αϙʔτ
1SFUUJFSͯԿʁ 1SFUUJFSͱɺܗπʔϧͰ͋ΔɻΑ͘-JOUπʔϧͱൺֱ͞ΕΔ͕ɺ-JOUίʔσΟϯά ϧʔϧͷ߹ੑΛνΣοΫɺ1SFUUJFSՄಡੑͷ্Λతͱͨ͠ίʔυܗΛͦΕͧΕ ୲͍ͬͯΔɻͳͷͰɺ1SFUUJFSͱ-JOUΛ߹Θͤͯ༻͢Δέʔε͕ଟ͍ɻ߹Θͤͯ͏ύλʔ ϯʹɺͭͷύλʔϯ͕͋ΔɻʢҎ߱ɺ&4-JOUΛྫʹઆ໌͢Δɻʣ 1SFUUJFSͷه๏ϧʔϧΛ&4-JOUͷϧʔϧͱͯ͠ఆٛ͢Δɻ 1SFUUJFSͰܗͨ͠ίʔυΛAFTMJOUpYAʹύΠϓͰܨ͍Ͱ͢ɻ طʹ&4-JOU͕։ൃςϯϓϨʔτʹΈࠐ·Ε͍ͯΔ߹ɺΛਪ͢Δɻ
)5.-ܗͷΧελϚΠζੑ ݱঢ়ɺΦϓγϣϯ͕গͳ͘ΧελϚΠζʹ͚ܽΔɻಛʹ1SJOU8JEUIͱ)5.-8IJUFTQBDF 4FOTJUJWJUZɺબͷ༨͋Γɻ1SJOU8JEUIɺҰߦͷ࠷େจࣈΛ੍ޚ͢ΔΦϓγϣϯͰ ͋Δɻ1SFUUJFSɺจࣈҎ্ΛՄಡੑͷ͋Δίʔυͱͯ͠ਪ͢Δɻ)5.-8IJUFTQBDF 4FOTJUJWJUZɺΠϯϥΠϯͷෆཁͳۭനΛղܾ͢ΔͨΊͷΦϓγϣϯͰ͋ΔɻͲͪΒͷΦϓγϣ ϯܗޙʹվߦ͕ൃੜ͢ΔͩΖ͏ɻ <link rel="stylesheet" href="https://fonts.googleapis.com/earlyaccess/notosansjp.css" />
<span class="dolorum atque aspernatur" >Est molestiae sunt facilis qui rem.</span > Print Width ʹΑΔܗ HTML Whitespace Sensitivity ʹΑΔܗ
HVMQ1SFUUJFSΛ༻ͨ͠ ςϯϓϨʔτΛ(JU)VCʹͯެ։த https://github.com/toshifumiimanishi/website-boilerplate
·ͱΊ wঃʑʹK2VFSZ͠Α͏ w/VOKVDLTΛ͓͏ wHVMQʹҠߦ͠Α͏ w$44(SJE-BZPVUΛ͓͏ w1SFUUJFSΛ͓͏
͝੩ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠