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
IIWレポートからみるID業界で話題のMCP
fujie
0
780
Model Mondays S2E02: Model Context Protocol
nitya
0
220
Github Copilot エージェントモードで試してみた
ochtum
0
100
TechLION vol.41~MySQLユーザ会のほうから来ました / techlion41_mysql
sakaik
0
180
CI/CD/IaC 久々に0から環境を作ったらこうなりました
kaz29
1
160
「Chatwork」の認証基盤の移行とログ活用によるプロダクト改善
kubell_hr
1
140
低レイヤを知りたいPHPerのためのCコンパイラ作成入門 完全版 / Building a C Compiler for PHPers Who Want to Dive into Low-Level Programming - Expanded
tomzoh
4
3.1k
より良いプロダクトの開発を目指して - 情報を中心としたプロダクト開発 #phpcon #phpcon2025
bengo4com
1
3.1k
Navigation3でViewModelにデータを渡す方法
mikanichinose
0
220
Node-REDのFunctionノードでMCPサーバーの実装を試してみた / Node-RED × MCP 勉強会 vol.1
you
PRO
0
110
監視のこれまでとこれから/sakura monitoring seminar 2025
fujiwara3
11
3.9k
Understanding_Thread_Tuning_for_Inference_Servers_of_Deep_Models.pdf
lycorptech_jp
PRO
0
110
Featured
See All Featured
4 Signs Your Business is Dying
shpigford
184
22k
It's Worth the Effort
3n
185
28k
Docker and Python
trallard
44
3.4k
VelocityConf: Rendering Performance Case Studies
addyosmani
330
24k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
790
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
3k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
233
17k
Designing for humans not robots
tammielis
253
25k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Rails Girls Zürich Keynote
gr2m
94
14k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
2.8k
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Λ͓͏
͝੩ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠