デジタル定義集
このページの目的は、技術用語の定義と関連技術の説明を提示することです。想定される読者は、開発ツール・手法に詳しくない方や、about.gitlab.com のような項目に取り組む際の私たち独自の要件に詳しくない方です。
ページ
ページとは何ですか？
ページとは、最終またはほぼ最終の成果物であり、テンプレートから生成されたものの一意なインスタンスです。このページは、本番環境でアクセス可能な URL が想定されています。
テンプレート
テンプレートとは何ですか？
テンプレートは、特定の種類のコンテンツで使用される、データ駆動の再利用可能な設定です。テンプレートは、ブロックの組み合わせ選択、ブロックの設定、ページオプションの設定で構成されます。
例: すべてのブログ記事は同じテンプレートで生成されます。
関連用語: レイアウト。
テンプレートはなぜ重要ですか？
- テンプレートはセットアップを素早く複製することを容易にします。
- テンプレートは設定をコード化することで設定エラーを減らします。
ブロック
関連用語: partial、include、フラグメント、organism、molecule。
ブロックとは何ですか？
- ページのセクションで、できるだけ小さく保たれます。通常はページを横切るレイヤーケーキの水平スライスですが、サイドバーの一部であることもあります。
- ブロックは、プレゼンテーション、目的、必要な機能は同じままで、コンテンツ（文言、画像、リンクなど）を更新できるセクションです。
- ブロックはしばしば、共通の目的の周りに組織化された多くの要素やコンポーネントから構成されます。
- ブロックは異なる構成での再利用を容易にするための設定オプションを持つことがあります。例えばタイトルブロックを持ちたい場合があるので、それを無効にするオプションがあるかもしれません。
例: ゲートコンテンツ用フォーム。
ブロックが再利用可能であることはなぜ重要ですか？
- 更新を容易にするために、コードは再利用可能である必要があります。再構築が必要な更新は簡単ではありません。
- 同じものを何度も実装することはリソースの効率的な利用ではありません。
- コードベースをきれいで、ナビゲートしやすく、理解しやすく保つために、SSOT を維持することが重要です。
- 同じコードが複数の箇所で何度も実装されると、バグの可能性が高まります。ある箇所にバグがあって他の箇所にはない、ということが起こり得ます。
- コード構築の多くはページ上には見えません。これにはパフォーマンスの最適化、トラッキングの設定、画像/動画のフォーマットなどアセットの準備、レスポンシブビューやレイアウトの構築、人間の生理学（タッチスクリーン上の指、目と知覚など）が含まれます。これらすべてのテストと構築には時間がかかるので、コードを可能な限り再利用して削減することが重要です。
ブロックが単一目的であることはなぜ重要ですか？
- 更新を容易にするために、コードは操作しやすい必要があります。
- 各ブロックの目的が明確に定義されていることは、ページの目標を強化し、ナビゲーションとコンバージョンの目標を支援します。1 つのブロックが 5 つのことをやろうとしたり、ページに同じことをする 3 つの異なるブロックがあったりすると、管理が難しくなります。
- 重複したブロックがページにあると、エンドユーザーが混乱する可能性があります。
- ブロックが大きくなりすぎると、コードを理解しづらくなります。ブロックを単一目的に保つことで、ブロックを小さく保ちます。
- ブロックの変更が増えるほど、ブロックのパフォーマンスを追跡することは難しくなります。
- 距離を置いて見たとき、ブロックがすべて複数の異なる目的、時には重なる目的を持っていると、どのブロックを使うべきか判断するのが難しくなります。「このブロックを使うべきか、あちらのブロックを使うべきか？」
コンポーネント
関連用語: molecule、モジュール
コンポーネントとは何ですか？
コンポーネントは概念的にはブロックに似ていますが、しばしばかなり小さいものです。コンポーネントは要素を組み合わせて、単一の目的を持つ小さな項目を作ります。
例: 検索ボックスはテキスト入力要素と送信ボタン要素から構成されます。
コンポーネントはブロックとどのように違いますか？
コンポーネントとモジュールは、主に大きさと目的が異なります。モジュールの単一の目的は、誰かにニュースレターに登録してもらうことかもしれません。これには説明、タイトル、グラフィック、マージン、パディング、その他の要素が含まれるかもしれません。コンポーネントの単一の目的は、テキスト入力でメールを集めてボタンで送信することでしょう。コンポーネントはモジュールが持つコンテキストに欠けることが多いです。
コンポーネントはなぜ重要ですか？
- 上述のとおり、ブロックとコンポーネントは概念的に似ています。コンポーネントはブロックと同じ恩恵を受けます。
要素
関連用語: atom
要素とは何ですか？
要素は最小の再利用可能なものです。
例: ボタン。
要素はなぜ重要ですか？
- 再利用可能な要素は、一貫したアイデンティティを構築することによってブランドを強固にします。
- 要素はパーツのキットを作ることで効率を促進し、同じものを何度も作る必要がなくなります。
- 要素は可能性に制約を作ることで、予測可能な結果を促進します。
コンテンツ管理システム
CMS とは何ですか？
CMS（コンテンツ管理システム）は、デジタルコンテンツの作成と修正を管理するために使用されます。通常、CMS には次のものが含まれます:
- エディターインターフェース（WYSIWYG）。コンテンツ制作者がコンテンツを作るためにウェブサイトの構築方法を知る必要がないように。
- エディターインターフェースからのデータを保存する永続化層。
- 生のコンテンツとテンプレートを組み合わせてページを生成するビュー生成器。
- （オプション）ユーザーリクエストに直接応答し、リクエストに基づいてページをカスタマイズするサーバー。
CMS でないもの
- CMS は要件を定義しません。
- CMS はレイアウトを作成しません。
- CMS はモジュールを作成しません。
- CMS はテンプレートを定義しません。
- CMS はベストプラクティスを保証しません（推奨することはできます）。
ヘッドレス CMS
ヘッドレス CMS とは何ですか？
ヘッドレス CMS は、通常 2 つ以上の別々のインターフェースを介して、ビジネスロジックを表示ロジックから抽象化する CMS です。コンテンツエディターはプログラミングと対話する必要がなく、プログラマーはコンテンツと対話する必要がありません。非ヘッドレス CMS では 2 つのインターフェースが絡み合っています。
静的生成
SSG（static site generation/generator）とも呼ばれます。
静的生成ウェブサイトとは何ですか？
静的ウェブページは、保存されたとおりにユーザーのウェブブラウザーへ配信されます。これは、データ修正のような何かに対するエンドユーザーのリクエスト後にウェブアプリケーションが動的に生成する動的ウェブページとは対照的です。
SSG の利点
- 多くの場面でエンドユーザーにとって大幅に高速。
- 開発者にとって扱いやすい。
- クラウドシステムへの依存が少ない。
- セキュリティの向上。
- ホスティングコストが低い。
SSG の難点
- 動的機能はクライアント側で実行する必要があります。
継続的インテグレーション
継続的インテグレーションとは何ですか？
継続的インテグレーションとは、変更がリビジョン管理されたブランチにマージされるたびに、自動的にライブリリースされることを意味します。これは手動リリースプロセスとは対照的です。この自動リリースは、オペレーティングシステム、ネットワーク、サーバー技術など、いくつかの追加プロセスや多数のパズルピースに依存します。
パイプライン
パイプラインは、特定の順序で完了する必要があるタスクのグループです。X が起こる前に、Y も起こる必要がある。これが単一のパイプラインの例です。別のパイプラインは、X や Y が先に起こる必要がない場合、並行して処理できます。パイプライン A が Z を先に必要とする場合、Z と同じパイプラインで実行することも、Z の後に開始する 2 つ目のパイプラインとして実行することもできます。
自動テスト
ビルドが成功するためには、コンポーネントが壊れていないことを確認する必要があります。これは、ビルドが開始する前に自動テストがパスする必要があることを意味します。とはいえ、テストに関係なくビルドが失敗する原因となる予期しない状況もあります。
自動テストはビルドやデプロイの前、最中、後のいつでも発生し得ることに注意してください。
ビルドフェーズ
項目がマージされて自動化がパスすると、関連するコードはサーバーへリリースするためのアプリケーションをビルドする必要があります。これは SSG かもしれませんし、CMS かもしれませんし、サーバーやオペレーティングシステムへの更新かもしれません。あるいはそれらの組み合わせかもしれませんし、本当に何でもあり得ます。
ビルド時間は、変更される項目の数、それらがどのように変更されるか、いくつのものがキャッシュされているか、いくつのサードパーティーがリソースのためにポーリングされるか、サードパーティーの応答の速さ、利用可能なクラウドリソースの数によって異なります。
デプロイフェーズ
ビルドはテストまたはライブリリースのために、ある場所へデプロイされる必要があります。
デプロイ時間は、デプロイされるデータの量、データ転送速度、デプロイ先の数によって異なります。
デプロイ後
ビルドがデプロイされたからといって、それがライブであるとは限りません。他のプロセスが起こる必要があるかもしれません。例:
- 検索エンジンインデックス。
- データを処理または更新するための cron などのスケジュールされたタスク。
- 画像などのキャッシュの更新。
- CDN 全体への伝播。
CI の難点
- 物事を素早く更新する能力は、ビルド時間とパイプラインの信頼性に依存します。
クライアントサイドとサーバーサイド
クライアントサイド
エンドユーザーのウェブブラウザーがクライアントサイドのタスクを担当します。サーバーがエンドユーザーへドキュメントを配信した後は、彼らのコンピューター上のドキュメントを修正するのは彼らのコンピューター次第です。あるいは、サーバーにサーバーサイドでドキュメントを修正してもらうリクエストを送ることもできます。
サーバーサイド
エンドユーザーのコンピューターで行われないものは、しばしば見えないウェブサーバーで処理される必要があります。処理されると、サーバーはページの新しいバージョンをエンドユーザーに送るか、新しい場所へルーティングします。
CDN
CDN とは何ですか？
CDN（コンテンツ配信ネットワーク）は、サーバーから遠く離れているかもしれない人へアプリケーションやリソースを高速に配信することを容易にする方法です。CDN はそれらのページを要求するエンドユーザーの物理的位置に近いところにウェブページのローカルコピーをキャッシュします。
CDN の難点
- デプロイ後、ライブサーバーから CDN 内のすべての宛先へすべての変更をコピー、つまり伝播するのに時間がかかります。
- CDN 上のいかなるエンドポイントも破損したり、間違ったリソースを提供したり、期限切れのキャッシュを提供したりする可能性があります。適切なロギングとエンドユーザーのバグレポートがないと、この種の問題を追跡するのは非常に難しくなります。
モノレポ
モノレポとは何ですか？
モノレポ（mono-repository の略）は、多くの異なるプロジェクトのコードを単一の場所に保存します。これは、田舎で別々の家に住んですべてを自分で責任を持つ（芝刈り機 1 台 vs 20 台など）のではなく、いくつかの家族の間で利益と責任を共有できるコンドミニアム複合施設に住むのに似ています。
なぜモノレポか？
- SSOT（信頼できる唯一の情報源）を促進するため。
- リソースとビルドシステムの共有を促進するため。
- 依存関係管理を簡素化するため。
- 1 か所での変更が複数のシステムに利益をもたらすため。
