【入門編1】JavaScriptとは?Hello Worldの出し方を学ぼう

JavaScript入門

本記事からはJavaScriptについて解説します。

JavaScriptはWebアプリケーションを開発する上で必要な言語です。

入門編ではJavaScriptの基礎的な文法を解説していきます。

今回はJavaScriptで「Hello World」を表示する方法をみていましょう。

JavaScriptとは?

JavaScriptとは、Webアプリ開発における「フロントエンド」側の開発で使う言語です。

フロントエンドとは、Webアプリの表側の処理のことであり、ページが表示されてから動きます

たとえば、ページにアラートを表示したり、アニメーションを付けたりすることが可能です。

JavaScriptは20年近く現役で使われ続けている優秀な言語でもあります。

JavaScriptを使う場合は、HTMLのソースコードに、次のように記述します。

<script>
【JavaScriptのコード】
</script>

scirptタグの中にコードを書くことで、そのページ内でJavaScriptを動かすことが可能です。

JavaScriptを有効にする方法

ブラウザの設定の関係で、JavaScriptが動かなくなっている場合もあります。

JavaScriptを有効にする場合は、次の手順を踏みましょう

  • 1.Google Chromeを起動
  • 2.右上の「︙」マークをクリック
  • 3.「設定」をクリック
  • 4.左のメニューから「Googleの設定」をクリック
  • 5.「プライバシーとセキュリティ」の「サイトの設定」をクリック
  • 6.「コンテンツ」の「Javascript」をクリック
  • 7.「許可(推奨)」を「オン」に変更

もしJavaScriptが動かない場合は、このような手順で有効にしてください。

JavaScriptで「Hello World」を出力する

それではJavaScriptで「Hello World」を表示する方法をみていきましょう。

以下の項目に分けて解説します。

  • HTMLの雛形を用意
  • document.writeで「Hello World」を表示
  • コンソールに「Hello World」を出力
  • 指定した箇所に「Hello world」を表示

HTMLの雛形を用意

まずJavaScriptを動かすためのHTMLを用意しましょう。

ここでは以下の雛形を用意したので、コピーして使ってください。

○コード例

<!DOCTYPE html>
<html>
<head>
<title>テスト画面</title>
</head>
<body>
</body>
</html>

○ファイル名

test.html

ファイル名「test.html」にして保存しましょう。

保存したファイルをダブルクリックすると、ブラウザが開きます。

タイトルが「テスト画面」となっていることを確認してください。

何も表示されていない画面に、ここからJavaScriptで「Hello World」を表示していきます。

document.writeで「Hello World」を表示

まずは最も一般的な「document.write」を使う方法をみていきましょう。

○コード例

<!DOCTYPE html>
<html>
<head>
<title>テスト画面</title>
</head>
<body>
<script>
document.write("Hello world!");
</script>
</body>
</html>

○実行結果

※見やすいように拡大しています

document.writeの()の中に、出力したい文字列を入力してください。

文字列は必ず””で括るのをお忘れなく

このようにコードを変更し、ブラウザを更新してください。

すると「Hello world!」と表示がされるはずです。

document.writeを使うと、webブラウザ上に文字列を表示できます。

コンソールに「Hello World」を出力

続いてコンソール上に文字列を表示する方法をみていきましょう。

コンソールとは、開発者がアプリのデバックを行う際に使う画面のことです。

まず、コードを以下のように変更しましょう。

○コード例

<!DOCTYPE html>
<html>
<head>
<title>テスト画面</title>
</head>
<body>
<script>
console.log("Hello world!");
</script>
</body>
</html>

○実行結果

続いてコンソールを開きます。

コンソールを開く場合は、「F12」キーを押してください。

右上のメニューから「console」を選択してください。

すると「Hello world」が書かれていることが、お分かり頂けるかと思います。

指定した箇所に「Hello world」を表示

最後に指定した場所に「Hello world」と表示する方法を見ていきましょう。

document.writeよりも、こちらの方が実務では多く使います。

まず、ソースを次のように変更してください。

○コード例

<!DOCTYPE html>
<html>
<head>
<title>テスト画面</title>
</head>
<body>
<div id=1></div>
<script>
document.getElementById(1).innerHTML = "Hello world!";
</script>
</body>
</html>

○実行結果

divを生成しidを1としています。

divタグの中に、JavaScriptを使って「Hello world」を記入できます。

getElementById({id名}).innerHTML = {文字列};

このように記述すると、divタグ内で文字列を記入できます。

まとめ

本記事ではJavaScriptで「Hello World」を表示する方法を解説しました。

JavaScriptを使う場合、特にファイルのインストールは不要で、HTMLで埋め込むだけでOKです。

今回紹介したやり方がJavaScriptの基本となるので、覚えておくようにしましょう。

次回は、JavaScriptで簡単な計算を行う方法について解説します。

挫折率が高い??プログラミング学習のポイント
駆け出しエンジニアが一緒に学ぶ
CANITは、Progateやドットインストールで独学している人達同士をつなげます。駆け出しエンジニアのあなたのためのSNSです。
JavaScript入門
【この記事を書いた人】
谷津弘樹

某自社開発のIT企業に勤めていた元webプログラマーです。主にサーバーサイド側を担当し、phpを使った開発経験があります。現在は退職しフリーランスライターとして活動中。IT系の記事を主に執筆し生計を立てています。

CANIT
タイトルとURLをコピーしました