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
Sponsored
·
Ship Features Fearlessly
Turn features on and off without deploys. Used by thousands of Ruby developers.
→
IMANISHI TOSHIFUMI
December 19, 2018
Technology
0
280
ゆく技術_くる技術.pdf
IMANISHI TOSHIFUMI
December 19, 2018
Tweet
Share
More Decks by IMANISHI TOSHIFUMI
See All by IMANISHI TOSHIFUMI
Vue 3 超入門 ー ゆく Vue くる Vue
toshifumiimanishi
0
190
Form_design_from_Netflix.pdf
toshifumiimanishi
0
150
New_Sass_Module_System.pdf
toshifumiimanishi
2
890
JAMstack_kotohajime.pdf
toshifumiimanishi
0
110
mercurial_nyuumon.pdf
toshifumiimanishi
0
83
Web制作者のためのSassの参考書.pdf
toshifumiimanishi
3
2.8k
裏CSS.pdf
toshifumiimanishi
0
130
Other Decks in Technology
See All in Technology
AIエージェントに必要なのはデータではなく文脈だった/ai-agent-context-graph-mybest
jonnojun
1
250
【Ubie】AIを活用した広告アセット「爆速」生成事例 | AI_Ops_Community_Vol.2
yoshiki_0316
1
120
旅先で iPad + Neovim で iOS 開発・執筆した話
zozotech
PRO
0
100
Ruby版 JSXのRuxが気になる
sansantech
PRO
0
170
20260208_第66回 コンピュータビジョン勉強会
keiichiito1978
0
200
データの整合性を保ちたいだけなんだ
shoheimitani
8
3.2k
Greatest Disaster Hits in Web Performance
guaca
0
300
Embedded SREの終わりを設計する 「なんとなく」から計画的な自立支援へ
sansantech
PRO
3
2.6k
SREが向き合う大規模リアーキテクチャ 〜信頼性とアジリティの両立〜
zepprix
0
480
SRE Enabling戦記 - 急成長する組織にSREを浸透させる戦いの歴史
markie1009
0
170
Claude_CodeでSEOを最適化する_AI_Ops_Community_Vol.2__マーケティングx_AIはここまで進化した.pdf
riku_423
2
610
OCI Database Management サービス詳細
oracle4engineer
PRO
1
7.4k
Featured
See All Featured
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
141
34k
エンジニアに許された特別な時間の終わり
watany
106
230k
Why Our Code Smells
bkeepers
PRO
340
58k
Jamie Indigo - Trashchat’s Guide to Black Boxes: Technical SEO Tactics for LLMs
techseoconnect
PRO
0
66
Leveraging Curiosity to Care for An Aging Population
cassininazir
1
170
Building Experiences: Design Systems, User Experience, and Full Site Editing
marktimemedia
0
410
B2B Lead Gen: Tactics, Traps & Triumph
marketingsoph
0
57
Statistics for Hackers
jakevdp
799
230k
Hiding What from Whom? A Critical Review of the History of Programming languages for Music
tomoyanonymous
2
430
How to Ace a Technical Interview
jacobian
281
24k
Documentation Writing (for coders)
carmenintech
77
5.3k
The B2B funnel & how to create a winning content strategy
katarinadahlin
PRO
1
280
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Λ͓͏
͝੩ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠