Webサイトを作成する際、動的な動きを加えるためには、HTMLだけでなく JavaScriptの知識が不可欠です。本記事では、HTMLの取得や生成に役立つJavaScriptの使い方について解説します。
これからサイト制作を始めたい方や、JavaScriptに興味を持ち始めた方はぜひ参考にしてみてください。
HTMLとJavaScriptについて
HTMLとJavaScriptにはどのような違いがあるのでしょうか。まずは、HTMLとJavaScriptの詳細について見ていきましょう。
HTMLとは
HTML（HyperText Markup Language）は、Webページの構造を記述するためのマークアップ言語です。
見出し、段落、リンク、画像など、Webページで表示される要素はHTMLタグを用いて定義されます。
各要素は、タグと呼ばれる角括弧で囲まれたテキストで表現されており、そのタグに基づいてブラウザがページを描画します。
HTMLは、Webページのレイアウトや構成における基盤です。
ただし、HTML単体には動作性やデザイン性はなく、サイトの完成度を上げていくためにはCSSやJavaScriptといった、ほかの言語の使用が必要です。
JavaScriptとは
JavaScriptは、Webページに動的な動作を追加するためのプログラミング言語です。
例えば、ユーザーがボタンをクリックするとポップアップウィンドウが表示されたり、フォームに入力する内容が間違っていたらエラーが表示されたりといった動作は、JavaScriptで実装されます。
JavaScriptはブラウザ上で実行され、HTMLやCSSと連携することで、インタラクティブな操作性をユーザーに提供可能です。
また、JavaScriptはもともとクライアントサイドの言語でしたが、Node.jsの登場によりサーバーサイドでも活用できるようになり、アプリ開発やシステム開発など、Web開発全般においてとても重要な言語の一つとなっています。
なお、JavaScriptについてより詳しく知りたい方は、以下の記事を参考にしてみてください。JavaScriptの活用方法や実際の使い方について解説しています。
HTMLからJavaScriptを読み込む方法
HTMLからJavaScriptを読み込む方法として以下の2つがあります。
- インラインスクリプト
- 外部スクリプト
これらの読み込み方式の違いは以下の表のとおりです。
| 項目 | インラインスクリプト | 外部スクリプト |
| 記述場所 | HTMLファイル内の<script>タグの中に直接記述する。 | JavaScriptを別ファイルに記述し、HTMLから<script src=”ファイル名”>で読み込む。 |
| 可読性 | コードがHTMLと混在するため、可読性が低くなりやすい。 | HTMLとJavaScriptが分離されているため、コードの可読性が高い。 |
| 再利用性 | ほかのページで再利用しにくい。 | 同じスクリプトを複数のHTMLファイルで再利用可能。 |
| 管理のしやすさ | コードが複雑になると管理が難しくなる。 | 大規模なプロジェクトでも管理が容易。 |
| 用途 | 簡単なスクリプトを使用する場合に適している。 | 大規模なサイト制作をするに場合に適している。 |
インラインスクリプトと外部スクリプトの違いについて詳しく見ていきましょう。
方法①インラインスクリプト
インラインスクリプトは、HTMLファイル内に直接JavaScriptコードを埋め込む方法です。
scriptタグを使って、JavaScriptのコードをHTMLファイルのheadタグ、もしくはbodyの終了タグ直前に記述します。
記述が長くないような簡単なスクリプトを実測したい場合は、インラインスクリプトを使うことが一般的です。
この方法では、別途スクリプト専用のファイルを作らなくてよいため、手間がかからないのが魅力です。
しかし、記述が長くなるとHTMLファイルのみでは管理がしづらくなるので、大規模なサイト制作の場合はファイルを分けて管理するようにしましょう。
方法②外部スクリプト
外部スクリプトは、JavaScriptコードを別のファイルに分離して記述し、それをHTML内で読み込む方法です。
外部スクリプトを利用する際は、<script src=”ファイル名.js”></script>という形式でHTMLのheadタグ内、もしくはbodyの終了タグ直前に記述します。
ファイル名を指定する際は、パスが間違っていると読み込みができないので、注意しましょう。
外部スクリプトはインラインスクリプトとは異なり、外部ファイルとしてJavaScriptコードを管理するため、コードの再利用や管理がしやすいのが特徴です。
特に大規模なプロジェクトでは、外部スクリプトを利用することが一般的です。
JavaScriptでHTML要素を取得する方法
JavaScriptでHTML要素を取得すれば、文字列やスタイルをイベントの発生によって自由に書き換えられます。JavaScriptでHTML要素を取得する方法について見ていきましょう。
idの取得
JavaScriptで特定のHTML要素を操作するためには、その要素をメソッドを使って取得する必要があります。
その方法の1つが、要素に付けられた「id属性」を使って取得する方法です。
idはHTML文書内で一意である必要があるため、特定の1つの要素を確実に取得するのに適しています。document.getElementById(“id名”);というメソッドを使えば、そのidを持つ要素にアクセス可能です。
取り出した要素はconsole.logで実行できます。このメソッドは、ボタンをクリックした際に特定の要素の文字列を変更したり、スタイルを変えたりなど、さまざまなシチュエーションで利用されます。
classの取得
HTML要素にクラス属性を付与すると、同じクラス名を持つ要素がグループ化されます。
JavaScriptでは、document.getElementsByClassName(“クラス名”);を使って、同じクラス名を持つ要素をまとめて取得可能です。
このメソッドは配列のように扱うことができ、同じクラス名を持つ複数の要素を一括で処理する際に便利です。
例えば、複数のボタンを同じデザインや動作にしたい場合、クラス属性でそれらの要素をグループ化し、document.getElementsByClassNameで一括取得することで、一度に処理を施せます。
JavaScriptでHTMLを生成する方法
JavaScriptを使えば、既存のHTML要素に新たな要素を動的に追加できます。これを行う際に使用されるメソッドがdocument.createElement()です。
このメソッドを使うと、新しいHTML要素をJavaScript側から生成できます。
そして、appendChild()メソッドを使って、作成した要素を特定の場所に追加することで、HTMLに新しい要素を追加可能です。
また、文章を生成したい場合は、textContentメソッドで追加しましょう。これにより、ボタンをクリックした際に新しい段落がページに追加されるというような操作を実現できます。
うまく活用することで、ユーザー操作に応じたインタラクティブなサイト制作を行えるでしょう。
サイト制作に必要なHTMLとJavaScript以外のスキル
サイト制作はデザインの作成から構築、動きの実装まで一人で行う場合も珍しくありません。
そのため、サイト制作をするうえで、HTMLやJavaScript以外にも以下のようなスキルが必要です。
- CSS
- デザインソフト
これらのサイト制作に必要なスキルについて詳しく見ていきましょう。
スキル①CSS
CSS（Cascading Style Sheets）は、Webページのデザインを作成するためのスタイルシート言語です。
HTMLで定義されたコンテンツの見た目を調整し、フォントや色、配置をコントロールする役割を果たします。
CSSを使うことで自由にデザインを作れるため、CSSの出来によってサイトの見た目が大きく異なります。
また、CSSのメディアクエリを活用することで、見ているデバイスの大きさによってデザインを変えられるレスポンシブデザインの実現も可能です。
さらに、簡単な動きであればanimationプロパティを使って、CSSだけでも実装できるという特徴も持っています。
このように、CSSはHTMLと並んでサイトを作るうえで欠かせない言語です。
スキル②デザインソフト
サイト制作において、Webサイトの仕上がりを事前に視覚化しておくために必要なのがデザインソフトです。
PhotoshopやFigmaなどのツールを使ってデザインカンプを作っておくことで、サイトの制作時にレイアウトや配色、フォントサイズなどを確認しながらデザインを構築できます。
これにより、実際にコーディングを始める前にデザインの全体像を把握できるため、開発の効率を高められます。
また、クライアントやチームメンバーとデザイン案を共有し、フィードバックをもらいながら進めることができる点も大きなメリットです。
さらに、サイト内で使用するロゴや装飾用のアイテムなどもデザインソフトで作られるのが一般的です。
特に、AdobeのIllustratorは拡大・縮小しても画質の劣化がないベクター画像を扱うソフトのため、ロゴやイラストの作成に向いています。
以下の記事では、Illustratorの練習方法や上達のためのコツについて解説しています。ぜひこちらもあわせてご覧ください。
JavaScriptを効率的に習得するなら
JavaScriptを効率的に習得するには、基礎をしっかり理解しておくことが重要です。入門書やオンラインツールで基本的な構文や文法を学び、その後は実際に作品を作成しながら実践的に習得していくとよいでしょう。
また、スクールに通ったり、講座を受講したりしてプロに知識を教わるのもおすすです。自分に合った学習方法を見つけることで、着実にスキルは上達していくでしょう。
HTMLとJavaScriptについてのまとめ
今回は、HTMLとJavaScriptを使ったWeb開発の基本について解説しました。
HTMLはWebページの構造を定義し、JavaScriptはそのページに動的な動きを加えるための言語です。
JavaScriptを使えば、HTML要素を取得したり生成したりもできます。
また、サイト制作をするにはHTMLやJavaScript以外にも、CSSやデザインソフトのスキルが不可欠です。
プログラミング言語であるJavaScriptは、このなかでも難易度が高い部類に入るので、まずはHTMLやCSSを学んでから、本格的な学習に入るとよいでしょう。
