「Hello, Wolrld!」
新しいプログラミング言語を学ぶとき、一番初めにその言語のプログラムで「Hello, World! 」と画面に出力するのが、プログラマーの間では約束事のようになっています。
HTMLでもHello, World! を出力することができます。HTMLで作成されたテキストはブラウザで表示を確認することができます。
（なおHTMLは正確にはプログラミング言語ではなく、マークアップ言語です。）
この記事では、HTMLでHello, World! を出力させる方法について、解説していきます。ファイルやテキストエディタの準備、出力方法など、手を動かしながら基本中の基本を学習することができます。
この記事のゴールは、「HTMLで作成したテキストをブラウザに表示させること」です。
いっしょに学習していきましょう。
- HTMLでHello, World! を出力する方法
プログラミング学習でこのような経験はありませんか？
- 目標に向けて何を学べば良いかわからない
- 調べても解決策が見つからない
- 現場レベルのスキルが身につくのか不安
これらの悩みは、学習環境を整えることで全て解決することができます。
ZeroPlus Gateでは、30日間無料で最適な学習環境を提供しています。
- なんでも相談できる専属メンター
- いつでも技術相談ができるプロ講師
- 元IT企業CTO監修のカリキュラム
条件なしでこのレベルの環境を無料で提供しているのはZeroPlus Gateだけです。
ただし、無料サービスの提供には参加者の数に制限があります。
少しでも興味がある方は、以下のリンクからサービスの詳細をご覧ください。
HTMLとブラウザの関係
そもそもHTMLとはHyper Text Markup Languageの略称で、ホームページ作成のためのマークアップ言語です。
HTMLで作成されたテキストは、ブラウザで確認することができます。ブラウザとは、例えばGoogle ChromeやSafari、Microsoft Edgeなどホームページを閲覧するためのツールのことです。
インターネット上で公開されているホームページのほとんどは、HTMLで作成されています。
HTMLで作成したテキストは、ChromeやSafariなどのブラウザで表示するため、HTMLとブラウザは切っても切れない関係にあります。そのため、Webにおける開発を行ううえでHTMLを学ぶことは非常に重要です。
プログラミング言語とマークアップ言語
- プログラミング言語：コンピュータに命令をする言語（例：JavaScript、C、Javaなど）
- マークアップ言語：文書に意味を持たせる言語（例：HTML、XML、XHTMLなど）
HTMLでHello, World! を出力する
HTMLでHello, World! を出力していきましょう。そのために必要なものは次のとおりです。
- テキストエディタ
- ブラウザ
テキストエディタの準備
テキストエディタは、プログラミングで必須のツールです。エディタにはサクラエディタやAtomなどさまざまな種類があります。ここでは「Visual Studio Code (略称VSCode)」を推奨しています。
テキストエディタの準備ができたら起動しましょう。
ブラウザの選定
HTMLで作成したテキストはブラウザで表示させることができます。ブラウザにはさまざまなものがありますが、有名なものは次の4つです。
- Google Chrome
- FireFox
- MicroSoft Edge
- Safari
使うブラウザはどれでも問題ありませんが、ここではデベロッパーツールが便利なChromeを推奨します。この記事ではデベロッパーツールについてあまり触れませんが、ChromeはWeb制作でよく使われるブラウザなので、慣れていきましょう。
HTMLファイルを用意し、Hello, World! を出力
VSCodeを起動したら、HTMLファイルを作成します。ファイル名は任意で、拡張子は「.html」となります。ここでは「index.html」で作成します。
index.htmlをVSCodeで開いたら、次のように記述します。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
Hello, World!
</body>
</html>記述したindex.htmlを保存します。ブラウザのChromeを起動し、保存したindex.htmlファイルをブラウザ上にドラッグアンドドロップすると表示できます。
出力結果
これだけの記述でブラウザにHello, World! を出力させることができます。先ほどのindex.htmlの構造は以下のようになっています。
どうしてHello, World! なの？
どのプログラミング言語（マークアップ言語含む）でも、学習し始めて最初にやる風習となっているのが、画面にHello, World! と出力することです。
Hello, World! の言葉自体には特に意味はありません。「テキストを出力する」という、プログラミング初学者が最初にやる課題として使われることが多いです。ブラウザに表示されているのはbodyタグの中に記述したテキストのみですが、index.htmlにはその他にもさまざまな記述をしました。
<!DOCTYPE html>は、ファイルがHTMLであることを宣言するものです。HTMLのいわゆるおまじない・お約束みたいなものと思ってだいじょうぶです。
<head>～</head>の中の記述は、いわゆるメタタグと呼ばれるものを記述したり、ファイルのパス情報などを記載してファイルを読み込んだりなどができます。
ブラウザでは通常見られないさまざまな情報を記述するエリアとなります。なお、メタタグを含めたHTMLのソースコードは、Chromeのデベロッパーツールで確認することができます。
<body>～</body>の中に記述したものがブラウザに表示されます。bodyタグの中にHello, World! と記述したので、ブラウザにもそのまま表示された形です。テキストを変更すれば、変更したテキストがブラウザに表示されます。
流れを整理すると、次のようになります。
- テキストエディタを起動し、HTMLファイルを用意。
- HTMLファイルにコードを記述し、ブラウザで表示。
今回の一連の流れはWeb制作の超基本の流れとなりますので、必ず身に付けましょう。実際の制作では、HTMLファイルの他にも画像ファイルやJavaScriptファイル、CSSファイルなどさまざまなファイルを扱うことになります。
まとめ
HTMLでHello, World! を出力する方法について解説しました。マークアップ言語であるHTMLは、ブラウザに表示するために必要な言語です。今回で、「ファイルの用意からブラウザにテキストを表示する」ところまでできるようになったと思います。基本中の基本操作になるので、手を動かして覚えていきましょう。
プログラミング学習でこのような経験はありませんか？
- 目標に向けて何を学べば良いかわからない
- 調べても解決策が見つからない
- 現場レベルのスキルが身につくのか不安
これらの悩みは、学習環境を整えることで全て解決することができます。
ZeroPlus Gateでは、30日間無料で最適な学習環境を提供しています。
- なんでも相談できる専属メンター
- いつでも技術相談ができるプロ講師
- 元IT企業CTO監修のカリキュラム
条件なしでこのレベルの環境を無料で提供しているのはZeroPlus Gateだけです。
ただし、無料サービスの提供には参加者の数に制限があります。
少しでも興味がある方は、以下のリンクからサービスの詳細をご覧ください。
HTMLには様々なタグや属性の種類があり、タグ一つでも覚えることがたくさんあります。少しずつ学習を進めていきましょう。
Web制作は、その他にも学ぶべき知識が数多くあります。
Web制作初学者がWeb制作を学習するにあたって、押さえておくべき知識・技術は「Web制作学習ロードマップ」の記事にまとめています。どこまで勉強すればいいか分からない、次はどんなスキルを勉強すればいいか分からない、という方はぜひ参考にしてみてください！
Hello, World! 出力まとめ
- HTMLはブラウザに表示させるためのマークアップ言語
- 基本構成はHTML宣言文とメタタグ、bodyタグ
- テキストエディタでブラウザにテキストを出力できる
