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
診断前の病歴テキストを対象としたLLMによるエンティティリンキング精度検証
hagino3000
1
130
【輪講資料】Moshi: a speech-text foundation model for real-time dialogue
hpprc
3
670
最適化と機械学習による問題解決
mickey_kubo
0
170
Learning to (Learn at Test Time): RNNs with Expressive Hidden States
kurita
0
170
論文紹介:Not All Tokens Are What You Need for Pretraining
kosuken
0
170
When Submarine Cables Go Dark: Examining the Web Services Resilience Amid Global Internet Disruptions
irvin
0
300
Type Theory as a Formal Basis of Natural Language Semantics
daikimatsuoka
1
290
[輪講] SigLIP 2: Multilingual Vision-Language Encoders with Improved Semantic Understanding, Localization, and Dense Features
nk35jk
2
1k
単施設でできる臨床研究の考え方
shuntaros
0
2.7k
2025/7/5 応用音響研究会招待講演@北海道大学
takuma_okamoto
1
190
Mechanistic Interpretability:解釈可能性研究の新たな潮流
koshiro_aoki
1
410
問いを起点に、社会と共鳴する知を育む場へ
matsumoto_r
PRO
0
610
Featured
See All Featured
Build The Right Thing And Hit Your Dates
maggiecrowley
37
2.9k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
3k
Building Applications with DynamoDB
mza
96
6.6k
Java REST API Framework Comparison - PWX 2021
mraible
33
8.8k
The Language of Interfaces
destraynor
161
25k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
Art, The Web, and Tiny UX
lynnandtonic
303
21k
Building an army of robots
kneath
306
46k
YesSQL, Process and Tooling at Scale
rocio
173
14k
How to train your dragon (web standard)
notwaldorf
96
6.2k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
49
3k
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