「Hello world!」から始めるJavaScript。大人気のプログラミング言語に挑戦!

「Hello world!」から始めるJavaScript。大人気のプログラミング言語に挑戦!

この記事では、プログラミング言語「JavaScript」を使用して「Hello World!」を表示する方法を説明する。

特別なソフトウェアを準備する必要はなく、お使いのインターネットブラウザで気軽に試すことができるので、ぜひ記事を読みながら一緒に挑戦してみてほしい!

JavaScriptのコードを実行する

JavaScriptは記述したコードを気軽に実行できるのも長所のひとつ。

JSのコードを実行するにはおもに以下のような方法が考えられる。

  1. VisualStudio CodeなどのJavaScriptに対応したIDEを使用する。
  2. CodePenなどのオンラインエディタを使用する。
  3. HTMLファイルにJSのコードを記述してブラウザで実行する。
  4. ブラウザのデベロッパツールにて実行する。

この記事では、3と4の方法でHelloWorldを出力してみよう!

ブラウザで「Hello World!」を出力する

ブラウザのデベロッパーツールを使用してHelloWorldを出力してみよう。

ここでは例としてGoogle Chromeを使用して方法を紹介していくが、FireFox・Microsoft Edge・Safariといった代表的なブラウザではほぼ同様の機能を備えているはず。自分の普段使用しているブラウザを使用して試してみてほしい。

Google Chromeで実行する

Goggle Chromeを起動したら「メニュー>その他のツール>デベロッパーツール」を選択してデベロッパーツールを起動する。

デベロッパーツールが開くので「Console」タブをクリックしてコンソールを開く。

次のように入力してENTERキーを押す。

console.log('Hello World!!');

次の行にHello World!!と表示されれば成功だ。

HTMLにJavaScriptを記述する

次にHTMLファイルにJavaScriptのコードを記述して表示する方法を試してみよう!

以下のコードを任意のテキストエディタにコピーしてHTMLファイルとしてセーブする。

<script type=”text/javascript”>から</script>までの間に書かれているのがJavaScriptのコードだ。

<html>
  <head>
    <title>Challenge JS HTML</title>
  </head>

  <body>
    <script type="text/javascript">
      document.writeln('Hello World!!');
    </script>
  </body>
</html>

セーブしたファイルを任意のブラウザで開くと以下のように表示されるはずだ。

作成したファイルをGoogle Chromedで開いた例

まとめ │ JavaScriptで「Hello world!」を出力する。

さて、この記事ではJavaScriptでの「Hello world!」の出力方法を説明してきた。プログラミングに対する興味が湧いてきた人は他の記事も読んでぜひ読んでみてほしい!

この記事が君のプログラマとしてのキャリアの第一歩となれば幸いだ。