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
230
ゆく技術_くる技術.pdf
IMANISHI TOSHIFUMI
December 19, 2018
Tweet
Share
More Decks by IMANISHI TOSHIFUMI
See All by IMANISHI TOSHIFUMI
Vue 3 超入門 ー ゆく Vue くる Vue
toshifumiimanishi
0
140
Form_design_from_Netflix.pdf
toshifumiimanishi
0
92
New_Sass_Module_System.pdf
toshifumiimanishi
2
750
JAMstack_kotohajime.pdf
toshifumiimanishi
0
59
mercurial_nyuumon.pdf
toshifumiimanishi
0
45
Web制作者のためのSassの参考書.pdf
toshifumiimanishi
3
2.6k
裏CSS.pdf
toshifumiimanishi
0
73
Other Decks in Technology
See All in Technology
開発パフォーマンスを最大化するための開発体制
ham0215
2
300
オーナーシップを持つ領域を明確にする
konifar
13
3.1k
家族アルバム みてねにおけるGrafana活用術 / Grafana Meetup Japan Vol.1 LT
isaoshimizu
1
530
Delivering Millions of Messages within seconds @ Duolingo
pelelgrino
0
350
開発生産性向上サービスを作るFindyが自分たちで開発生産性を爆上げした組織づくりの歩み / Findy's path to boosting its own development productivity 2024-04-17
ma3tk
3
640
日本におけるデータエンジニアリングのこれまでとこれから
foursue
16
4.2k
Janus
bkuhlmann
1
490
Azure Container Apps + Bicep 〜 こんな感じで運用しています
kaz29
2
460
どうするコスト最適化のトレードオフ
tetsuyaooooo
1
500
KubeCon EU 2024 Recap “Kubernetes Policy Time Machine: Where to Next?”
ryysud
0
210
元インフラエンジニアに成る / Human Resources to Human Relations
bobtani
4
900
GraphQL 成熟度モデルの紹介と、プロダクトに当てはめた事例 / GraphQL maturity model
mh4gf
7
1.3k
Featured
See All Featured
Building Effective Engineering Teams - LeadDev
addyosmani
28
1.8k
Principles of Awesome APIs and How to Build Them.
keavy
121
16k
Raft: Consensus for Rubyists
vanstee
132
6.3k
How To Stay Up To Date on Web Technology
chriscoyier
782
250k
Art, The Web, and Tiny UX
lynnandtonic
289
19k
How GitHub (no longer) Works
holman
304
140k
Building Better People: How to give real-time feedback that sticks.
wjessup
355
18k
10 Git Anti Patterns You Should be Aware of
lemiorhan
648
58k
Clear Off the Table
cherdarchuk
84
310k
Teambox: Starting and Learning
jrom
128
8.4k
Bash Introduction
62gerente
604
210k
It's Worth the Effort
3n
180
27k
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Λ͓͏
͝੩ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠