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

ゆく技術_くる技術.pdf

Sponsored · SiteGround - Reliable hosting with speed, security, and support you can count on. →
Avatar for IMANISHI TOSHIFUMI IMANISHI TOSHIFUMI
December 19, 2018
Technology
0
290

 ゆく技術_くる技術.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
190
Form_design_from_Netflix.pdf
Avatar for IMANISHI TOSHIFUMI toshifumiimanishi
0
160
New_Sass_Module_System.pdf
Avatar for IMANISHI TOSHIFUMI toshifumiimanishi
2
890
JAMstack_kotohajime.pdf
Avatar for IMANISHI TOSHIFUMI toshifumiimanishi
0
120
mercurial_nyuumon.pdf
Avatar for IMANISHI TOSHIFUMI toshifumiimanishi
0
88
Web制作者のためのSassの参考書.pdf
Avatar for IMANISHI TOSHIFUMI toshifumiimanishi
3
2.9k
裏CSS.pdf
Avatar for IMANISHI TOSHIFUMI toshifumiimanishi
0
130

Other Decks in Technology

See All in Technology
QA組織のAI戦略とAIテスト設計システムAITASの実践
Avatar for SansanTech sansantech
PRO
1
220
パワポ作るマンをMCP Apps化してみた
Avatar for iwamot iwamot
PRO
0
200
Microsoft Fabricで考える非構造データのAI活用
Avatar for Ryoma Nagata ryomaru0825
0
330
VSCode中心だった自分がターミナル沼に入門した話
Avatar for Genki Sano sanogemaru
0
820
OpenClawでPM業務を自動化
Avatar for 西岡 賢一郎 (Kenichiro Nishioka) knishioka
1
310
サイボウズ 開発本部採用ピッチ / Cybozu Engineer Recruit
Avatar for Cybozu cybozuinsideout
PRO
10
76k
GitHub Copilot CLI で Azure Portal to Bicep
Avatar for Yuta Matsumura tsubakimoto_s
0
280
CREがSLOを握ると 何が変わるのか
Avatar for neko maho nekomaho
0
170
フルカイテン株式会社 エンジニア向け採用資料
Avatar for FULL KAITEN fullkaiten
0
11k
タスク管理も1on1も、もう「管理」じゃない - KiroとBedrock AgentCoreで変わった“判断の仕事”
Avatar for Yusuke Shimizu yusukeshimizu
0
140
MIX AUDIO EN BROADCAST
Avatar for Erick Ralph Kionga ralpherick
0
120
Sansanの認証基盤を支えるアーキテクチャとその振り返り
Avatar for SansanTech sansantech
PRO
1
110

Featured

See All Featured
Design and Strategy: How to Deal with People Who Don’t "Get" Design
Avatar for Morgane Peng morganepeng
133
19k
Navigating the Design Leadership Dip - Product Design Week Design Leaders+ Conference 2024
Avatar for Andy Polaine apolaine
0
250
職位にかかわらず全員がリーダーシップを発揮するチーム作り / Building a team where everyone can demonstrate leadership regardless of position
Avatar for MADOX madoxten
62
53k
The B2B funnel & how to create a winning content strategy
Avatar for Katarina Dahlin katarinadahlin
PRO
1
310
Leveraging LLMs for student feedback in introductory data science courses - posit::conf(2025)
Avatar for Mine Cetinkaya-Rundel minecr
1
210
Designing Powerful Visuals for Engaging Learning
Avatar for Mike Taylor tmiket
0
300
We Have a Design System, Now What?
Avatar for Morgane Peng morganepeng
55
8k
Code Reviewing Like a Champion
Avatar for maltzj maltzj
528
40k
WCS-LA-2024
Avatar for Leonardo Collado-Torres lcolladotor
0
500
My Coaching Mixtape
Avatar for mlcsv mlcsv
0
86
Paper Plane
Avatar for Katie Cordina Lindsey katiecoart
PRO
0
48k
Faster Mobile Websites
Avatar for Dean Hume deanohume
310
31k

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