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
ゴールデンウィーク+αでWebサイト作ってリリースした話
Search
Atsusuke
May 28, 2020
Programming
0
5.8k
ゴールデンウィーク+αでWebサイト作ってリリースした話
先日リリースした「Flexbox Cheat Site」という CSS Flexbox チートシートを表示するWebサイトの制作過程について社内LTで登壇してきました。
Atsusuke
May 28, 2020
Tweet
Share
More Decks by Atsusuke
See All by Atsusuke
ゾンビスクラム先生が語る過ちと教訓!俺みたいになるな!
kuroppe1819
3
260
ゆるい個人開発のススメ
kuroppe1819
11
1.3k
実践!Micro Frontends!~ kintone の共通ヘッダーは独立したデプロイの夢を見るか? ~
kuroppe1819
3
1.3k
チームの成長を促すためにふりかえりの改善に本気で向き合った話
kuroppe1819
2
2.7k
Remix + Cloudflare Pages + Cloudflare D1 で ポケモン SV のレンタルチームを検索できるアプリを作ってみた
kuroppe1819
5
3.4k
一人ひとりがオーナーシップを持って開発できるチームを目指して
kuroppe1819
5
35k
kintoneのフロントエンド刷新に向けた取り組み
kuroppe1819
3
790
エンジニア目線で見たkintone開発の魅力
kuroppe1819
1
2.1k
ゼロから始めるモブプログラミング研修
kuroppe1819
1
5.8k
Other Decks in Programming
See All in Programming
Modern Angular: Renovation for Your Applications
manfredsteyer
PRO
0
210
『ドメイン駆動設計をはじめよう』のモデリングアプローチ
masuda220
PRO
8
440
Honoの来た道とこれから
yusukebe
19
3k
hotwire_or_react
harunatsujita
8
4.1k
ECS Service Connectのこれまでのアップデートと今後のRoadmapを見てみる
tkikuc
2
210
CPython 인터프리터 구조 파헤치기 - PyCon Korea 24
kennethanceyer
0
240
AWS IaCの注目アップデート 2024年10月版
konokenj
3
3.1k
GitHub Actionsのキャッシュと手を挙げることの大切さとそれに必要なこと
satoshi256kbyte
5
390
Sidekiqで実現する 長時間非同期処理の中断と再開 / Pausing and Resuming Long-Running Asynchronous Jobs with Sidekiq
hypermkt
6
2.7k
Dev ContainersとGitHub Codespacesの素敵な関係
ymd65536
1
130
のびしろを広げる巻き込まれ力:偶然を活かすキャリアの作り方/oso2024
takahashiikki
1
410
Webの技術スタックで マルチプラットフォームアプリ開発を可能にするElixirDesktopの紹介
thehaigo
2
910
Featured
See All Featured
Scaling GitHub
holman
458
140k
Code Review Best Practice
trishagee
64
17k
Keith and Marios Guide to Fast Websites
keithpitt
408
22k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.2k
For a Future-Friendly Web
brad_frost
175
9.4k
Designing Experiences People Love
moore
138
23k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
107
49k
Testing 201, or: Great Expectations
jmmastey
38
7k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
191
16k
The Power of CSS Pseudo Elements
geoffreycrofte
72
5.3k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
250
21k
A better future with KSS
kneath
238
17k
Transcript
ΰʔϧσϯΟʔΫ + α Ͱ WebαΠτ࡞ͬͯϦϦʔεͨ͠ 5݄ͷΧδϡΞϧTechεγ!
࡞ͬͨͷ
CSS Flexbox ͷϨΠΞτΛҰཡͰ͖ΔຊޠαΠτ • Flexbox ͷαϯϓϧදࣔ • ίʔυεχϖοτ • MDNͷϦϯΫ
ػೳ https://kuroppe1819.github.io/flexbox-cheat-site/
ࠓΞΠσΞग़͔͠ΒϦϦʔε·Ͱͷؒʹ ͖ͬͯͨ͜ͱͷΛ͠Α͏ͱࢥ͍·͢ɻ
։ൃʹࢸͬͨܦҢ
։ൃʹࢸͬͨܦҢᶃ • ͕ࣗͲΕͨ͠ Flexbox ͷϓϩύςΟ໊ΛGoogleݕࡧͰௐΔ͜ ͱ͕͍͠ͱࠒ͔Βײ͍ͯͨ͡ɻ • Flexbox ϓϩύςΟͱϨΠΞτΛҰཡͰදࣔͯ͘͠ΕΔαΠτ͕ ཉ͍͠ʂͱࢥͬͨɻ
։ൃʹࢸͬͨܦҢᶄ Flexbox ϨΠΞτΛҰཡදࣔͯ͘͠ΕΔαΠτʁ͋ΔΑɻ ΊͬͪΌศརΜʂ ͜ΕͰॆʂ http://flexbox.malven.co/ …ͷͣͩͬͨɻ
։ൃʹࢸͬͨܦҢᶅ طଘͷαΠτΛར༻͍ͯͯ͠ײͨ͜͡ͱ • ϓϩύςΟ໊ΛௐͨޙɺৄࡉΛݟΔͨΊʹ࠶ݕࡧ͢Δ͜ͱ͕ଟ͔ͬͨ ͷͰMDNͷϦϯΫ͕·ͱ·͍ͬͯΔͱخ͍͠ɻ • Webʹೖ͔ͨ͠ΓͷΤϯδχΞ/σβΠφʔ͕͜ͷαΠτ͏͔ͳʁ ΞΫηεͰ͖Δ͔ͳʁӳޠಡΉ͔ͳʁ • ຊޠͰݕࡧ͔͚ΔͱղઆهࣄͷαΠτ͔Γ্͕Ґʹදࣔ͞ΕΔɻ
ϓϩύςΟΛௐΔ͚ͩͰ͔ͳΓͷ࣌ؒΛফ͍ͯ͠Δͱࢥ͏ (ਪଌ)ɻ
։ൃʹࢸͬͨܦҢᶆ ຊޠදࣔͰ Flexbox ϨΠΞτΛҰཡͰݟΒΕΔαΠτɺ ҙ֎ͱधཁ͕͋ΔͷͰʁ" Α͠ɺ࡞Ζ͏ɻ
Ͳ͏͍͏ྲྀΕͰ։ൃ͔ͨ͠
UX(Ϣʔβʔମݧ)Λߟ͑Δ ஔͷΠϝʔδ૾Λ͍࣋ͬͯΔϢʔβʔ ͕ Πϝʔδ૾ʹ͍ۙ Flexbox ϨΠΞτΛݟ͚ͭͯɺ ϓϩύςΟͷৄࡉใʹരͰΞΫηεͰ͖Δ αΠτΛ࡞Δʂ
࣮͢ΔػೳͷΞΠσΞΛग़͢ • Flexbox ϨΠΞτͷҰཡදࣔ • ద༻͞Ε͍ͯΔελΠϧͷ֬ೝ • ελΠϧΛΫϦοϓϘʔυʹίϐʔ • ελΠϧͷฤू
• ֤ϨΠΞτͷ෯ௐ • Flexbox ϓϩύςΟͷղઆ • Grid ϨΠΞτͷରԠ
⭕ Flexbox ϨΠΞτͷҰཡදࣔ ⭕ ద༻͞Ε͍ͯΔελΠϧͷ֬ೝ ⭕ ελΠϧΛΫϦοϓϘʔυʹίϐʔ ࣮͢ΔػೳΛݫબ͢Δᶃ $ ελΠϧͷฤू
$ ֤ϨΠΞτͷ෯ௐ $ Flexbox ϓϩύςΟͷઆ໌ $ Grid ϨΠΞτͷରԠ
࣮͢ΔػೳΛݫબ͢Δᶄ $ ελΠϧͷฤू $ ֤ϨΠΞτͷ෯ௐ $ Flexbox ϓϩύςΟͷઆ໌ $ Grid
ϨΠΞτͷରԠ • ಈతͳมߋCodePenͷΑ͏ͳαΠτʹͤΔɻ • ΫϦοϓϘʔυػೳ͕͋Είϐϖָɻ • טΈࡅ͍ͨઆ໌ଞͷαΠτʹͤΔɻ • ৄࡉMDNͷϦϯΫ͕͋Δ͔Β͍Βͳ͍ɻ • Grid αΠτδΣωϨʔλΛ͍ͦ͏ɻ • χʔζ͕͔Βͳ͍ͷͰϦϦʔε͔ͯ͠Βߟ͑Δɻ
σβΠϯϓϩτΛ࡞Δ ʮUXPinʯͰϓϩτλΠϓΛ࡞͢Δ Mobile Preview ※ࠓճϞόΠϧ൛͚ͩ࡞
ٕज़બఆ ձࣾͰ͍ͬͯΔ or ࠓޙձࣾͰ͍ͦ͏ͳٕज़ΛબͿɻ
࣮ • ୯७ͳΞϓϦέʔγϣϯͳͷͰ Custom Hooks Ͱঢ়ଶཧ͢Δ • Container ʹϩδοΫΛॻ͍ͯ Context
ͰΛ͢ 5PQ$POUBJOFS #FIBWJPS'MFYCPY$POUBJOFS BehaviorBoxContainer Context
TypeScript + styled-components + Tailwind CSS ϝϦοτ • ίϯϙʔωϯτͱCSSͷΫϥε໊Λ͠ͳ͕Β Tailwind
CSS ͷϢʔςΟϦςΟΫϥεΛ͑Δɻ • ߦ͕ݮͬͯݟ௨͕͠ྑ͘ͳΔɻ σϝϦοτ • ts-loader ͰτϥϯεύΠϧʹࣦഊ͢Δɻ babel-loader Ͱ TS ͷτϥϯεύΠϧΛͯ͠ɺ ܕνΣοΫ tsc ͰΔ͜ͱʹͨ͠ɻ • Default ͷϢʔςΟϦςΟΫϥεΛ͍͍ͪͪݕࡧ͢Δͷ͕ ΊΜͲ͍͘͞ɻTailwind CSS ͷΛΦϒδΣΫτͱͯ͠ ఆٛͯ͠ࢀর͢Δӡ༻Ͱྑ͍ͱࢥͬͨɻ
σβΠϯௐ ʙϨΠΞτදࣔʙ ̍ը໘ͷதͰͰ͖Δ͚ͩଟ͘ͷϨΠΞτΛදࣔ͢Δͧ %
&
σβΠϯௐ ʙϨΠΞτදࣔʙ • 1ຕͷը໘ʹͰ͖Δ͚ͩදࣔ͠Α͏ͱͨ͠ΒɺతͷϨΠΞτΛ ୳͢ͷ͕ࠔʹͳͬͨ' • ͪΒ͔ͬͨ෦ͷத͔ΒಛఆͷϞϊΛ୳͢ײ֮ʹࣅ͍ͯΔɻ
σβΠϯௐ ʙϨΠΞτදࣔʙ • ݕࡧੑΛߴΊΔͨΊʹ ֤ϓϩύςΟʹ؆୯ͳઆ໌Λఴ͑Δɻ • ԣฒͼͷΛMAX4ྻʹͯ͠ɺ ҰʹೝࣝͰ͖ΔΛݮΒ͢ɻ MAX 4ྻ
(
σβΠϯௐ ʙCSS/HTMLίʔυͷදࣔʙ • ׳Ε͍ͯΔਓCSSͷϓϩύςΟΛ ݟ͚ͨͩͰHTMLͷߏΛΠϝʔδ Ͱ͖ΔͷͰɺඞཁͳਓ͚ͩλϒΛ Γସ͑ͯදࣔ͢ΔσβΠϯʹ͢Δɻ
σβΠϯௐ ʙϞόΠϧදࣔʙ Կͳ͍ͱ͜Ζ͔ΒView͕ग़ͯ͘Δͱ ڻ͍ͯ͠·͏ͷͰɺView͕ӅΕ͍ͯΔ ͜ͱΛ͞Γ͛ͳ͘Ξϐʔϧ͢Δɻ
σβΠϯௐ ʙϞόΠϧදࣔʙ εΫϩʔϧݻఆʹͯ͠ɺ ϨΠΞτͱҰॹʹઆ໌ͱ ίʔυΛݟΒΕΔΑ͏ʹ͢Δɻ
σϓϩΠ࡞ۀ 1. gh-pages ίϚϯυΛͬͯ dist/ ͷϑΝΠϧΛ gh-pages ϒϥϯνʹ ϓογϡ͢Δɻ 2.
GitHubͷઃఆ Ͱ GitHub Pages site Λߏங͢ΔϒϥϯνΛࢦఆ͢Δɻ HIQBHFTEEJTU
ϦϦʔε ))) ͯͳϒοΫϚʔΫͷ ϗοτΤϯτϦʹࡌͬͨʂʂʂ https://b.hatena.ne.jp/hotentry/it/20200525
ͨ͠ײ • SEOʹڵຯ͕ग़͖ͯͨɻ • σβΠϯௐͰΜͩ࣌ʹ૬ஊͰ͖ΔϑΥϩϫʔ͞Μ͕ෳਓ͍͓ͨ ͔͛ͰࠓͷσβΠϯΛ࣮ݱ͢Δ͜ͱ͕Ͱ͖ͨɻఆظతʹϑΟʔυόο ΫΛΒ͏͜ͱͷॏཁੑΛվΊ࣮ͯײͨ͠ɻ • ҰͰҰੜͷ”ศར”ͱ”͋Γ͕ͱ͏”ͱ͍͏ݴ༿Λ͚ͨͷͰຊʹ خ͍͠ؾ࣋ͪʹͳͬͨɻ·ͩ·ͩվྑͰ͖Δ෦͋ΔͷͰ࣌ؒΛݟ
͚ͭͯػೳ࣮ or վળ͍ͯ͜͠͏ͱࢥ͍·͢ɻ
͜Ε͔Βͷ༧ఆ • PWAରԠ͢Δ • AMPରԠ͢Δ • ςετΛॻ͘ • storybook Λ͏
• धཁ͕͋Ε Grid ͷϖʔδ࡞Δ
͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ ϦϙδτϦʹελʔ͚ͯ͘ΕΔͱ։ൃऀ͕ٽ͍ͯتͼ·͢' https://github.com/kuroppe1819/flexbox-cheat-site