JavaScriptでHello Worldを出力したい
consoleオブジェクトやalertなどの使い方を知りたい
Node.jsによるHello Wolrdってどうやるの？
JavaScriptに限らずプログラミングの学習を始めた人が最初に行うのがHello Worldの出力ではないでしょうか？
JavaScriptは実行エンジンがブラウザに搭載されているという珍しい言語のため、どのように文字列を出力したらいいのか迷う人も少なくありません。また、同じJavaScriptでもNode.jsの場合では方法が異なる点も特徴的です。
それでは、これらの問題を解消するにはどのように学習するのが良いのでしょうか。
そこで、この記事では初心者でも今日からJavaScriptでHello Worldを出力する方法について分かりやすく解説していきますので、ぜひ最後まで読んで理解を深めて頂ければ幸いです。
一人でも多くの方がJavaScriptの不安を解消できれば幸いです。
HelloWorldを試そう
この章では、ブラウザだけを使ってHello Worldを出力する練習をしてみましょう。主に、開発者ツールの起動から1行のJavaScriptコードを書く方法までを学んでいきます。
ブラウザの開発者ツールを起動しよう
それでは、まず最初にブラウザが搭載している開発者ツールを起動するところから見ていきましょう。
この開発者ツールはプログラムのデバッグ（検証）などで使うわけですが、簡単なJavaScriptプログラムを書いて実行することも可能です。今回は一般的に利用頻度の高いChromeブラウザを例にご紹介していきます。
ブラウザを起動したらメニューから【その他のツール】→【デベロッパーツール】を選択します。
すると、画面下部に開発者ツールが起動するのが分かります。
いくつかタブが表示されていますが、【Console】タブを選択するようにしてください。
このタブでは、JavaScriptプログラムからの出力を表示することができます。また、簡単なJavaScriptプログラムを実際に1行ずつ記述して実行させることもできるわけです。
ブラウザだけでHelloWorld
開発者ツールが起動できたところで、そのままHello Worldの出力まで行ってみましょう。
JavaScriptで何らかの文字列を出力するには、一般的にconsole.log()メソッドを利用します。これを開発者ツールのConsoleタブ内にそのまま入力してみましょう。
最後にエンターキーを入力すると、記述したプログラムが実行されます。
2行目に【Hello World】という文字列が出力されましたね！
このように、1行ずつではありますが簡単なJavaScriptプログラムを書いて実行することが出来るわけです。
consoleやalertを使おう
この章では、基本的なJavaScriptプログラムを通してHello Worldの文字列を画面に出力してみましょう。主に、consoleオブジェクトやalertメソッドなどを利用した手法について学んでいきます。
HTMLを準備しよう
まず最初に、基本的なHTMLファイルを準備しましょう。
前章のように開発者ツールを使わずに、一般的なJavaScriptプログラムとして文字列を出力する場合はHTMLファイルが必要になります。そこで、ファイル名を【index.html】として次のように記述しておきましょう。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>Sample</title>
</head>
<body>
<script>
//ここにJavaScriptを記述する
</script>
</body>
</html>
この例では、bodyタグの中にscriptタグを記述しているので、その中にJavaScriptプログラムを記述することになります。
あとは、このindex.htmlをブラウザで開くとJavaScriptが実行されるというわけです。
alert()でHelloWorld
JavaScriptを使ったもっとも簡単な文字列の出力方法として、alert()メソッドを利用する方法があります。
基本的な記述方法は次のとおりです。
<script>
alert('Hello World');
</script>
引数に出力したい任意の文字列を指定するだけです。実行すると、画面にポップアップウィンドウが表示されて指定した文字列が出力されます。
また、文字列はいくつかの言葉を＋記号で連結したり、計算式による数値を指定することも可能です。
//文字列の連結
alert('今日は' + '良い天気' + 'ですね');
//計算式による数値
alert(10 + (10 * 2) );
これらの例も同じようにポップアップウィンドウに結果が出力されます。
改行を意味するエスケープ文字【n】も利用することができるので、次のように記述すると文字列が改行されて表示されます。
alert('果物一覧表nリンゴnバナナnメロンnイチゴnパイナップル');
このようにalert()メソッドを利用すると、任意の結果をポップアップウィンドウで画面に表示することができます。さらに知識を深めたい場合は、次の記事で基本から応用までを体系的にまとめているので合わせて参考にしてみてください！
console.log()でHelloWorld
おそらくJavaScriptでHello Worldを出力する方法として、もっともよく使われているのがこのconsole.log()メソッドでしょう。
記述方法としては、冒頭でも紹介したようにalert()メソッドとほとんど同じです。
<script>
console.log('Hello World');
</script>
実行すると、開発者ツールのConsoleタブに指定した文字列が出力されます。実行するたびに、ポップアップウィンドウが表示されないので、頻繁によく使う場合やデバッグなどの用途には最適でしょう。
console.log()も文字列を連結したり数値計算などに利用できるのですが、Consoleオブジェクト自体がいくつか便利なメソッドを提供しています。
例えば、プログラムのパフォーマンスを調査するために実行速度を計測できます。
const result = 0;
console.time('plusAll')
for(var i=0; i<1000; i++) {
result += i;
}
console.timeEnd('plusAll')
実行結果
plusAll: 1.7919921875ms
この例では、console.time()からconsole.timeEnd()までの範囲で実行されているプログラムを計測しています。出力結果としては、プログラムの処理が完了するまでの計測時間がミリ秒で表示されます。
他にも、console.count()メソッドを利用すると自動的に1ずつカウントアップして表示してくれます。
for(var i=0; i<5; i++) {
console.count('one');
}
実行結果
one: 1 one: 2 one: 3 one: 4 one: 5
この例では、繰り返し処理としてfor文の中にconsole.count()メソッドを実行しています。実行されるたびに、出力結果にはカウントアップされた値が表示されるのが分かります。
このconsoleオブジェクトには、他にもさまざまな便利メソッドが提供されており、これらの基本的な使い方から活用ワザまでを次の記事でまとめているのでぜひ参考にしてみてください。
Node.jsを使う
この章では、Node.jsを利用したHello Worldの出力方法について見ていきましょう。主に、Node.jsの環境構築から実際のプログラミング手法について学んでいきます。
Node.jsの環境構築
一般的にJavaScriptと言えばブラウザに搭載された実行エンジンで処理される言語を指すのですが、同じようにサーバー側でもJavaScriptを利用できるようにしたNode.jsがあります。
そこで、Node.jsを利用したHello Worldの出力方法について見ていきましょう。
これまでのJavaScriptと違うのは、サーバー側で実行するという点です。そのため、まず最初にNode.jsの環境構築が必要になります。
Node.jsの導入自体は、公式サイトからダウンロードして実行するだけなので簡単です。
Windows / Mac / LinuxそれぞれのOS向けにインストーラーが用意されています。
また、コマンドラインからダウンロードする方法やNode.jsのバージョン管理を簡単にする方法などについて、さらに基本的な知識を深めたい場合は次の記事でまとめているので合わせて参考にしてみてください。
Node.jsでHelloWorld
Node.jsが導入できたら、早速Hello Worldを出力してみましょう。
もっとも簡単な方法としては、コマンドラインからそのまま直接プログラムを記述することです。次のコマンドを実行してみてください。
$ node
すると、ブラウザの開発者ツールにあったConsoleタブのように1行ずつプログラムを記述できるモードに移行します。
そこで、次のようにconsole.log()メソッドを記述してみましょう。
$ node
> console.log('Hello World')
エンターキーを押すと次の行に文字列が出力されるのが分かります。終了する場合は【Ctrl + C】を押すと元のコマンドラインに戻ります。
また、main.jsというファイルを作成して、ここにconsole.log()メソッドを記述すれば次のように実行することも可能です。
$ node main.js
この例では、main.jsというファイルをNode.jsで実行しますよ…という意味になります。一般的にはこちらの方法がよく使われるでしょう。
まとめ
今回は、JavaScriptでHello Worldを出力するいくつかの方法について学習しました。
最後に、もう一度ポイントをおさらいしておきましょう！
- ブラウザの開発者ツールがあればプログラムの作成・実行ができる
- alert()はポップアップウィンドウを作り、consoleはログを出力する
- Node.jsはサーバー側でJavaScriptを実行することができる
上記内容を踏まえて、ぜひ自分でもプログラミングに取り入れて活用できるように頑張りましょう！
