JavaScript入門 | 新卒就活生向けIT業界コラム

JavaScriptとは?

JavaScriptは、Webページに組み込まれたプログラムをWebブラウザ上で実行するために使用されるプログラミング言語の1つです。

現在Webサイトは複雑化、高機能化しており、JavaScriptで書かれたプログラムが組み込まれていることが多いです。

オブジェクト指向にも対応していますが、既存のオブジェクトの複製に機能を追加していくプロトタイプベースと呼ばれる手法を採用しています。

関数を変数のように扱ったり、関数を引数に取る高階関数を定義できるなど関数型プログラミング言語の使用も取り込んでいます。

JavaScriptはブラウザを操作するための言語であり、HTML、CSSだけでは出来ないことをするために使われます。

ブラウザはWebページを表示します。そのためにHTML、CSS、数点の画像などで作られています。

HTML、CSSは不変で静止したデータなため一度ブラウザに読み込まれると変化しません。

ですがJavaScriptを使う事で、静止したデータであるHTML、CSSをリアルタイムで書き換えることができます。

そのため、JavaScriptにはHTML、CSSの知識が必要になってきます。

JavaScriptからテキストなどをアウトプット出来る場所は、特殊な物を除くと大きく分けて3つあります。

JavaScriptプログラムからブラウザのコンソールにテキスト、数字を出力することが可能で、これは実際にWebサイトを公開する前に、プログラムの動作をテストするのに使用されます。


【例】

console.log('太郎');

開発ツールのコンソールにて上記のコードを記述するとコンソール上に太郎と表示されます。

JavaScriptを使用し、ダイアログボックスを表示させ、そこに数字やテキストを出力することが可能です。

JavaScriptによってHTMLやCSSを操作してタグに囲まれたテキストを書き換えたり、新たな要素を挿入することが可能です。


console.log(出力したい文字列、計算式など)

上記コードは()内に指定した文字列、数式の計算結果などをコンソールにアウトプットする機能です。

文字列を出力するには「”」ダブルクォートまたは、「’」シングルクォートで囲む必要があります。


【数字の場合】

console.log(1+6);
上記コードはコンソール上に7を表示します。


【文字列の場合】

console.log('こんにちは');
上記コードはコンソール上にこんにちはと表示します。


【数字を「’」で囲った場合】

console.log('1+3');
上記コードは1+3と表示します。※「'」で囲むことで文字列として認識されます。※

文字列に「”」ダブルクォートが含まれている場合、船体は「’」シングルクォートで囲まないといけません。

これはJavaScriptがどこからどこまでが文字列かわからなくなってしまうためです。

HTMLドキュメント内にscript、/scriptタグを追加することでJavaScriptを記述することが出来ます。

scriptタグは、head～/headタグ内、またはbody～/bodyタグ内のどこにでも追加することが可能です。

一般的には/body終了タグの直前に記述します。

ブラウザは、古いHTML、JavaScriptで書かれていても、正しく表示・実行出来るように作られています。

ブラウザは非常に高い互換性を持ったアプリケーションのため古いサイトを閲覧しても最新のブラウザで表示することができます。

高い互換性を確保するために、ブラウザには古いJavaScriptを実行するモードと新しいJavaScriptを実行するモードの2つがあります。この新しいJavaScriptを実行するモードをストリクトモードと呼びます。

ストリクトモードにしていない場合ミスを防ぐなどのエラー検出機能などが一部働かなくなってしまいます。

ストリクトモードにするにはプログラムの冒頭に


'use strict';

と記述します。

JavaScriptの特徴、出来る事、基礎知識を少し簡単に説明しました。

JavaScriptにも条件分岐、比較演算子など他のプログラミング言語にもあることを覚えていく必要があります。

ですが、ブラウザを操作するために必要なプログラミング言語であり需要も高まってきています。

参考書籍:狩野　祐東　2019年　「確かな力が身につく　JavaScript「超」入門　第2版　」　SBクリエイティブ株式会社