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
·
Your Podcast. Everywhere. Effortlessly.
Share. Educate. Inspire. Entertain. You do you. We'll handle the rest.
→
IMANISHI TOSHIFUMI
December 19, 2018
Technology
290
0
Share
ゆく技術_くる技術.pdf
IMANISHI TOSHIFUMI
December 19, 2018
More Decks by IMANISHI TOSHIFUMI
See All by IMANISHI TOSHIFUMI
Vue 3 超入門 ー ゆく Vue くる Vue
toshifumiimanishi
0
190
Form_design_from_Netflix.pdf
toshifumiimanishi
0
160
New_Sass_Module_System.pdf
toshifumiimanishi
2
900
JAMstack_kotohajime.pdf
toshifumiimanishi
0
120
mercurial_nyuumon.pdf
toshifumiimanishi
0
94
Web制作者のためのSassの参考書.pdf
toshifumiimanishi
3
2.9k
裏CSS.pdf
toshifumiimanishi
0
130
Other Decks in Technology
See All in Technology
OWASP APTSを眺めてみた
su3158
0
130
エンタープライズの厳格な制約を開発者に意識させない:クラウドネイティブ開発基盤設計/cloudnative-kaigi-golden-path
mhrtech
0
370
Oracle Exadata Database Service on Cloud@Customer X11M (ExaDB-C@C) サービス概要
oracle4engineer
PRO
2
8k
なぜ、私がCommunity Builderに?〜活動期間1か月半でも選出されたワケ〜
yama3133
0
120
変化の激しい時代をゴキゲンに生き抜くために 〜ストレスマネジメントのススメ〜
kakehashi
PRO
4
1.2k
毎日の作業を Claude Code 経由にしたら、 ノウハウがコードになった
kossykinto
1
1.2k
拝啓、あの夏の僕へ〜あなたも知っているApp Runnerの世界〜
news_it_enj
0
230
サービスの信頼性を高めるため、形骸化した「プロダクションミーティング」を立て直すまでの取り組み
stefafafan
1
260
AIが自律的に働く時代へ Amazon Quick で実現するAIエージェント紹介
koheiyoshikawa
0
190
Modernizing Your HCL Connections Experience: Visual Report to chain, Profile Enhancements, and AI Integration
wannesrams
0
300
PdM・Eng・QAで進めるAI駆動開発の現在地/aidd-with-pdm-eng-qa
shota_kusaba
0
160
AIが盛んな時代に 技術記事を書き始めて起きた私の中での小さな変化
peintangos
0
370
Featured
See All Featured
YesSQL, Process and Tooling at Scale
rocio
174
15k
[RailsConf 2023] Rails as a piece of cake
palkan
59
6.5k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
122
21k
Scaling GitHub
holman
464
140k
First, design no harm
axbom
PRO
2
1.2k
How to Think Like a Performance Engineer
csswizardry
28
2.6k
How GitHub (no longer) Works
holman
316
150k
Being A Developer After 40
akosma
91
590k
Prompt Engineering for Job Search
mfonobong
0
300
Done Done
chrislema
186
16k
What does AI have to do with Human Rights?
axbom
PRO
1
2.1k
What the history of the web can teach us about the future of AI
inesmontani
PRO
1
550
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Λ͓͏
͝੩ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠