2025年05月08日
なぜJamstackはセキュアと言われるのか?WordPressとの比較と対策

近年注目を集めるウェブサイト構築アーキテクチャ「Jamstack」。その特徴の一つとして、高いセキュリティ性が挙げられます。本記事では、Jamstackがセキュリティに優れる理由を解説し、広く利用されているWordPressと比較しながら、具体的な対策についても掘り下げていきます。
Jamstackがセキュリティに優れる理由
Jamstackが従来のアーキテクチャと比較してセキュリティが高いと言われる主な要因は、以下の点に集約されます。
- サーバーレスアーキテクチャ: 静的なファイルをCDN経由で配信し、動的な処理はAPIに依存するため、ウェブサーバー自体が攻撃対象となるリスクを大幅に低減できます。常時稼働するデータベースやサーバーサイドアプリケーションが存在しないため、侵入経路が減少します。
- 攻撃対象の縮小: WordPressのようなCMSは、データベース、PHP実行環境、CMS本体、プラグイン、テーマなど、多岐にわたる要素が攻撃対象となり得ます。一方、Jamstackサイトは静的なファイルが中心であり、これらの攻撃対象を大幅に削減できます。
- 機能の分離: 動的な機能は、認証、データベース、フォーム処理など、特定のタスクに特化した外部APIやサービスに委譲されます。これにより、単一の脆弱性がサイト全体に影響を及ぼすリスクを軽減できます。
- CDNによる配信: CDNは一般的にセキュリティ対策が施されたインフラストラクチャ上で動作し、DDoS攻撃などへの耐性が高い傾向があります。また、静的ファイル配信はサーバーサイド処理の必要がないため、サーバー側の脆弱性を利用した攻撃を防ぎます。
WordPressとのセキュリティ比較
WordPressは非常に普及しているCMSであるため、常に攻撃者の標的となりやすい状況にあります。プラグインやテーマの脆弱性、本体のアップデート遅延、サーバー設定の不備などがセキュリティインシデントの原因となる可能性があります。SQLインジェクションやPHPの脆弱性を利用した攻撃も懸念されます。
一方、Jamstackは静的ファイルが中心であるため、これらの攻撃経路は基本的に存在しません。動的な処理はAPIに依存しますが、適切に選定・管理されたAPIサービスを利用することで、ウェブサーバー自体の脆弱性リスクを低減できます。
ただし、Jamstackも完全に安全ではありません。利用するAPIサービスのセキュリティ、フロントエンドのJavaScriptコードの脆弱性、ビルドプロセスのセキュリティなどが新たなリスクとなる可能性があります。重要なのは、それぞれのアーキテクチャの特性を理解し、適切なセキュリティ対策を講じることです。
Jamstackサイトが改竄される可能性と対策
Jamstackアーキテクチャは、その特性から従来の動的なウェブサイトと比較してセキュリティが高いと考えられていますが、完全に改竄のリスクがないわけではありません。ここでは、Jamstackサイトが改竄される主な経路と、それに対する具体的な対策を掘り下げて解説します。
1. 利用するAPIサービスの脆弱性
Jamstackサイトでは、フォームの送信、認証、Eコマース機能、検索など、動的な処理を外部のAPIサービスに依存するケースが多くあります。これらのAPIサービスにセキュリティ上の脆弱性があった場合、そこを足がかりに不正アクセスが行われ、データが改竄されたり、悪意のあるコンテンツが挿入されたりする可能性があります。
改竄の例:
- フォームから送信されたデータが不正に操作され、意図しない情報がバックエンドに送られる。
- 認証APIの脆弱性を突かれ、不正なユーザーが管理者権限を奪取する。
- EコマースAPIの脆弱性を利用して、商品情報や価格が改竄される。
対策:
- 信頼できるAPIサービスの選定: 実績があり、セキュリティ対策に力を入れているAPIプロバイダーを選びましょう。提供しているサービスのセキュリティに関する情報を確認し、脆弱性への対応状況などを把握することが重要です。
- APIキーの適切な管理: APIキーは機密情報であり、ソースコードや公開リポジトリに直接埋め込むことは絶対に避けるべきです。環境変数やサーバーレス関数の環境設定などを利用して安全に管理し、不正なアクセスから保護しましょう。
- APIの利用範囲の制限: APIによっては、利用元のドメインやIPアドレスを制限できる場合があります。可能な限り設定し、不正なリクエストを遮断しましょう。
- APIのアップデートの適用: 利用しているAPIサービスのアップデート情報を常に把握し、セキュリティ関連のアップデートが提供された場合は速やかに適用しましょう。
- レート制限の実装: APIへの過剰なリクエストを防ぐために、レート制限を実装することを検討しましょう。DoS攻撃などのリスクを軽減できます。
2. フロントエンドのJavaScriptの脆弱性
Jamstackサイトのインタラクティブな要素は、主にJavaScriptによって実現されます。もしJavaScriptコードにセキュリティ上の欠陥(脆弱性)があった場合、クロスサイトスクリプティング(XSS)などの攻撃を受ける可能性があります。XSS攻撃を受けると、悪意のあるスクリプトがユーザーのブラウザ上で実行され、Cookieやセッション情報が盗まれたり、サイトの表示が改竄されたりする可能性があります。
改竄の例:
- 悪意のあるスクリプトが埋め込まれ、サイトの見た目が意図しないものに変更される。
- ユーザーが入力した情報が、攻撃者のサーバーに不正に送信される。
- Cookieが盗まれ、攻撃者がユーザーになりすましてサイトを操作する。
対策:
- ユーザー入力の適切なエスケープ処理: ユーザーからの入力(例えば、検索フォームのキーワード、コメントなど)をそのままHTMLに出力する前に、必ずエスケープ処理を行いましょう。これにより、悪意のあるスクリプトが実行されるのを防ぎます。
- Content Security Policy (CSP) の設定: CSPは、ブラウザが読み込むことを許可するリソース(スクリプト、スタイルシート、画像など)の配信元を制限する仕組みです。CSPヘッダーを適切に設定することで、XSS攻撃の影響を大幅に軽減できます。
- Subresource Integrity (SRI) の利用: SRIは、CDNなど外部の配信元から読み込むファイル(JavaScriptライブラリなど)の整合性を検証する仕組みです。
<script>
タグや<link>
タグにintegrity
属性を追加することで、ファイルが改竄されていないことをブラウザが確認できます。 - 信頼できるライブラリの利用と定期的なアップデート: 利用するJavaScriptライブラリは、セキュリティに関する実績があり、活発にメンテナンスされているものを選びましょう。また、ライブラリに脆弱性が発見された場合は、速やかに最新バージョンにアップデートすることが重要です。
- セキュリティレビューの実施: コードレビューや静的解析ツールなどを活用して、JavaScriptコードに潜在的な脆弱性がないか定期的にチェックしましょう。
3. ビルドプロセスの侵害
Jamstackサイトは、通常、静的サイトジェネレーター(SSG)などを用いて、ソースコードから静的なファイルを生成するビルドプロセスを経ます。もしこのビルドプロセスが侵害された場合、生成された静的ファイルに悪意のあるコードが埋め込まれる可能性があります。
改竄の例:
- ビルドスクリプトが改竄され、意図しないJavaScriptコードが最終的なHTMLファイルに挿入される。
- 依存しているパッケージに脆弱性があり、ビルド時に悪意のあるコードが混入する。
- ビルドを実行するサーバーが侵害され、生成されたファイルが改竄される。
対策:
- ビルド環境のセキュリティ強化: ビルドを実行するサーバーのアクセス制御を厳格に行い、不正なアクセスを防ぎましょう。
- 依存関係の管理と監査:
package-lock.json
やyarn.lock
などを利用して依存関係を正確に管理し、セキュリティスキャンツールなどで脆弱性を定期的にチェックしましょう。 - ビルドパイプラインの監視: CI/CDパイプラインの各ステップを監視し、不審なアクティビティがないかを確認しましょう。
- ビルド成果物の検証: ビルドされた静的ファイルの内容を定期的に確認し、意図しない変更がないかをチェックしましょう。
- 信頼できるツールの利用: ビルドプロセスで使用するツールは、信頼できる開発元が提供しているものを選びましょう。
4. CDNのアカウントの侵害
Jamstackサイトの静的ファイルは、通常CDN(コンテンツ配信ネットワーク)を通じて配信されます。もしCDNのアカウントが不正にアクセスされた場合、配信されている静的ファイルが改竄され、サイトの見た目が変わったり、悪意のあるコンテンツが表示されたりする可能性があります。
改竄の例:
- CDNに保存されているHTMLファイルが書き換えられ、偽のログインフォームが表示される。
- JavaScriptファイルが改竄され、ユーザーの行動を追跡するスクリプトが埋め込まれる。
- 画像ファイルが差し替えられ、不適切なコンテンツが表示される。
対策:
- 強力なパスワードと二段階認証の設定: CDNアカウントのパスワードは複雑なものを使用し、可能な限り二段階認証を設定しましょう。
- アクセス権限の適切な管理: 複数人でアカウントを共有する場合は、担当者ごとに必要な権限のみを付与し、不要なアクセス権限は削除しましょう。
- アクセスログの監視: CDNのアクセスログを定期的に監視し、不審なアクセスがないかを確認しましょう。
- HTTPSの強制: CDN経由での通信をHTTPSで暗号化し、中間者攻撃による改竄を防ぎましょう。
- WAF (Web Application Firewall) の導入: CDNによっては、WAF機能を提供している場合があります。WAFを導入することで、悪意のあるリクエストを遮断し、改竄のリスクを軽減できます。
5. 開発環境の侵害
開発者のPCや開発環境がマルウェアに感染した場合、意図しないコードがリポジトリにコミットされ、それがデプロイされてしまう可能性があります。
改竄の例:
- 開発者の意図しないバックドアがコードに仕込まれ、デプロイされてしまう。
- マルウェアによって、機密情報(APIキーなど)が盗まれ、悪用される。
対策:
- 開発者PCのセキュリティ対策: オペレーティングシステムやソフトウェアを常に最新の状態に保ち、信頼できるセキュリティソフトを導入しましょう。
- 不審なメールやファイルを開かない: フィッシング詐欺などに注意し、不審なメールやファイルは安易に開かないようにしましょう。
- バージョン管理の徹底: Gitなどのバージョン管理システムを利用し、変更履歴を適切に管理しましょう。不審なコミットを発見した場合、速やかにロールバックできるように備えておきましょう。
- リモートアクセスの制限: 開発環境へのリモートアクセスは必要最低限に留め、アクセスする場合は安全な接続方法(SSHなど)を利用しましょう。
これらの対策を講じることで、Jamstackサイトのセキュリティレベルを大幅に向上させ、改竄のリスクを低減することができます。Jamstackの特性を理解した上で、多角的なセキュリティ対策を実践していくことが重要です。
この記事をシェアする
お気軽にご相談ください
会社のホームページが欲しい!名刺がわりになるコーポレートサイトが欲しい!などお気軽にご相談ください。
またパートナー企業をお探しの制作会社様や、フロントエンド開発もご連絡お待ちしております。
最近の投稿
なぜJamstackはセキュアと言われるのか?WordPressとの比較と対策
近年注目を集めるウェブサイト構築アーキテクチャ「Jamstack」。その特徴の一つとして、高いセキュリティ性が挙げられます。本記事では、Jamstackがセキュリティに優れる理由を解説し、広く利用されているWordPressと比較しながら、具体的な対策についても掘り下げていきます。Jamstackが従来のアーキテクチャと比較してセキュリティが高いと言われる主な要因は、以下の点に集約されます。WordPressは非常に普及しているCMSであるため、常に攻撃者の標的となりやすい状況にあります。プラグインやテーマの脆弱性、本体のアップデート遅延、サーバー設定の不備などがセキュリティインシデントの原因となる可能性があります。SQLインジェクションやPHPの脆弱性を利用した攻撃も懸念されます。一方、Jamstackは静的ファイルが中心であるため、これらの攻撃経路は基本的に存在しません。動的な処理はAPIに依存しますが、適切に選定・管理されたAPIサービスを利用することで、ウェブサーバー自体の脆弱性リスクを低減できます。ただし、Jamstackも完全に安全ではありません。利用するAPIサービスのセキュリティ、フロントエンドのJavaScriptコードの脆弱性、ビルドプロセスのセキュリティなどが新たなリスクとなる可能性があります。重要なのは、それぞれのアーキテクチャの特性を理解し、適切なセキュリティ対策を講じることです。Jamstackアーキテクチャは、その特性から従来の動的なウェブサイトと比較してセキュリティが高いと考えられていますが、完全に改竄のリスクがないわけではありません。ここでは、Jamstackサイトが改竄される主な経路と、それに対する具体的な対策を掘り下げて解説します。Jamstackサイトでは、フォームの送信、認証、Eコマース機能、検索など、動的な処理を外部のAPIサービスに依存するケースが多くあります。これらのAPIサービスにセキュリティ上の脆弱性があった場合、そこを足がかりに不正アクセスが行われ、データが改竄されたり、悪意のあるコンテンツが挿入されたりする可能性があります。Jamstackサイトのインタラクティブな要素は、主にJavaScriptによって実現されます。もしJavaScriptコードにセキュリティ上の欠陥(脆弱性)があった場合、クロスサイトスクリプティング(XSS)などの攻撃を受ける可能性があります。XSS攻撃を受けると、悪意のあるスクリプトがユーザーのブラウザ上で実行され、Cookieやセッション情報が盗まれたり、サイトの表示が改竄されたりする可能性があります。Jamstackサイトは、通常、静的サイトジェネレーター(SSG)などを用いて、ソースコードから静的なファイルを生成するビルドプロセスを経ます。もしこのビルドプロセスが侵害された場合、生成された静的ファイルに悪意のあるコードが埋め込まれる可能性があります。Jamstackサイトの静的ファイルは、通常CDN(コンテンツ配信ネットワーク)を通じて配信されます。もしCDNのアカウントが不正にアクセスされた場合、配信されている静的ファイルが改竄され、サイトの見た目が変わったり、悪意のあるコンテンツが表示されたりする可能性があります。開発者のPCや開発環境がマルウェアに感染した場合、意図しないコードがリポジトリにコミットされ、それがデプロイされてしまう可能性があります。これらの対策を講じることで、Jamstackサイトのセキュリティレベルを大幅に向上させ、改竄のリスクを低減することができます。Jamstackの特性を理解した上で、多角的なセキュリティ対策を実践していくことが重要です。
2025.05.08
Jamstack開発の下請けをお探しですか?ブラキオがあなたの強力なパートナーに
Web制作の世界は常に進化しており、新しい技術が次々と登場しています。その中でもJamstackは、より高速でセキュア、そしてスケーラブルなウェブサイトを実現するための革新的なアプローチとして注目を集めています。しかし、新技術の導入は不安や挑戦を伴うもの。そんな時、ブラキオがパートナーとして、皆さんのJamstackにおける挑戦を全力でサポートします。ブラキオは、フロントエンド開発における豊富な実績を持ち、Jamstack開発においても皆さんをテックリードとして支援できます。コーポレートサイトからwebサービスまで、あらゆるフロントエンド開発のお手伝いをします。また、コーディングだけのお仕事も大歓迎です。プロジェクトの成功は、良いコミュニケーションから始まります。ZoomでのオンラインMTGや、Slackなどのチャットツールを通じて、いつでも柔軟に対応させていただきます。まずはお問合せいただければ、お見積もりを含め、具体的なご提案をさせていただきます。Jamstackでのウェブサイト制作は、多くの可能性を秘めています。ブラキオと一緒に、新たな挑戦に踏み出しませんか?あなたのビジョンを現実のものとするために、全力でサポートさせていただきます。
2024.04.10
Next.jsにおけるページ内スクロールの実装ガイド
Next.jsを使用したウェブサイトで、ページ内スクロールを実現したいと思ったことはありませんか?例えば、ウェブサイトのナビゲーションバーに「SERVICE」や「ABOUT」のようなリンクがあり、ユーザーがそれらをクリックすると、ページ内の対応するセクションに自動的にスクロールするといった機能です。弊社の上部にあるメニューがこのページ内スクロールを実装しています。よろしければ試してみてくださいね。まずは、実際に試してみて、その振る舞いを体験してみましょう。このような機能を簡単に実装するためには、というライブラリを利用するのがおすすめです。まずは以下のコマンドでインストールしましょう。そして、以下のように呼び出して使用します。ここでのimport文では、という形でエイリアスを設定しています。これは、という名前がNext.jsの と名前が重複してしまい、混乱を避けるためです。そして、メニューリンクからスクロールさせたい要素への移動を設定するために、その要素にのようなIDを指定します。これにより、ページ内スクロールを簡単に実装することが可能となります。以上がNext.jsでのページ内スクロール実装の基本的な手順です。この方法を試して、ウェブサイトのナビゲーション体験をより良いものにしましょう。
2023.05.14
なぜJamstackでWEB制作の仕事を受けようと思ったのか
私自身もともとWordPressでweb制作の仕事を受けていた。プラグイン依存、CSS設計問題、サーバー代などのコスト面 etc。賛否両論あると思うけど、個人的にはしんどかった。また、業務委託先でReactでサービス開発をずっとやっているのでJamstackでできたらと思っていた。なので、趣味でGatsbyやったりNetlifyCMSやったりして試していたりはしたが、趣味では良いけどクライアントに納品するものとしてと考えると難しいなという印象だった。特に基本が英語なので、どうしても敷居が高くなってしまう。あとはリテラシーが高くないと無理かなとも率直に思った感じ。Jamstackを実際の案件でやりたいけど二の足を踏んでいたという状態だった。そうこうしているうちにmicroCMSの存在を知って「あ、これなら案件でいける」と思い、実際の案件に投入することに決めた。なぜJamstackでWEB制作の仕事を受けようと思ったのかは「microCMS」が比重を多く占めるのだけれど、Jamstack案件をここ数ヶ月で立て続けに3サイト作ったので実際の業務でやったプラクティス的なことをまとめる。フロントエンドエンジニア御用達のprettier、eslint、TypeScriptが使えるの最高。ReactやVueでサービス開発をしたことある人なら問題なくJamstackいける。これはかなりの利点だと思っていて、ある程度フロントをかじった人ならweb制作で受注をして稼ぐことが容易になったと思う。firebase, Amplifyなどがあるけど迷うならNetlifyで良い。デプロイの設定が楽だし迷うこともない。また、お問合せが簡単に作れるのも魅力。ちなみに、firebaseでお問合せを作ろうと思うとCloud Functionsに書かなければいかず有料になってしまう。Amplifyもそんな感じかな??やったことないからわからない。例えばDBに溜め込むとかしたいならfirebaseを選ぶけど、一般的な中小企業のコーポレートサイトならほぼほぼNetlifyで良い。またそういったコーポレートサイトであれば無料で済む。ただ、泣きどころはTokyoリージョンがNetlifyにないため若干遅い。これはゆくゆくは解決されるのではと思っているけど・・・。デプロイの可否をSlackに通知できたり、お問合せがあったらなど各種連携が取りやすいので運用フェーズに入った時に絶対に必要になるから必ず設定すべし2021/01/14 追記どうやら以前の価格改定により無料枠ではSlackやメールなどの通知ができなくなっている。ちなみに、無料枠である私のアカウントはできる。もしかしたら改訂前にアカウント持っていた場合は通知ができるのかもしれない。アカウント持っている方はホスティングしたサイトを選択 > Site settings > Build & Deploy > ページ下部のDeploy notifications > Add notification で確認した方が良い。notificationができるのであれば下記のように選べるようになっている。もし今後アカウントを取得してNetlifyで通知したい場合は「pro」にしなければならない。microCMSのまわし者みたいだけど、まじでmicroCMSが今のところ一番良い日本語だし、UIも日本人にわかりやすく受け入れられやすいどのクライアントにも言われたけど「記事作成したんだけどプレビューできないんですか?」そんなに難しいことをせずに実装できるので絶対に入れるべし`[https://your-service-name.netlify.app/draft/?id={CONTENT_ID}&draftKey={DRAFT_KEY}](https://your-service-name.netlify.app/draft/?id=%7BCONTENT_ID%7D&draftKey=%7BDRAFT_KEY%7D)` を叩くプレビュー用のページがあれば良いだけ。APIのエンドポイントごとの設定なので注意すべしこれやっておかないと「記事更新したのにサイトに反映されてないんですけど!」と連絡来てしまう。私はNextJSでしか開発をしていないが多少の知識があれば満点ないしかなりの高得点は簡単に出る基本的にはlighthouseで採点 > 注意されたとこを直すフローで良いが、service-workerに関してはプラグインを入れればすぐに解決できてオフラインでも閲覧できるようになる。あとは、やはり画像は重いことが多いので、画像サイズには注意する必要がある。画面いっぱいまで画像を広げたい時などは、簡単に済ますなら画質をある程度落としてしまうし、もしくはsrcset属性を使って最適化するように心がける。また、[TinyPNG](https://tinypng.com/)などを使って圧縮もするようにする。これはstg/prdで分けて開発をしにくい点にあると思う。プレビュー機能の実装である程度は補えるとしても、開発者としてはstgは欲しいなと思う。graphcmsではenvironment-endpointsとして `master` と `dev` でエンドポイントのだしわけが可能なよう。が、残念ながら思いっきり英語なので実務では難しい。(microCMSさんお願い!!!)## 個人的に今後やっていきたいこと今後は案件をもっと獲得できるようにするつもり。また、それに合わせて外注も増やさざるをえないかなと思っていて、外注しても一定の品質が保てるようにしたいので開発フローの整備等をしていきたい。
2023.04.20
【それでもCSSは破綻する】 CSSの設計手法と書き方を考える
それでもCSSは破綻する。書くこと自体はとても簡単なCSSですが、その一方で、CSSの設計が簡単に破綻してしまいます。破綻しないためにCSSの設計手法と書き方のノウハウをご紹介できればと思います。以前の記事とかぶるとこも結構あるのですが、全体的にまとまっているので特に初心者〜中級者の方に見てもらえたら嬉しいです。これは極端な言い方ですが、今まであったデザイナーでCSSできると言った人で本当にできる人あまりいないです。どちらかというとCSSは難しいと言った人の方ができる方が多いです。CSSが簡単だと思われてしまう要因の一つがCSSを書くこと自体は言語としてはかなり簡単な部類に入ります。このようなコードをツラツラ書いていけばHTMLに対してスタイルをつけられますよね。書き方としてはごくごくシンプルです。シンプルであるがゆえに管理するのが難しいのです。前置きはこれくらいにしてここから先はCSSがいかに難しいことについて触れていきたいと思います。何が難しいかと言うと一つだけです。そう「破綻」しやすいんです。では、「**CSSの破綻**」とはなんでしょう?例えば「新しくスタイルを書いたのに適用されない」とか「!importantが乱用されている」とかが挙げられます。破綻というとなかなか難しいですが、複数人で複数人で同じCSSファイルを編集していると起こりやすいです。具体的には・・・似たようなコードもしくは同じコードが重複してしまっている状態。セレクタ名が同じものが乱立している状態。上記を解消するために詳細度を深くしてなんとかスタイルを割り当てている状態だったり「!important」を乱用している状態。上記のようなことが起きているようなCSSのコードは完全に破綻しています。では**「破綻のしない」良いCSSのコード**ってどんなのなんでしょう。よく言われるのが・・・セレクタ名には.aとか.cなど自分だけがわかるものは基本NGです。あとは、クラスセレクタに日付が書いてあったり、「new」とか書いてあるのが見かけることがあります。もうこれは末期ですね。おそらく破綻してます。例えばタイトルならば.title、バナーを配置する場所なら.banner-areaなどクラス名を見ただけでなんとなくどんな使い方がされているかわかるものがいいです。サイト内のどこに配置しても大丈夫なように作られている方がいいでしょう詳細度と関連してくるのですが、詳細度を深くしすぎるとのちのちスタイルの上書きする際に困ります。例えばタイトルであれば、文字の大きさの違うパターンや色違いパターンなどが作りやすい方がいいです。ポイントは5つあります。一つずつご紹介します。まとめられるものがあるならばまとめた方がいいですね。ファイルサイズ節約にもなります。運用の時に付け足す時もそっとまとめてあげるといいですよね!!下記のコードは実際に僕が出くわしたコードです。見た時正直びっくりしました。以前担当していた方が書いたんでしょうけど、同じスタイルじゃん・・・。なんでこうなったかは理解に苦しむんですが、これもクラス一個で各ページ使い回せばいいだけですよね。idセレクタ、クラスセレクタ、タイプセレクタと異なるセレクタが混在していると、マークアップが変わった時に対応ができません。こちらはBEMという書き方をしていますが、後ほど詳しくご紹介します。下記の「Bad」のやり方はわかりやすいっちゃわかりやすいんですが、再利用性に欠けます。というのもh1にしか使えないので、たとえば、マークアップ的にh2の方が適切の場合はスタイルを適用できないですね。cssのテクニックとして「body」タグにクラスをつけてコンテンツのスタイルをページごとに変更したりします。でもこれって「body」タグにクラスに依存しすぎてしまっていて再利用しづらいし、拡張もしにくいですよね。たとえば、デフォルトのヘッダーとメニュー詳細ページでヘッダーのスタイルを変更したい場合、以下のような書き方をします。でもこれって、運用していくなかで新しくページを追加して(LPとかね)詳細ページと同じヘッダーでって場合どうしますか?パターンとしてはdetailと同じスタイルをLP用につくるか、LPのbodyにdetailを付与ですよね?後者の場合ってめちゃくちゃ気持ち悪いですよね。detailページでもないのにbodyにdetailって・・・このパターンでCSSを書くとページが増える度にセレクタを書き加えなければいけませんね。これをBEMでセレクタを書くとめっちゃわかりやすくなります!!ポイントはページ単位で切り分けないでプロパティごとに切り分けた方がいいかなと思います。これまでのことを気をつけても更新作業などをしていればほぼ100%破綻します次に紹介するのは**CSSの設計**です。自由に書けるCSSだからこそルールを設けてみんなで守りましょうというものです。実はCSS設計の手法ってたくさん存在しています。それぞれ特徴があったりしますが基本的な考え方としては**破綻のしにくいCSSのコード**を書きましょうというのは変わりません。自分のやりやすいものやそのWEBサイトにあったものを選ぶのがいいと思います。今回は「**FLOCSS**と**BEM**」をご紹介します。FLOCSSというのは、日本人が考えたCSSの設計手法です。実は、「」という本を書いた谷さんという方が考えたものです。BEMは、セレクタの書き方の考え方です。賛否両論ありますが、HTMLのタグを見ただけでどんなスタイルかわかりやすいというメリットがあります。デメリットとしてはセレクタが長くなりがちです。まずはFLOCSSの基本としてサイトのCSSディレクトリの中身を分けます。これで、どこにどんなスタイルを書くかわかりやすくなりますね。ちなみに、今回はSassを使っている想定にしています。これはなぜかと言うと`import`する際にCSSの場合と言うように書くのですが、このimport文だとサイトの読み込みに時間がかかってしまうんですね。そこでSassを使うと実際にページに読み込まれる時にはいimportし終わっていて一つにまとめられたCSSファイルが生成することができます。importの書き方はと言うようにできます。Sassを使う方がメリットもたくさんあるので興味のある方はぜひ使ってみてください。横道にずれてしまいましたが、ディレクトリの構成は以下のようになります。ここはbase.scssやreset.scssなどサイト全体の下地になる部分を書きます。ここはサイトの基本レイアウトを書く場所です。例えばheaderやfooterなどここではサイト全体で再利用性の高いスタイルを書きます。componentは再利用性の高いパーツを書く場所です。特徴としてはどんなサイトでも大概あるパーツを書くことが多いです。例えば、ボタンスタイル、タブスタイル、見出しスタイルなどprojectも再利用性の高いパーツを書く場所なんですが、componentととの違いは、このサイト特有のパーツの場合はここに書きます。例えば、グラフスタイル、ドロップゾーンなどここはいつでもどこでも使えるスタイルです。基本的には1セレクタに1プロパティになることが多いです。app.scss内に各ファイルをimportします。FLOCSSではなんの属性なのかHTMLのコードを見ただけですぐにわかるように接頭辞をつけることを義務付けしています。こちらはjQueryなどと併用する時によく使われます。例えばボタンを押すと出てくるUIなどは.is-showなどのクラスセレクタをつけたりします。.js-はjs(jQuery)と関わっているのか表す接頭辞です。これはJSで動くなど何かしら操作したときなどにセレクタで呼び出しますが、その際はスタイルで定義されたセレクタを使うのではなく必ず「.js-hoge」などで行うことを義務付けします。そうすることで文書構造、スタイル、スクリプトを完全に分離することができてHTMLを見るだけで何が行われているのか、残さなければいけないセレクタなのかわかりやすくなります。idセレクタとクラスセレクタが基本的にはよく使われるセレクタですが、idセレクタはあまり使わない方がいいです。実はidセレクタには問題点があります。というのも詳細度と関連してくるのですが、基本的にidセレクタは詳細度がかなり強いです。なので、スタイルを上書きしなければいけない場合にどうしてもそれ以上の詳細度にしなければいけません。さらに、1ページに一回しか使えないので、再利用性にかけます。先ほどのdrawerのコードであまり見かけないセレクタの書き方がありました。これが実はBEMの書き方です。そしてBEMのセレクタの書き方には3つの要素でできています。その頭文字をとってBEMと言います。これはdrawerなどのパーツなどの塊を表します。FLOCSSではこのBlockごとにCSSのファイルを書いていくのがいいでしょう。これはBlock内に存在する要素を表します。drawerで言えばボタンやコンテンツですね。これは状態を表します。例えば、背景の色が違うパターンなど注意!.is-や.js-とは使い方が違います。セレクタでBlockとElementのつなぐ方法はアンダースコアを二つつけます。Modifierの前にハイフンを二つつけます。先ほどもご紹介したようにBEMのデメリットはセレクタが長くなりすぎます。こういったケースが頻発するのでcomponentを小分けしていくといいです。そうすると小さい単位のcomponentごとに各componentを組み合わせて使いまわすことが可能になります。ここまでやっても**CSSは破綻**します。そうですねこれでも80%以上の確率で破綻します。複数人いる場合には特に!!そのサイトやサービスに置けるルールを記します。記載する内容は作る人や企業によってまちまちですが、基本的なものとしてはよく使われるcomponentに関してはコードをまとめておくといいです。下記のは僕が作ったフレームワークのものですが、なんとなくの雰囲気はつかめるかなと思います。[Document](http://takumi0901.github.io/flanky/)あくまで「しにくい」です。せっかく作ったガイドラインを無視したりする人がいれば「破綻」します。大体の企業では何かサービス作るにあたってあらかじめガイドラインが設けられていることが多いです。なので、そのサービスに途中から参加する場合などはガイドラインを読み込み、実際のCSSコードを追って理解を深めるのがいいと思います。
2023.04.19