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.9k
ゴールデンウィーク+αでWebサイト作ってリリースした話
先日リリースした「Flexbox Cheat Site」という CSS Flexbox チートシートを表示するWebサイトの制作過程について社内LTで登壇してきました。
Atsusuke
May 28, 2020
Tweet
Share
More Decks by Atsusuke
See All by Atsusuke
ゾンビスクラム先生が語る過ちと教訓!俺みたいになるな!
kuroppe1819
3
500
ゆるい個人開発のススメ
kuroppe1819
12
1.5k
実践!Micro Frontends!~ kintone の共通ヘッダーは独立したデプロイの夢を見るか? ~
kuroppe1819
3
1.6k
チームの成長を促すためにふりかえりの改善に本気で向き合った話
kuroppe1819
2
2.9k
Remix + Cloudflare Pages + Cloudflare D1 で ポケモン SV のレンタルチームを検索できるアプリを作ってみた
kuroppe1819
5
3.8k
一人ひとりがオーナーシップを持って開発できるチームを目指して
kuroppe1819
5
36k
kintoneのフロントエンド刷新に向けた取り組み
kuroppe1819
3
840
エンジニア目線で見たkintone開発の魅力
kuroppe1819
1
2.2k
ゼロから始めるモブプログラミング研修
kuroppe1819
1
5.9k
Other Decks in Programming
See All in Programming
生成AIコーディングとの向き合い方、AIと共創するという考え方 / How to deal with generative AI coding and the concept of co-creating with AI
seike460
PRO
1
330
Is Xcode slowly dying out in 2025?
uetyo
1
190
PHP 8.4の新機能「プロパティフック」から学ぶオブジェクト指向設計とリスコフの置換原則
kentaroutakeda
2
490
Systèmes distribués, pour le meilleur et pour le pire - BreizhCamp 2025 - Conférence
slecache
0
100
AIエージェントはこう育てる - GitHub Copilot Agentとチームの共進化サイクル
koboriakira
0
370
AIプログラマーDevinは PHPerの夢を見るか?
shinyasaita
1
110
deno-redisの紹介とJSRパッケージの運用について (toranoana.deno #21)
uki00a
0
140
Team topologies and the microservice architecture: a synergistic relationship
cer
PRO
0
1k
第9回 情シス転職ミートアップ 株式会社IVRy(アイブリー)の紹介
ivry_presentationmaterials
1
230
[初登壇@jAZUG]アプリ開発者が気になるGoogleCloud/Azure+wasm/wasi
asaringo
0
130
Benchmark
sysong
0
260
Webの外へ飛び出せ NativePHPが切り拓くPHPの未来
takuyakatsusa
2
350
Featured
See All Featured
It's Worth the Effort
3n
185
28k
The Language of Interfaces
destraynor
158
25k
Rails Girls Zürich Keynote
gr2m
94
14k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Done Done
chrislema
184
16k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
33
5.9k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
790
Producing Creativity
orderedlist
PRO
346
40k
Building Applications with DynamoDB
mza
95
6.5k
Into the Great Unknown - MozCon
thekraken
39
1.9k
Site-Speed That Sticks
csswizardry
10
660
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
16
940
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