Upgrade to Pro — share decks privately, control downloads, hide ads and more …
Sign up for free

ゆく技術_くる技術.pdf

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

 ゆく技術_くる技術.pdf

Avatar for IMANISHI TOSHIFUMI

IMANISHI TOSHIFUMI

December 19, 2018

More Decks by IMANISHI TOSHIFUMI

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

Other Decks in Technology

See All in Technology
Vue.jsのGitHubから学ぶ意思決定
Avatar for Yuto Nagai(Future) yut0naga1_fa
1
340
AIエージェントに​ 権限と鍵をどこまで渡すか
Avatar for NRI Netcom nrinetcom
PRO
2
160
Lint の層を組み直した話
Avatar for 弁護士ドットコム bengo4com
1
260
AIテスト自動化と評価駆動開発EDD
Avatar for コロッケそば happysamurai294
0
110
AWS Continuum for Penetration Testing に Deep Dive してみる
Avatar for 浅野晴輝 asanoharuki
2
1.5k
なぜAI時代に技術記事を書くのか？どう書くのか？ 〜bunの場合〜
Avatar for KNOWLEDGE WORK / 株式会社ナレッジワーク kworkdev
PRO
0
1.1k
なぜ東京にいる私が、新潟の技術コミュニティを運営するのか by 八雲慎之助
Avatar for やくも yakumo
0
170
今から始めるAWS環境の暗号移行 - ポスト量子時代に備える
Avatar for sato4mi sato4mi
0
130
生き様としてのSRE
Avatar for Yutaro Sugai hokkai7go
0
140
Maestro MCPとClaude Code Skillsによる自律的なE2Eテスト支援
Avatar for asmz asmz
0
390
Obsidian Vault Architectures
Avatar for Daisuke Masuda x5gtrn
PRO
0
220
自律的なチームを作るためにTechPMがやらないこと
Avatar for Naoki Yoshitake ny7760
0
310

Featured

See All Featured
How Software Deployment tools have changed in the past 20 years
Avatar for Geshan Manandhar geshan
2
35k
The Spectacular Lies of Maps
Avatar for Per Axbom axbom
PRO
1
1.1k
Site-Speed That Sticks
Avatar for Harry Roberts csswizardry
13
1.6k
Helping Users Find Their Own Way: Creating Modern Search Experiences
Avatar for Dan Newman danielanewman
31
3.4k
No one is an island. Learnings from fostering a developers community.
Avatar for Antonio thoeni
21
3.9k
Designing for Performance
Avatar for Lara Hogan lara
612
70k
Getting science done with accelerated Python computing platforms
Avatar for Jacob Tomlinson jacobtomlinson
2
560
svc-hook: hooking system calls on ARM64 by binary rewriting
Avatar for Akira Moroo retrage
2
660
Balancing Empowerment & Direction
Avatar for Lara Hogan lara
6
1.3k
Ten Tips & Tricks for a 🌱 transition
Avatar for Manu Carrasco Molina stuffmc
1
270
The Anti-SEO Checklist Checklist. Pubcon Cyber Week
Avatar for Ryan Jones ryanjones
0
290
Claude Code のすすめ
Avatar for schroneko schroneko
67
230k

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. ͝੩ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠