Upgrade to Pro — share decks privately, control downloads, hide ads and more …

ゆく技術_くる技術.pdf

Avatar for IMANISHI TOSHIFUMI IMANISHI TOSHIFUMI
December 19, 2018
Technology
0
260

 ゆく技術_くる技術.pdf

Avatar for IMANISHI TOSHIFUMI

IMANISHI TOSHIFUMI

December 19, 2018
Tweet

More Decks by IMANISHI TOSHIFUMI

See All by IMANISHI TOSHIFUMI
Vue 3 超入門 ー ゆく Vue くる Vue
Avatar for IMANISHI TOSHIFUMI toshifumiimanishi
0
170
Form_design_from_Netflix.pdf
Avatar for IMANISHI TOSHIFUMI toshifumiimanishi
0
130
New_Sass_Module_System.pdf
Avatar for IMANISHI TOSHIFUMI toshifumiimanishi
2
850
JAMstack_kotohajime.pdf
Avatar for IMANISHI TOSHIFUMI toshifumiimanishi
0
87
mercurial_nyuumon.pdf
Avatar for IMANISHI TOSHIFUMI toshifumiimanishi
0
66
Web制作者のためのSassの参考書.pdf
Avatar for IMANISHI TOSHIFUMI toshifumiimanishi
3
2.8k
裏CSS.pdf
Avatar for IMANISHI TOSHIFUMI toshifumiimanishi
0
110

Other Decks in Technology

See All in Technology
M3 Expressiveの思想に迫る
Avatar for のっちー chnotchy
0
110
生成AI時代の開発組織・技術・プロセス 〜 ログラスの挑戦と考察 〜
Avatar for Hiroshi Ito itohiro73
1
270
“社内”だけで完結していた私が、AWS Community Builder になるまで
Avatar for nagisa_53 nagisa53
1
400
「Chatwork」の認証基盤の移行とログ活用によるプロダクト改善
Avatar for kubell kubell_hr
1
200
生成AI時代 文字コードを学ぶ意義を見出せるか？
Avatar for hiroshi ueda hrsued
1
580
BrainPadプログラミングコンテスト記念LT会2025_社内イベント&問題解説
Avatar for BrainPad brainpadpr
1
170
25分で解説する「最小権限の原則」を実現するための AWS「ポリシー」大全 / 20250625-aws-summit-aws-policy
Avatar for opelab opelab
9
1.2k
低レイヤを知りたいPHPerのためのCコンパイラ作成入門 完全版 / Building a C Compiler for PHPers Who Want to Dive into Low-Level Programming - Expanded
Avatar for HASEGAWA Tomoki tomzoh
4
3.3k
【５分でわかる】セーフィー エンジニア向け会社紹介
Avatar for Safie safie_recruit
0
26k
Абьюзим random_bytes(). Фёдор Кулаков, разработчик Lamoda Tech
Avatar for Lamoda Tech lamodatech
0
350
PHP開発者のためのSOLID原則再入門 #phpcon / PHP Conference Japan 2025
Avatar for shogogg shogogg
4
850
rubygem開発で鍛える設計力
Avatar for Tomohiro Hashidate joker1007
2
220

Featured

See All Featured
The Cost Of JavaScript in 2023
Avatar for Addy Osmani addyosmani
51
8.5k
Building Applications with DynamoDB
Avatar for Matt Wood mza
95
6.5k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
Avatar for mongodb mongodb
46
9.6k
The Language of Interfaces
Avatar for Des Traynor destraynor
158
25k
Being A Developer After 40
Avatar for Adrian Kosmaczewski akosma
90
590k
Keith and Marios Guide to Fast Websites
Avatar for Keith Pitt keithpitt
411
22k
Understanding Cognitive Biases in Performance Measurement
Avatar for Philip Tellis bluesmoon
29
1.8k
Making the Leap to Tech Lead
Avatar for Ryan Cromwell cromwellryan
134
9.3k
Sharpening the Axe: The Primacy of Toolmaking
Avatar for Bryan Cantrill bcantrill
44
2.4k
How to Ace a Technical Interview
Avatar for Jacob Kaplan-Moss jacobian
277
23k
How To Stay Up To Date on Web Technology
Avatar for Chris Coyier chriscoyier
790
250k
Code Reviewing Like a Champion
Avatar for maltzj maltzj
524
40k

Transcript

  1. Ώٕ͘ज़ɺ͘Δٕज़ Dec 19, 2018 / Toshifumi Imanishi

  2. ͳ͔ͳ͔୤ͤͳ͍K2VFSZ :PV%PO`U/FFEK2VFSZɺ୤K2VFSZ͕ۙ೥࿩୊ʹͳΔɻK2VFSZ͸ɺϒϥ΢βؒͷࠩҟΛ ٵऩ͢ΔɺωΠςΟϒ+BWB4DSJQUΑΓ؆୯ɾָνϯͱ͍͏ཧ༝Ͱଟ͘ͷ։ൃऀ͔Β਌͠ ·Ε͍ͯΔɻ ʲ୤K2VFSZͷओͳཧ༝ʳ w ϒϥ΢βͷਐԽɺ+4ͷ৽ػೳͷ௥Ճ w ػೳཁ݅Λຬͨ͢ͷʹྗྔෆ଍ ͔͠͠ɺK2VFSZΛࣺͯΔ͜ͱ͸Ͱ͖ͳ͍ɻ୹ظϓϩδΣΫτʹ͓͍ͯɺωΠςΟϒ

    +BWB4DSJQU΍7VFKTΑΓ࢖͍׳ΕͨK2VFSZͰ։ൃ͢Δ҆৺ײɻطଘίʔυΛK2VFSZ Ҏ֎Ͱॻ͖׵͑ΔֶशBOE࣌ؒతίετɻ

  3. 7VFKTͷબ୒ࢶ ͍͘ΒK2VFSZ͕༏लͰ΋ۜͷ஄ؙͰ͸ͳ͍ɻͨͱ͑͹ɺ͓໰͍߹ΘͤϑΥʔϜͷ6*Λ࣮૷͢ Δ৔߹ɺΠϕϯτͱ%0.ཁૉΛ௚઀ඥ͚ͮΔΑΓɺঢ়ଶʢTUBUFʣΛڬΜͩ΄͏͕εέʔϥϏ ϦςΟͰ͋Δɻ7VFKTͷϦΞΫςΟϏγεςϜ͸ɺΦϒβʔόʔύλʔϯΛϕʔεʹ࣮૷͞Ε ͍ͯΔͨΊɺʮঢ়ଶͷ؂ࢹʯɺʮมߋݕ஌ʯ΍ʮ%0.ͷࣗಈ൓өʯΛ։ൃऀ͕ҙࣝ͢Δ͜ͱͳ ͘ॲཧ͞ΕΔɻ event event event element

    element element element element element ঢ়ଶ event event event

  4. ঃʑʹ୤K2VFSZͷಓΛ୧Ζ͏ɻઌड़ͨ͠7VFKTΛ࢖༻͢Δ৔߹ɺK2VFSZΑΓωΠςΟϒ +BWB4DSJQUΛར༻࣮ͨ͠૷͕ଟ͘ͳΔͩΖ͏ɻK2VFSZͷϝιουΛωΠςΟϒ+BWB4DSJQUʹ ॻ͖׵͑Δʹ͸ɺͲ͏͢Ε͹Α͍͔ʁ ͦΜͳͱ͖͸ɺ:PV8PO`U/FFEK2VFSZ͕͓͢͢Ίʂ :PV8PO`U/FFEK2VFSZ $('.element').offset(); ? (JU)VCͰެ։தɿIUUQTHJUIVCDPNUPTIJGVNJJNBOJTIJ:PV8POU/FFEK2VFSZ

  5. 9"ͷςϯϓϨʔτΤϯδϯ͸ɺ&+4͕σϑΝΫτελϯμʔυͰ͋Δɻ&+4͸ɺ)5.-ϕʔε ͷߏจΏ͑Մಡੑ͕͋Γɺֶशίετ΋গͳ͘ಋೖෑډͷ௿͍ݴޠͰ͋Δɻ ͔͠͠ɺ&+4Ͱ͸ύϫʔෆ଍Λײ͡Δ͜ͱ͸͋Γ·ͤΜ͔ʁͨͱ͑͹ɺ&+4ʹςϯϓϨʔτܧঝ ͕ඪ४ͰඋΘͬͯ·ͤΜɻ͔ͱ͍ͬͯɺ1VH͸ΠϯσϯτߏจͷͨΊՄಡੑ͕ѱ͍ʢͳΜ͔ؾ࣋ ͪѱ͍ʣɻͰ͸ɺͲ͏͢Δ͔ʜ ৽ͨͳςϯϓϨʔτΤϯδϯͷՄೳੑ ❤ ❤

  6. /VOKVDLTͱ͸ɺ.P[JMMBۘ੡ͷςϯϓϨʔτΤϯδϯͰ͋Δɻ/VOKVDLT͸ɺ)5.-ϕʔε ͷߏจͰςϯϓϨʔτܧঝ͕ඪ४౥ࡌ͞Ε͍ͯΔڧྗͳݴޠͰ͋Δɻ ςϯϓϨʔτܧঝΛར༻͢Δ͜ͱͰɺςϯϓϨʔτͷ࠶ར༻Λ༰қʹ͢Δɻ͜Ε͸ɺ&+4Ͱ๊͑ Δ໰୊ʢ෼ׂ౷࣏ͷ໰୊ʣΛղܾ͢ΔͩΖ͏ɻ/VOKVDLTͷ༗༻ੑ͸ɺ2JJUBͷΞυϕϯτΧ ϨϯμʔͰެ։༧ఆɻ·ͨɺ෼ׂ౷࣏ͷ໰୊͸ྠಡձͷײ૝จʹެ։தɻ /VOKVDLTͷ͢͢Ί ❤

  7. HVMQͷਖ਼ࣜϦϦʔε

  8. HVMQͰԿ͕มΘͬͨͷʁ w+BWB4DSJQUؔ਺ͰλεΫΛFYQPSU wSVOTFRVFODF΍HVMQTPVSDFNBQTͷඪ४౥ࡌ wXBUDIػೳͷڧԽ wMBTU3VO ʹΑΔ࣮ߦ࣌ؒͷ୹ॖ ͍Ζ͍Ζศརʹͳͬͨ

  9. (SJEͷࣗಈ഑ஔΛ*&༻ʹαϙʔτ

  10. ΨϯΨϯ(SJE-BZPVUͰ͍͜͏ʂ *&Ͱࣗಈ഑ஔΛߦ͏৔߹ɺBVUPQSFpYFSͷΦϓγϣϯͰbBVUPQMBDF`ࢦఆ͢ΔPSίʔυ ্ʹ BVUPQSFpYFSHSJEBVUPQMBDF ͱ͍͏ίϝϯτΛهड़͢ΔɻHSJEUFNQMBUF BSFBͱࣗಈ഑ஔ͕*&Ͱ࢖༻Ͱ͖ΔΑ͏ʹͳͬͨࠓɺ$44(SJE-BZPVUΛ࢖Θͳ͍ཧ ༝͕ͳ͍ʂͪͳΈʹ4BGBSJʢݱࡏͷ࠷৽όʔδϣϯ͸ʣͰ͸ɺHBQϓϩύ ςΟ͕ޮ͔ͳ͍ͨΊɺHSJEHBQʢچϓϩύςΟʣͷ྆ํΛهड़͢Δඞཁ͕͋Δɻ˞ͨͩ͠ɺ "VUPQSFpYFSͰิ׬͞Εͳ͍৔߹ʹݶΔɻ

  11. 1SFUUJFSͷ)5.-αϙʔτ

  12. 1SFUUJFSͯԿʁ 1SFUUJFSͱ͸ɺ੔ܗπʔϧͰ͋ΔɻΑ͘-JOUπʔϧͱൺֱ͞ΕΔ͕ɺ-JOU͸ίʔσΟϯά ϧʔϧͷ੔߹ੑΛνΣοΫɺ1SFUUJFS͸Մಡੑͷ޲্Λ໨తͱͨ͠ίʔυ੔ܗΛͦΕͧΕ ୲͍ͬͯΔɻͳͷͰɺ1SFUUJFSͱ-JOUΛ߹Θͤͯ࢖༻͢Δέʔε͕ଟ͍ɻ߹Θͤͯ࢖͏ύλʔ ϯʹ͸ɺͭͷύλʔϯ͕͋ΔɻʢҎ߱ɺ&4-JOUΛྫʹઆ໌͢Δɻʣ 1SFUUJFSͷه๏ϧʔϧΛ&4-JOUͷϧʔϧͱͯ͠ఆٛ͢Δɻ 1SFUUJFSͰ੔ܗͨ͠ίʔυΛAFTMJOUpYAʹύΠϓͰܨ͍Ͱ౉͢ɻ طʹ&4-JOU͕։ൃςϯϓϨʔτʹ૊Έࠐ·Ε͍ͯΔ৔߹ɺΛਪ঑͢Δɻ

  13. )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 ʹΑΔ੔ܗ

  14. HVMQ΍1SFUUJFSΛ࢖༻ͨ͠ ςϯϓϨʔτΛ(JU)VCʹͯެ։த https://github.com/toshifumiimanishi/website-boilerplate

  15. ·ͱΊ wঃʑʹ୤K2VFSZ͠Α͏ w/VOKVDLTΛ࢖͓͏ wHVMQʹҠߦ͠Α͏ w$44(SJE-BZPVUΛ࢖͓͏ w1SFUUJFSΛ࢖͓͏

  16. ͝੩ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠