はじめに
今日では、Web 上で素晴らしいことを実現できます。 すべてのデバイスで実行される Web エクスペリエンスの構築、あらゆる種類のメディア コンテンツの取り込み、複雑な計算の実行が可能です。 さらに、ネイティブ アプリケーションのように見えるアプリを作成することもできます。
今、Web 開発を始めたいとお思いの方は、余りにも多くのオプションに目が眩むかも知れません。 このモジュールでは、Web サイトの基本的なコンポーネントと、Web 開発を開始するために使用できるいくつかのツールについて学習します。 HTML、CSS、JavaScript を一緒に使用して Web サイトを構築します。その後、ブラウザーで開発者ツールを使用して、何が起こっているかを理解します。
この基本的な知識を備えていると、将来 Web サイトを構築するときに意思決定をより適切に行うことができるようになります。 たとえば、Web サイトを構築するために JavaScript フレームワークを選択すべきか、または独自の JavaScript 関数を作成すべきか、などです。
まずは、目標を見てみましょう。
シナリオ
あなたは Web 開発者であり、会社の Web サイトをより広範囲の顧客にアピールするようにすることを求められているとします。 顧客が Web サイト上で自分のエクスペリエンスをカスタマイズできるようにするために、ライト テーマとダーク テーマのサポートを追加することを決定しました。 CSS を使用したテーマのサポートをデモンストレーションする小さな概念実証 Web サイトを作成し、それらのテーマ間を切り替えるための JavaScript 関数を記述します。
完了すると、ダーク テーマを選択したときに、Web サイトは次の例のようになります。
Web ページの内容
コンテンツ、スタイル、および対話型のロジックは、それぞれ HTML、CSS、および JavaScript ファイルに分割されます。 最新のプログラミングにおける設計原則は、"関心の分離" です。 関連を分離する理由は多数ありますが、そのうちの 2 つは単純化と再利用です。 たとえば、CSS を使用して HTML 要素をスタイル設定することにより、HTML コードを単純化できます。 外観を各要素内にコーディングする代わりに、ページの複雑さに関係なく、CSS スタイルをページ内のすべての要素に適用できます。 さらに、複数の HTML ページを 1 つの CSS ファイルにリンクすることもできます。これは、Web サイト全体にわたって整合性のある外観を簡略化するために役立ちます。