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.6k
ゴールデンウィーク+αでWebサイト作ってリリースした話
先日リリースした「Flexbox Cheat Site」という CSS Flexbox チートシートを表示するWebサイトの制作過程について社内LTで登壇してきました。
Atsusuke
May 28, 2020
Tweet
Share
More Decks by Atsusuke
See All by Atsusuke
ゆるい個人開発のススメ
kuroppe1819
11
1.1k
実践!Micro Frontends!~ kintone の共通ヘッダーは独立したデプロイの夢を見るか? ~
kuroppe1819
3
1.1k
チームの成長を促すためにふりかえりの改善に本気で向き合った話
kuroppe1819
2
2.2k
Remix + Cloudflare Pages + Cloudflare D1 で ポケモン SV のレンタルチームを検索できるアプリを作ってみた
kuroppe1819
5
3k
一人ひとりがオーナーシップを持って開発できるチームを目指して
kuroppe1819
5
34k
kintoneのフロントエンド刷新に向けた取り組み
kuroppe1819
3
730
エンジニア目線で見たkintone開発の魅力
kuroppe1819
1
2k
ゼロから始めるモブプログラミング研修
kuroppe1819
1
5.6k
Other Decks in Programming
See All in Programming
Using "modern" Ruby to build a better, faster Homebrew
mikemcquaid
2
310
TypeScriptでもLLMアプリケーション開発 / LLM Application In Typescript
rkaga
5
1.4k
Revisiting the Hotwire Landscape after Turbo 8 @ RailsConf 2024, Detroit
marcoroth
3
620
Runtime Objects in Rust
mitsuhiko
0
220
FoodGram
iseruuuuu
0
230
GNU Makeの使い方 / How to use GNU Make
kaityo256
PRO
13
4.4k
Docker_OSS_ホスティング入門
satokoki645
0
140
It’s about time to pack Ruby and Ruby scripts in one binary
ahogappa0613
0
120
TypeScriptで使いやすいOpenAPIの書き方
yukimochi_dwango
1
1k
Improved REXML XML parsing performance using StringScanner
naitoh
0
120
RustでAWS Lambda functionをいい感じに書く
taiki45
2
160
CQRS meets modern Java
simas
PRO
2
480
Featured
See All Featured
BBQ
matthewcrist
80
8.8k
A Tale of Four Properties
chriscoyier
153
22k
Clear Off the Table
cherdarchuk
86
310k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
15
1.6k
The Language of Interfaces
destraynor
151
23k
Building Effective Engineering Teams - LeadDev
addyosmani
33
1.9k
How GitHub Uses GitHub to Build GitHub
holman
468
290k
Product Roadmaps are Hard
iamctodd
45
9.8k
Build The Right Thing And Hit Your Dates
maggiecrowley
25
2k
Thoughts on Productivity
jonyablonski
60
3.9k
What’s in a name? Adding method to the madness
productmarketing
PRO
17
2.7k
The World Runs on Bad Software
bkeepers
PRO
61
6.8k
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