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
airClosetのフロントアーキテクチャの歴史と色々
Search
osamu38
February 26, 2018
Research
3
2.1k
airClosetのフロントアーキテクチャの歴史と色々
osamu38
February 26, 2018
Tweet
Share
Other Decks in Research
See All in Research
MIRU2025 チュートリアル講演「ロボット基盤モデルの最前線」
haraduka
15
7.7k
2021年度-基盤研究B-研究計画調書
trycycle
PRO
0
280
Vision and LanguageからのEmbodied AIとAI for Science
yushiku
PRO
1
520
AlphaEarth Foundations: An embedding field model for accurate and efficient global mapping from sparse label data
satai
1
190
とあるSREの博士「過程」 / A Certain SRE’s Ph.D. Journey
yuukit
10
4.2k
20250725-bet-ai-day
cipepser
2
410
最適化と機械学習による問題解決
mickey_kubo
0
170
電通総研の生成AI・エージェントの取り組みエンジニアリング業務向けAI活用事例紹介
isidaitc
1
920
心理言語学の視点から再考する言語モデルの学習過程
chemical_tree
2
560
論文読み会 SNLP2025 Learning Dynamics of LLM Finetuning. In: ICLR 2025
s_mizuki_nlp
0
190
業界横断 副業・兼業者の実態調査
fkske
0
240
RHO-1: Not All Tokens Are What You Need
sansan_randd
1
170
Featured
See All Featured
Embracing the Ebb and Flow
colly
87
4.8k
Build your cross-platform service in a week with App Engine
jlugia
231
18k
Producing Creativity
orderedlist
PRO
347
40k
Docker and Python
trallard
45
3.5k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
36
2.5k
Git: the NoSQL Database
bkeepers
PRO
431
66k
Designing for Performance
lara
610
69k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
285
13k
StorybookのUI Testing Handbookを読んだ
zakiyama
31
6.1k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
27k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
910
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Transcript
株式会社エアークローゼット Forefront JavaScript ! 急成長中のサービスの技術達!2018.2.26
フロントエンドエンジニア(4~5年ぐらい) airClosetではSSRの設計をしてる ReactとNode.jsが好き フリーランス 荒田 修(あらた おさむ) osamu38(GitHub) プロフィール
もくじ • airClosetのフロントアーキテクチャの歴史 • SSRに便利なツール達 • CSS • 成功した話 •
失敗した話 • もし今日からSSRを勉強したい人がいましたら • 伝えたかったこと
もくじ • airClosetのフロントアーキテクチャの歴史 • SSRに便利なツール達 • CSS • 成功した話 •
失敗した話 • もし今日からSSRを勉強したい人がいましたら • 伝えたかったこと
airClosetのフロントアーキテクチャの歴史
かつて(2015年2月〜2016年9月)
課題 • レガシーなコード • セキュリティがガバガバ • 拡張性がない
作り直し
React
僕が参画した後の設計(2016年9月〜2017年12月)
僕が参画した後の設計(2016年9月〜2017年12月) メイン:Reactを使ったSPA サブ :Staticサーバー(キャンペーンページ用) CSS :PostCSS
• SPAだとOGPの対応が困難 • StaticサーバーでReactのコンポーネン トを再利用できない • そもそもリポジトリを一元管理ができな い 課題
二度目の作り直し
SSRの巻 Server Side Rendering
メリット • SPAだとOGPの対応が困難 • StaticサーバーでReactのコンポーネン トを再利用できない • そもそもリポジトリを一元管理ができな い 全部できる。最高。
現在のアーキテクチャ
現在のアーキテクチャ(2016年12月〜現在) メイン:Reactを使ったSSR サブ :Reactを使ったSPA(移行しきれていない ページ) CSS :PostCSS to styled-components
もくじ • airClosetのフロントアーキテクチャの歴史 • SSRに便利なツール達 • CSS • 成功した話 •
失敗した話 • もし今日からSSRを勉強したい人がいましたら • 伝えたかったこと
SSRに便利なツール達
SSRに便利なツール達 その1 react-helmet https://github.com/nfl/react-helmet
SSRに便利なツール達 その1 react-helmet
SSRに便利なツール達 その2 react-cookie https://github.com/reactivestack/cookies/tree/master/packages/react-cookie
SSRに便利なツール達 その2 react-cookie
SSRに便利なツール達 その2
[email protected]
セットして... 使うだけ
もくじ • airClosetのフロントアーキテクチャの歴史 • SSRに便利なツール達 • CSS • 成功した話 •
失敗した話 • もし今日からSSRを勉強したい人がいましたら • 伝えたかったこと
CSS
CSSっていろいろあるけど、何がいいのかしら Reactを使ったアプリケーションでCSSを書くときに現実的な選択肢 は2種類だと思っています。 1つはCSS Modules。 もう1つはstyled-componentsです。 どちらも甲乙つけがたいところがあり、CSSを非エンジニアが書く場 合CSS Modulesに分があり、エンジニアが書く場合は styled-componentsが良さそうだなと思いました。
異論は認めます。
もくじ • airClosetのフロントアーキテクチャの歴史 • SSRに便利なツール達 • CSS • 成功した話 •
失敗した話 • もし今日からSSRを勉強したい人がいましたら • 伝えたかったこと
成功した話
成功した話 その1 頻繁にnpm-check-updatesしてたこと https://github.com/tjunnone/npm-check-updates
npm-check-updatesとは ターミナル上でncuコマンドを叩くことにより、package.jsonの依存モ ジュールを最新バージョンにアップグレードできるコマンドラインツー ル。
最近のモジュール事情とncuのメリット 最近ではモジュールが破壊的に変更されることが多々あり、一 気にアップデートすると死にます。(reactとか) なので頻繁に少しずつアップデートすることによって後で苦労 することもなくなります。(react-routerは別)
余談 仕事がなくて暇な時は npm install [module-name]@latest してみましょう。事前に新しいバージョンのモジュールを導入す ることができます。 ちなみにreact-hot-loaderは現在v3.1.3が最新版ですが npm install
react-hot-loader@latest するとv4.0.0-rc.0が入ります。
成功した話 その2 GitHubのリポジトリを沢山見比べたこと https://github.com/osamu38/universal-investigation/wiki
そもそもSSRの設計なんて全然わからん。 SSRのような少し複雑な設計をする際に、そもそもどう作れば 良いのかよくわかりませんでした。 なのでひたすら調査してみました。2017年1月21日の時点での メモ。 https://github.com/osamu38/universal-investigation/wiki 調べてみると各々の実装の違いやお作法のような書き方が あったり、当時の実装者たちの苦労が伺えます。 ここで調べていたおかげである程度SSRにおけるコツを掴みま した。
ちなみに この時点でのNext.jsのスター数が8327でしたが、資料作成中 に見たら22718でした。なにも考えずNext.js使えば良いんじゃ ないかな。
もくじ • airClosetのフロントアーキテクチャの歴史 • SSRに便利なツール達 • CSS • 成功した話 •
失敗した話 • もし今日からSSRを勉強したい人がいましたら • 伝えたかったこと
失敗した話
失敗した話 その1 RefluxJSを使ったこと https://github.com/reflux/refluxjs
当時は良いと思ってたんだよ。当時は Reduxの冗長さに対して懐疑的であり、より楽に書けるRefluxJS(さ りげなくスター数5000越え)があったので使ってみたものの、徐々に メンテされなくなりエコシステムと切り離される恐怖感からReduxへ 移行。使い心地は悪くなかった。 ↓Refluxの設計(とてもシンプル)
失敗した話 その2 CSS Spriteを使ったこと
CSS Spriteとは たくさんの画像をなるべく一枚画像にまとめて、サーバへのリクエス ト回数を少なくする技術です。 Sprite画像とCSSのマッピングが必要なため、レスポンシブに対応さ せるなどの凝ったものを作ろうとするとそれなりに面倒な設定を書 かざるをえないのですが、当時は画面を少しでも早く表示したいが ために頑張って書いていました。
HTTP2 襲来 エアクロメンバー
なんてこったい。。。 HTTP2では並列でリクエストが可能なため、一枚あたりの画像 サイズが小さい方が相性良さそうです。 苦労して導入したのに捨てるどころかパフォーマンスを下げる 原因になり、PostCSSからstyled-componentsに移行する際の 障壁にもなっているため、本当に失敗でした。
もくじ • airClosetのフロントアーキテクチャの歴史 • SSRに便利なツール達 • CSS • 成功した話 •
失敗した話 • もし今日からSSRを勉強したい人がいましたら • 伝えたかったこと
もし今日からSSRを 勉強したい人がいましたら
スターつけてもいいんだよ https://github.com/osamu38/universal-investigation のリポジトリをクローンしてみましょう。 中身の実装が世界一薄いので勉強には向いていると思います。
もくじ • airClosetのフロントアーキテクチャの歴史 • SSRに便利なツール達 • CSS • 成功した話 •
失敗した話 • もし今日からSSRを勉強したい人がいましたら • 伝えたかったこと
伝えたかったこと
SSRよ、流行れ この前僕がReact.jp meetup #5に参加させて頂いた際に、会場で Reactを実務で使っている人とSSRまでやってる人を質問していまし たが、Reactを使っている人は半分ぐらいで、SSRやっている人は3 人ぐらい。 ちょっとショックでした。もっと流行ってると思ってた。 SSRのような技術は導入していない会社からすれば遠い技術と思 われがちですが、ちょっとずつでもいいから情報をキャッチアップし
てモダンな環境に日々近づけていく努力がエンジニアには必要だな と思いました。
airCloset、まじ自由 フリーランスの僕がおすすめするのもあれですが、airClosetは自由 に設計できてとても良い会社です。 エンジニア絶賛募集中なので、是非よろしくお願いします。 https://www.wantedly.com/projects/177054
半歩先の 新しいライフスタイルとして、 これまでにないワクワクする ファッションとの出会い方を 創造します 42