はじめまして！システムエンジニアの谷渕です。
今日は、DRESPIC( https://drespic.net )についてお話ししようと思います。
DRESPICとは…？
DRESPICは、2017年1月11日にオープンした、ウエディングドレスのクチコミサイトです。私はこのサイトの立ち上げエンジニアとして、昨年からDRESPICに関わっています。サイトを0から立ち上げるという、わくわくと不安といろいろな気持ちを抱えて、事業責任者の、「ドレス業界に革命を起こしたい！」という夢に乗っかって、一緒に叶えよう！と決意し、DRESPICをつくってきました。
DRESPICは女子チームで、年も近いことから、かわいい！と思うものも似ていて、ロゴ決定やサイトのテイストなど、チーム全員で、絶対にこれがいい！と納得できるものを集めて、全員でDRESPICサイトへの愛を深めながら、大事に大事にリリースに向けて育ててきました。
DRESPICを圧倒的おしゃれなサイトにしたい！という思いがあり、そのためには技術も大事ということで、技術面をこの記事で改めて見直してみることにしました。
DRESPICの特徴
先にも書きましたが、DRESPICとは、ウエディングドレスのクチコミサイトです。クチコミをメインに、ドレスブランドのページ、ドレスショップのページ、ドレスやタキシードの商品ページなどがあり、様々な検索軸で検索ができる機能や、ユーザーが書き込めるSNSのフィード機能、など様々な機能があるサイトです。
開発時の条件や特徴、から実現したかったことは大きく２つです。
・比較的規模が大きいサイトで、開発が1人ではないこと
L開発者ごとに書き方が大きく変わることもある
L他のメンバーがよめないコードが書かれることもある
L共通の処理を開発者間で効率的に共有したいなあ
Lあと、修正したときに影響を受ける場所を明確にしておきたい
・クチコミ部分とSNSの部分で最適な設計が異なること
LクチコミページはSEOを意識したいため、JSでの実装は局所的にしたい
LSNSのページはインタラクションを重視して、JSでSPA実装したい
L…でも両方の画面に共通のモジュールがあるからコードを再利用したい
(左:クチコミ / 右:SNSのフィード)
この時点でサーバサイドの言語は決定していたので、
上記のことをふまえて、フロントエンドの技術選定に入りました。
DRESPIC言語選定 その前に
フレームワークとライブラリの違い
最初に定義をおさらいしておきましょう。
「フレームワーク」・・・アプリケーションの骨格を担うもので、開発をするときに開発者はその骨格に沿って肉付けをしていくものです。
「ライブラリ」・・・骨格ではなく、肉付けを補助するものです。そのため、骨格部分はフレームワークに任せるか、自分で実装する必要があります。
フレームワークを知っているだけで、新しく開発者がプロジェクトに参加しやすかったり、信頼性の高い骨格を使えることで、各モジュールの役割が分離され、他のモジュールに影響を与えるコードや、潜在的にバグが潜みやすいコードを書きにくくなります。
DRESPICの言語選定
選ぶポイントは3つでした。
・将来性があること
L将来メインストリームになりそうな技術の方が、ノウハウが蓄積されていく
・単一モジュールからSPAまで対応できる柔軟性があること
L単一モジュールの埋め込み(クチコミ部分)からSPA(SNS部分)まで柔軟に対応できる
Lコンポーネントの組み合わせでより大きなコンポーネントを作ることができるとよい◎
・学習コストが高すぎないこと
Lメンテナンス性も下がるし、引き継ぎに時間がかかってしまいます
以上を踏まえて、選定がはじまりました。
出てきた候補はこの3つです。
①Angular2
②Vue.js
③React.js + redux
これを先ほどのポイントをふまえて考えてみましょう…
Angular2
将来性 ◎
柔軟性 △
学習コスト △
(TypeScriptの学習コストが高そうでした)
Vue.js
将来性 ◯
柔軟性 ◯
学習コスト ◎
(ライブラリとフレームワークの中間なのでSPAのために追加のフレームワークを使う方がよいが、それだとVue.jsのシンプルさが活かせない…！)
React.js + redux
将来性 ◎
柔軟性 ◎
学習コスト ◯
(Vue.jsより学習コスト高めですがAngular2よりは低めでした)
以上の結果を踏まえて、選ばれたのはredux + React.jsでした。そして同時に谷渕の勉強が始まるのでした。勉強の過程もどこかでお話しできればいいなと思います！
DRESPICのこれから
1/11にリリースされたばかりのDRESPIC、まだまだよちよち歩きのサイトです。ユーザーさんから集まるたくさんのクチコミを大切に、もっとかわいくて、誰にとってもわかりやすいサイトに育てていきます！これからもDRESPICをよろしくお願いします！
ウエディングパークでは、エンジニアを募集しております。 Weddingparkを始め、DRESPICなど各種サイトやサービスを一緒に作りませんか？
IT×ブライダルで業界を変える！プロフェッショナルなWEBエンジニア募集！
