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.7k
ゴールデンウィーク+αでWebサイト作ってリリースした話
先日リリースした「Flexbox Cheat Site」という CSS Flexbox チートシートを表示するWebサイトの制作過程について社内LTで登壇してきました。
Atsusuke
May 28, 2020
Tweet
Share
More Decks by Atsusuke
See All by Atsusuke
ゾンビスクラム先生が語る過ちと教訓!俺みたいになるな!
kuroppe1819
3
230
ゆるい個人開発のススメ
kuroppe1819
11
1.3k
実践!Micro Frontends!~ kintone の共通ヘッダーは独立したデプロイの夢を見るか? ~
kuroppe1819
3
1.3k
チームの成長を促すためにふりかえりの改善に本気で向き合った話
kuroppe1819
2
2.6k
Remix + Cloudflare Pages + Cloudflare D1 で ポケモン SV のレンタルチームを検索できるアプリを作ってみた
kuroppe1819
5
3.3k
一人ひとりがオーナーシップを持って開発できるチームを目指して
kuroppe1819
5
35k
kintoneのフロントエンド刷新に向けた取り組み
kuroppe1819
3
790
エンジニア目線で見たkintone開発の魅力
kuroppe1819
1
2.1k
ゼロから始めるモブプログラミング研修
kuroppe1819
1
5.8k
Other Decks in Programming
See All in Programming
2024-10-01 dev2next - Observability for Modern JVM Applications
jonatan_ivanov
0
140
DjangoNinjaで高速なAPI開発を実現する
masaya00
0
530
The Efficiency Paradox and How to Save Yourself and the World
hollycummins
0
190
ACES Meet におけるリリース作業改善の取り組み
fukucheee
0
140
Re:PandasAI:生成AIがデータ分析業務にもたらすパラダイムシフト【増補改訂版】
negi111111
1
1.1k
空間の中でアイドルとレッスンする技術 - 1st "Vision" / Spatial Lesson technologies with my idol - 1st "Vision"
banjun
PRO
0
160
Micro Frontends for Java Microservices - dev2next 2024
mraible
PRO
0
210
Hi, have you met Kotlin Multiplatform? | DevFest Vienna 2024
prof18
0
180
実践Dash - 手を抜きながら本気で作るデータApplicationの基本と応用 / Dash for Python and Baseball
shinyorke
2
620
色んなオートローダーを覗き見る #phpcon_okinawa
o0h
PRO
5
410
個人開発で使ってるやつを紹介する回
yohfee
1
710
Pydantic x Database API:turu-pyの開発
yassun7010
1
740
Featured
See All Featured
GraphQLとの向き合い方2022年版
quramy
43
13k
Design by the Numbers
sachag
278
19k
KATA
mclloyd
28
13k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
26
2k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
43
6.5k
How to train your dragon (web standard)
notwaldorf
87
5.6k
Building a Scalable Design System with Sketch
lauravandoore
459
33k
[RailsConf 2023] Rails as a piece of cake
palkan
49
4.8k
Product Roadmaps are Hard
iamctodd
PRO
48
10k
A Modern Web Designer's Workflow
chriscoyier
692
190k
The Art of Programming - Codeland 2020
erikaheidi
51
13k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
231
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