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
520
ゆるい個人開発のススメ
kuroppe1819
12
1.6k
実践!Micro Frontends!~ kintone の共通ヘッダーは独立したデプロイの夢を見るか? ~
kuroppe1819
3
1.7k
チームの成長を促すためにふりかえりの改善に本気で向き合った話
kuroppe1819
2
3k
Remix + Cloudflare Pages + Cloudflare D1 で ポケモン SV のレンタルチームを検索できるアプリを作ってみた
kuroppe1819
5
3.9k
一人ひとりがオーナーシップを持って開発できるチームを目指して
kuroppe1819
5
36k
kintoneのフロントエンド刷新に向けた取り組み
kuroppe1819
3
850
エンジニア目線で見たkintone開発の魅力
kuroppe1819
1
2.2k
ゼロから始めるモブプログラミング研修
kuroppe1819
1
5.9k
Other Decks in Programming
See All in Programming
新しいモバイルアプリ勉強会(仮)について
uetyo
1
250
Streamlitで実現できるようになったこと、実現してくれたこと
ayumu_yamaguchi
2
280
0から始めるモジュラーモノリス-クリーンなモノリスを目指して
sushi0120
0
250
ゲームの物理
fadis
3
600
decksh - a little language for decks
ajstarks
4
21k
DMMを支える決済基盤の技術的負債にどう立ち向かうか / Addressing Technical Debt in Payment Infrastructure
yoshiyoshifujii
5
760
React は次の10年を生き残れるか:3つのトレンドから考える
oukayuka
41
16k
[DevinMeetupTokyo2025] コード書かせないDevinの使い方
takumiyoshikawa
2
260
DatadogのArchived LogsをSnowflakeで高速に検索する方法(Archive Searchでオワコンにならないことを祈って) / How to search Datadog Archived Logs quickly with Snowflake (hoping Datadog Archive Search doesn’t make this obsolete)
civitaspo
0
110
DataformでPythonする / dataform-de-python
snhryt
0
150
AIのメモリー
watany
12
1.3k
管你要 trace 什麼、bpftrace 用下去就對了 — COSCUP 2025
shunghsiyu
0
250
Featured
See All Featured
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
283
13k
[RailsConf 2023] Rails as a piece of cake
palkan
56
5.7k
Making the Leap to Tech Lead
cromwellryan
134
9.5k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.6k
Fireside Chat
paigeccino
38
3.6k
For a Future-Friendly Web
brad_frost
179
9.9k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.8k
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
GraphQLとの向き合い方2022年版
quramy
49
14k
How to train your dragon (web standard)
notwaldorf
96
6.2k
It's Worth the Effort
3n
185
28k
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