RECUS GROOVE サイトリニューアル

この度、弊社のコーポレートサイトと、弊社のブログサイト「REC. クリエイターズブログ」を統合し、リニューアルいたしました。
各ページ内容を充実させ、新しいデザインや技術を取り入れることで、さらに快適にご覧いただけるサイトになりました。

ブログサイト「REC. クリエイターズブログ」については、BLOGページにて、過去の記事を含め引き続きご覧いただけます。
こちらもさらに読みやすい・探しやすいデザインに一新し、より快適にご覧いただけるようアップデートしております。
今後も引き続き、山口県のことをより深く知っていただけるよう、更新を行なってまいりますので、ぜひご覧いただければ幸いです。

本日は主に技術的な視点から、リニューアルに際しての開発の裏話（？）などをお話させていただければと思います。

技術選定

今回のサイトリニューアルにあたり、どのようなサイトとするか議論した際には色々な意見が出ましたが、主に次のような項目を実現することを目的として、使用する技術を選定しました。

• 高速なWebサイトを実現すること
• ブログや制作実績の追加など、コンテンツの追加を容易に行えるようにすること
• サイト更新を継続的に行なっていくにあたって、デザイナーさんもサイト更新がしやすい設計とすること
• デザイン面・技術面でもモダンで、数年後も追従できるものとする

以下をベースとして開発を進めることとしました。

• Next.js（React.js） … TypeScriptを使用
• WordPress（CMS）
• styled-component

Next.jsを利用することで、技術的にもモダンなサイトが実現でき、さらに高速なWebサイトを実現できることから、すぐに決定しました。
次にWordPressですが、これについては普段からよく使用しているCMSであることや、ブログサイト「REC.」のこれまで投稿してきた記事を引き継ぐという意味でも、早い段階で決定しました。
最後の「styled-component」ですが、これについては開発スタート直前まで色々と悩みました。

styled-componentの採用まで

まず、候補として上がっていたものは以下の3つです。

• styled-component
• CSS Modules
• tailwind CSS

どれも、Next.js, React.jsを利用するプロジェクトではメジャーなものですが、「デザイナーさんもサイト更新がしやすい設計とすること」という観点から、まず「tailwindCSS」が候補から外れました。
tailwindCSSはインラインCSSライクに記述できる点や、スピーディな開発ができるメリットはあったのですが、どうしても特有の記述方法やクラス名を調べながら作っていく必要があり、また設定ファイルも独特の記述方法になったりと、上記のような目的を達成するのが難しくなるかな、という考えです。
CSSはデザイナーさんも問題なく記述でき、他の2つであれば対応しやすそうだ、という理由です。

次に、「CSS Modules」か「styled-component」か、という点ですが、どちらもtailwindCSSのように独自の書き方をすることなく、CSSの知識で調整が可能になりそうです。
styled-componentを採用した場合、スタイルはJavaScriptとして記述することになるため、コンポーネントの状態に合わせて動的にスタイルを調整しやすい点や、CSSファイルを別に作らなくて良く、か開発面・管理面でメリットが大きそうでした。
ただし、そのため、単純なCSSではなくなり、上記の目標と外れるのでは？という意見もありました。

その後、色々と調査・議論した結果…
最終的には、デザイン面・技術面でもモダンで、数年後も追従できるものとする という目的達成のため、styled-componentの採用に至りました。

コンポーネント設計

こちらを参考にさせていただき、Presentational and Container Components という考え方に基づいて、管理面の理由から決定しました。（上記の記事は、スタイリング方法の選定の際にも参考にさせていただきました。）

詳しくは割愛しますが、簡単に言えば「見た目（JSXの管理）」と「振る舞い（状態の管理やビジネスロジック）」を分離する、という考え方です。
具体的には、以下のようにファイル自体を分離してしまうことで、cssの変更時にビジネスロジックの記述されたファイルを気にしなくて良いようにしています。

[Component名]
│
├── index.tsx
│
└── style.ts

このようにすることで、スタイリングの調整時に、CSSファイルを編集するのと同じようにでき、さらに動的な値をCSSの記述の中で利用することができます。

まとめ

簡単にではありましたが、弊社コーポレートサイトのリニューアルに関する技術的なお話でございました。
ぜひ、色々なページをご覧いただければ幸いです。