当社はConcrete CMSを用いたWebサイト構築を主な業務としております。また、フロントエンドのみの構築（いわゆるコーディング）のご依頼も承っております。その中で、ご依頼の際に当社が標準的に採用している技術についてご説明する機会は多々ありますが、対外的にまとまって記載したページがこれまでなかったため、こちらのブログにまとめることとしました。ご依頼いただく際の参考にしていただければ幸いです。
CSSフレームワーク
当社ではCSSフレームワークとして Tailwind CSS （テイルウィンド・シーエスエス）を採用しています。Tailwind CSS は、2022年の調査において、直近４年間を通して満足度・興味・利用率の全てで１位を獲得し続けている、現在のフロントエンドデベロッパーから最も支持されているフレームワークです。Microsoft, Google, GitHub, Shopify, Netflix といったビッグテック企業がこぞって採用、New York Times などのメディアも採用していることから、国内でも遅ればせながら採用が増えているフレームワークです。
当社では2020年よりいち早く Tailwind CSS の使用をはじめ、現在では全ての案件で採用しています。主な利点は次の通りです。
Concrete CMS との相性が良い。
Concrete CMS は、ドラッグ＆ドロップでブロックを並び替えることができる、直感的で使いやすい操作方法が特徴のCMSです。しかし、並び替えた結果表示が崩れてしまっては、せっかくのCMSの魅力も半減してしまいます。従来のCSSコーディング手法では、HTMLの構造やクラス名を先に決め、あとからスタイルを当てるという手法のため、CMS上でHTMLの構造を変化させられるCMSとの相性が悪く、お客様にご不便を強いることを心苦しく思っておりました。
Tailwind CSS はその設計思想上、HTMLの構造に依存しないコーディングが可能です。CSSのカスケーディング（継承）も行わないため、CMSから自由にHTMLの構造を変化させても、崩れにくいコーディングが実現できます。このことから、CMSの利点を活かしたサイト管理をご提供できるようになり、また実装工数も削減できるようになりました。
メンテナンス性が高い。
従来のCSSフレームワークは、利用頻度の高いUIコンポーネントのみ提供し、提供されていないUIコンポーネントは結局自力で開発する必要がありました。そのため、実装者によって実装結果がまちまちで、引き継ぎがしづらい、公開後の改修に手間がかかる、などの問題がありました。そのような問題を解決するために、BEMなどの規則が生み出されましたが、フレームワーク側から解決策が提供されることはありませんでした。
Tailwind CSS は、フレームワークの範囲内で全てのUIの実装を可能にします。フレームワーク外の規則を導入するまでもなく、複数の実装者の実装結果を統一することが可能です。当社は長期間に渡りCMSと合わせてCSSのメンテナンスもご提供するお客様が多数おられます。Tailwind CSS の利点はサイトのメンテナンス性を高め、安定した運用をご提供するのに役立っています。
軽量でサイトのパフォーマンスの向上に寄与する。
従来のCSSフレームワークは、基盤となるCSSのみ提供し、それに実装者が各々のCSSを追加することでWebサイトを構築していました。必然的に、CSSのファイル容量が大きくなりますが、これは検索エンジンからの評価にマイナスの影響を及ぼします。
Tailwind CSS は実際に使われるスタイルのみを抽出して最小限のCSSファイルをビルドする仕組みになっています。これにより、UIの豊富な大規模なコーポレートサイトにおいても、Bootstrap本体よりも小さなCSSファイルに抑えることができています。
以上の理由から、当社では Tailwind CSS を全ての案件で採用しておりますが、もし他のフレームワークの利用をご希望の場合でも、弊社の制作パートナーと連携して対応させていただくことは可能です（割増料金となります）。
JavaScript フレームワーク
当社では、JavaScript フレームワークとして Vue.js （ビュー・ジェイエス）もしくは Alpine.js （アルパイン・ジェイエス）を使用しています。
Vue.js は、2014年にリリースされた歴史あるフレームワークで、React と並んで高い知名度を誇る人気のフレームワークです。当社が Vue.js を第一のJSフレームワークとして採用している最大の理由は、Concrete CMS のUIフレームワークとしても採用されていることです。日常的に CMS のインターフェースのカスタマイズを業務で行なったり、オープンソース活動として Concrete CMS の UI 改善にも貢献していることから、 Vue.js の理解を深めることは弊社にとって重要なタスクです。現在シェアトップのフレームワークはReactですが、以上の理由から弊社では Vue.js を優先しております。
Alpine.js は、2022年の調査において、React や Vue.js と言ったメジャーなフレームワークと並んで高い満足度評価を得ている、2019年生まれの新興のフレームワークです。Alpine.js は、「JavaScript界の Tailwind CSS」とも評されるフレームワークで、React や Vue.js のリアクティビティや宣言的な記述といった利点を、低いコストで導入できるようにしたのが特徴です。簡単にセットアップでき、ビルドも不要で、記法は Vue.js によく似ています。ファイル容量も jQuery と比較し圧倒的に軽量な6.4kbしかなく、サイトのパフォーマンス向上に利点があります。
Concrete CMS の REST API を使ってSPA（Single Page Application）を構築する際は Vue.js が最適ですが、そうではない多くのプロジェクトにとっては、Alpine.js が第一の選択肢となります。
なお、jQuery は現在基本的に使用しない方針としています。jQuery は2006年に生まれた大変に古いライブラリです。従来当社のプロジェクトでも jQuery をよく利用していましたが、Concrete CMS自身も jQuery をバンドルしており、同時に使用する際に問題が起こることが多く、CMSのバージョンアップ時の不具合を避けるために原則使用しないこととしました。現在では jQuery の人気は下火であり、使用せずとも特に実装に問題は生じません。
また、React については非採用としておりますが、ご希望であれば弊社の制作パートナーと連携して対応させていただくことは可能です（割増料金となります）。
Storybook
当社では、フロントエンド開発、テスト作業に Storybook （ストーリーブック）を使用しています。Storybook はUIコンポーネントのカタログとして使えるツールで、画面サイズやコンテンツを変更した際の表示テストや、アクセシビリティの自動テストなどさまざまな機能があります。お客様にご確認いただく際にも、こちらのツールにアクセスしていただいています。
ビルドツール
当社では、フロントエンド開発時のビルドツールとして、webpack （ウェブパック）を使用しています。ただし、Storybook 7 へのバージョンアップ以降は、Vite （ヴィート）への切り替えを予定しています。国内ではgulpを使用する制作会社が多くありますが、10年近く前に開発が終了したツールであり、当社では使用しておりません。
対象ブラウザ
原則として、表示検証対象ブラウザは Chrome, Edge, Safari, Firefox, Chrome (Android), Safari (iOS) の最新版としています。これは、Concrete CMS のサポートブラウザと基本的には合わせており、対象となる根拠としてマーケットシェアが1%以上のブラウザとしています。
以上、当社のフロントエンドコーディング時の標準技術についてご紹介しました。ご参考になれば幸いです。なお、随時採用技術についてはアップデートしておりますので、本記事が将来的にも当社の採用技術について保証するものではありません。
