最速5分見積
もり

ブログ

  1. トップ
  2. ブログ
  3. 【完全網羅】Javascriptで可能性が広がる

Web制作

【完全網羅】Javascriptで可能性が広がる

Javascriptという言語をご存知でしょうか。

JavascriptはWEBサイト・WEBゲーム・アプリゲームなど幅広く様々なところで使用されています。

HTML・CSSなどの静的な言語とは違い、Javascriptは動的な言語です。

なので、WEBサイトに使用すれば、アニメーションなどの動きのあるデザインを実装することができます。

Javascriptを習得することで、表現の幅・デザインの多様性を広げることが可能です。

今回は、Javascriptについて紹介するので、ぜひ参考にしてください。

Javascriptとは

Javascriptは、Brendan Eichによって考案された言語です。

Javascriptが流行する前までは、Flashという言語が使用されていました。

WEBサイトのアニメーションや動きのある部分は、Flashを使って制作されていました。

しかし、現在ではFlashaの代わりにJavascriptを使用することが多くなっています。

また、Javascriptには様々な用途があります。

例えば、WEBサイト上でリアルタイムに動くタイマーやクリックすると表示されるアラートなどはJavascriptが使われていることが多いです。

Javascriptを使用することでデザイン性を高めることができ、ユーザーの利便性もアップします。

Javascriptを使ってみよう

では、実際にJavascriptの使い方を説明します。

まずは、Javascriptを読み込むところから始めましょう。

Javascriptの読み込みには2種類の方法があります。

1つ目は、HTML内にJavascriptを記述する方法です。

<script type="text/javascript">
ここにJavascriptのコードを書きます。
</script>

このようにscriptで囲んでいる部分にJavascriptのコードを記述します。

この方法でも、Javascriptを実装することが可能です。

次に、外部ファイルを読み込んでJavascriptを実装する方法を紹介します。

<script type="text/javascript" src="JavaScriptのファイル"></script>

このように記述することで、外部ファイルに記述しているJavascriptのコードを読み込むことが可能です。

外部ファイルで読み込むことで、コードを見直しやすくなりメンテナンスもしやすくなります。

この方法は、CSSの外部ファイルで読み込むことと同じです。

外部ファイルで読み込んでも表示結果に違いはありません。

ここまでは、下準備の段階です。

次からは、コンソールを使って実際に文字を表示させましょう。

コンソールに出力させる

ここでは実際にJavascriptを使用してコンソールに文字を表示させます。

「コンソールって何？」という疑問を持つ人も多いのではないでしょうか。

まずは、コンソールという言葉の意味から説明します。

コンソールとは引数などの値を確認するために使用することが多いです。

つまり、プログラムが正常に動いていることを確認するデバック作業のときによく使用されます。

実際にコンソールを使って出力した値を確認しましょう。

まずは、Hello Worldと表示します。

Hello Worldと表示するために、「console.log()」を使います。

console.log('Hello World');

このように記述することで、コンソールに「Hello World」という文字列が表示されます。

実際に表示されているか確認するためにブラウザを使って確認しましょう。

今回、使用するブラウザはChromeです。

FirefoxやSafariなど他のブラウザでも確認することは可能ですが、今回は特に人気のあるChromeを利用します。

まずは、ブラウザを立ち上げます。

ブラウザが立ち上がったら、Windowsを使っている人は「F12」、Macを使っている人は「Command+Option+i」を押してください。

そうするとChromeのデバックツールが起動します。

デバックツールのタブに「Console」というメニューがあるので、その部分をクリックします。

すると、先ほど記入した「Hello World」という文字列が表示されます。

Javascript・JQueryの基本

このように表示されていれば、問題ありません。

コンソールの出力が確認できた次は、アラートを表示させましょう。

ダイアログボックスでアラート文を表示させる

アラートは次のように記述することで表示できます。

alert('Hello World');

先ほどと同じようにChromeで確認します。

Javascript・JQueryの基本

Chromeを立ち上げるとダイアログボックスが表示され、その中に「Hello World」という文字列が表示されます。

ダイアログボックスで警告文が表示された経験のある人も多いでしょう。

ユーザーに注意を促すときに、有効な方法です。

コメントを記述する

次にコメントを記述する方法を説明します。

コメントとは、プログラムや実際の動作とは関係のない文章のことです。

「なんで関係のない文章を書く必要があるの？」と不思議に思う人もいるでしょう。

コメントを記述することで、プログラムの意味や意図を文章で伝えることができ、記述した人以外の人が見てもプログラムの意味や意図をわかりやすくするためです。

プログラムは1人でもできますが、仕事で使用する場合はチームでプログラムを開発する機会が多くなります。

このようにチームで開発する場合、自分が書いたコードを他の人が見ることもあります。

そのときに、プログラムの意味や意図をわかりやすくすることで、開発のスピード・効率がアップするのがメリットです。

また、プログラムは開発した人ではなく、別の人が保守・メンテナンスする場合がほとんどです。

そのため、保守・メンテナンスする人にもわかりやすく伝えるためにコメント機能を活用します。

コメントはこのように記述します。

// コメントが1行の場合

/*
 複数行コメントする場合の記述
*/

alert('Hello World');
// ダイアログボックスで「Hello World」と表示させます。

コメントの記述方法は、以下の2つです。

・「//」
コメントを1行だけ記述するときはスラッシュを2つ重ねた後にコメント内容を記述します。

・「/**/」
コメントを複数行記述する場合は、スラッシュとアスタリスクを使ってコメント内容を記述します。

一番下の行のようにプログラムの意味や意図を記述する際に使用しましょう。

変数

プログラミングにおいて、必要になるのが変数です。

変数とは、値や計算式を入れておく箱のようものです。

箱に入れておくことで、違う箇所で使用するときに長い計算式を記述しなくても、プログラムに反映することができます。

変数はこのように記述します。

var name = "yamada";　//変数名はname
console.log(name);　//出力結果はyamada

注意して欲しいのはプログラミングの「=」は、数学で使用する「等しい」という意味ではありません。

プログラミングで「＝」を使うときは、代入するという意味です。

このコードでは「name」という変数に「yamada」という値を代入しています。

なので変数の「name」を出力させると「yamada」という文字列が表示されます。

また、このように記述することで表示結果を変えることが可能です。

var name = "yamada";　//変数名はname
console.log(name + tanaka);　//出力結果はyamadatanaka

このように「+」記号で繋げることで出力結果が変化します。

他にもこのような使い方があります。

var math = 100 + 100;
alert(math); //出力結果は200

このように計算式を変数に格納することも可能です。

また、1度使った変数を変更することもできます。

var math = 100 + 100;
alert(math); //出力結果は200
math = 200 + 200;
alert(math); //出力結果は400

このように変数に格納した値を変更することも可能です。

気をつけて欲しいのは、変数名にはルールがあるということです。

変数の先頭に数字・アンダーバーを使用するとエラーがでます。

また、日本語で記述してもエラーがでるのでやめておきましょう。

変数は色々な使い方があり便利なので、ぜひ使ってみてください。

条件分岐

プログラミングで使用する機会が多いのは、条件分岐です。

条件分岐とは、「もし〜〜ならば〜〜をおこなう、そうでなければ××をおこなう」のような条件に一致しているか否かで実行する内容が変化します。

条件分岐はこのように記述します。

var 変数 =　値

if (条件式) {
    処理 //条件式がtrueのとき実行
} else {
    処理 //条件式がfalseのとき実行
}

例えば、このように使用することが可能です。

var x =　"male";

if (x ===　"male") {
    document.write(“この人は男性です。”); //条件式がtrueのとき実行
} else {
    document.write(“この人は女性です。”); //条件式がfalseのとき実行
}

「x」の値が「male」であれば「この人は男性です。」と表示され、「x」の値が「male」でなければ「この人は女性です。」と表示されます。

この場合、「male」と表示されます。

また、「else if」を追記することで条件式を追加することが可能です。

if (条件式1) {
    処理 //条件式がtrueのとき実行
} else if (　条件式2　) {
    処理 //条件式1がfalseで、条件式2がtrueのとき実行
}　
else　 {
    処理 //条件式1と2両方ともfalseのとき実行
}

「else if」を使ってこのような例文も作成できます。

var score = 70;
if (score >= 90) {
document.write(“合格”);
} else if (score >= 80) {
document.write(“ギリギリ合格です”);
}
else  {
document.write(“不合格です。追試を受けてください。”);
}

この場合、「不合格です。追試を受けてください。」と表示されます。

たくさん条件分岐したい場合は、このように「else if」を追加して条件を足していきましょう。

条件分岐の注意点

条件分岐はプログラミングをマスターする上で絶対必要になるスキルです。

いくつにも処理を分けれる条件分岐ですが、注意しなければならないポイントが1つあります。

それは、上から順番に条件を当てはめていき、条件と一致したところで処理がおこなわれます。

それ以降の条件に一致していても、処理がおこなわれることはありません。

var score = 100;
if (score >= 90) {
document.write(“合格”);
} else if ($score === 100) {
document.write(“満点です”);
} else {
document.write( “不合格です。追試を受けてください。”);
}

この場合、「合格」と表示されます。

しかし、この条件式の場合、「満点です」と表示させたいはずです。

このようにコードを修正することで、「満点です」と表示させることができます。

var score = 100;
if (score === 100) {
document.write(“満点です”);
} else if ($score >= 90) {
document.write(“合格”);
} else {
document.write( “不合格です。追試を受けてください。”);
}

このようなミスをしないように条件式の順番には気をつけましょう。

switchに条件分岐

条件分岐は、ifだけでなくswitchでも実装することが可能です。

switchを使ったコードはこのようになります。

switch (対象) {
    case 値１: //式の結果が値1と同じ場合に実行
        　　break;
    case 値2: //式の結果が値2と同じ場合に実行
        　　break;　　
    default: //全てに該当しない場合に実行
        　処理
}

具体的にこのように使用することが可能です。

var hair = '黒色';

switch (weather) {
    case "黒色":
        console.log("髪の毛の色は黒色です。");
        break;

    case '茶色':
        console.log("髪の毛の色は茶色です。");
        break;

    case '金色':
        console.log("髪の毛の色は金色です。");
        break;

    case '銀色':
        console.log("髪の毛の色は銀色です。");
        break;
}

このプログラムでは「髪の毛の色は黒色です。」と表示されます。

記述量が少なくシンプルなので、保守性が高く、メンテナンスにも最適です。

真偽

「true」、「false」の2つの値があります。

a === b //aとbが等しければtrue、等しくなければfalse
a !== b //aとbが等しくなければtrue、等しくなければfalse
a < b   //aの方がbより小さければtrue、aの方がbより小さくなければfalse
a <= b  //aの方がbより小さいまたは等しければtrue、aの方がbより大きいまたは等しければfalse
a >= b  //aの方がbより大きいまたは等しければtrue、aの方がbより小さいまたは等しければfalse

予約語

予約語とは、関数名・変数名・ラベルとして使用できない単語です。

予約語を使用すると、エラーになってしまうので注意しましょう。

Javascriptの予約語は以下の単語です。await, break, case, catch, class, const, continue, debugger, default, do, ・else
・enum
・export
・extends
・false
・finally
・for
・function
・if
・import
・implements
・in
・instanceof
・interface
・let
・null
・new
・package
・private
・protected
・public
・return
・static
・super
・switch
・this
・throw
・true
・try
・typeof
・var
・void
・while
・with
・yield

繰り返し文

繰り返し文とは、処理を自動的に繰り返しおこなうことです。

繰り返し文には、「while」、「for」を使った2種類の方法があります。

while

while文はこのようにコードを記述します。

while (条件式) {　
    処理の内容
}

while文はこのようにして使用できます。

var num = 0;
while (num < 10) {
document.write(num);
num++
}

この文は、「num」という変数の値が10よりも小さい場合、10に未満の数字になるまで処理を繰り返すという意味です。

なので、「123456789」という数字の羅列が表示されます。

また、最初から10よりも値が大きい場合は何も表示されません。

for

for文はこのようにコードを記述します。

for(変数の定義;条件式;増減式){
 処理の内容
}

for文はこのようにして使用できます。

for (var num = 0; num < 10; num++) {
document.write(num);
}

while文のときと同じように10未満の数字になるまで処理がおこなわれます。

なので、「123456789」という数字の羅列が表示されます。

while文とfor文の違い

whileとforは似たような処理がおこなわれます。

では、この2つの違いは何でしょうか。

それは、処理の回数です。

処理の回数があらかじめ決まっている場合はforを使います。

処理の回数が決まっていなければ、whileを使うのがおすすめです。

配列

配列とは、1つの変数に複数の値を格納できる方法です。

配列を使えば、1つの変数でいくつもの値を扱うことができます。

配列はこのようにして記述します。

var 変数 = ["値1","値2","値3"]

以下のコードが参考例です。

var fruit = ["apple","banana","orange"]
console.log(fruit);
//apple　banana　orangeと出力される

また、格納した値を個別で抽出することも可能です。

var fruit = ["apple","banana","orange"]
console.log(fruit[0]);
//appleと出力される

このように特定の値を抽出することもできます。

注意するポイントは、プログラミングは「1」からではなく「0」から始まります。

なので、1番最初の値を抽出したいときは「0」と記述しましょう。

値を個別に抽出するだけでなく、配列に値を追加することも可能です。

var fruit = ["apple","banana","orange"]
fruit.push("pineapple");
console.log(fruit);
//apple　banana　orange　pineappleと出力される

連想配列

連想配列は、各値にキーを付与して格納することです。

var fruit = {
    "name": "apple",
    "color": "red"
};
console.log(fruit.name);
//appleと出力される

関数

関数とは、同じ処理をするプログラム、色々なところで何度も使い回すことのできることです。

関するを使用することで、効率が上がり、プログラムを開発スピードがアップします。

その上、同じ処理をするプログラムを何度も記述するとコードが冗長してしまい、保守性が低くなり、メンテナンスにも時間がかかります。

なので、同じ処理を繰り返し使用するときは、関数を使いましょう。

関数はこのように記述します。

function 関数名(引数) {
　　処理
}

まず、関数を説明する前に引数から説明します。

引数とは、関数に追加で情報を付与できる機能があります。

関数を使用するときに引数の情報も一緒に渡すことで、関数の中でその値を利用することが可能です。

引数に設定できる情報に上限はありません。

「,」で区切ることで引数をいくつでも渡すことができます。

実際に関数の使用例を見ていきましょう。

function test(score){
if (score >= 90) {
document.write(“合格”);
} else if (score >= 80) {
document.write(“ギリギリ合格です”);
}
else  {
document.write(“不合格です。追試を受けてください。”);
}
}

「function」の後に「test」という関数を定義することで関数として使用することができます。

これで関するとして何度も使い回すことが可能です。

function test(score){
if (score >= 90) {
document.write(“合格”);
} else if (score >= 80) {
document.write(“ギリギリ合格です”);
}
else  {
document.write(“不合格です。追試を受けてください。”);
}
}

var score = 95;
test(score);
//「合格」と表示される。

var score = 85;
test(score);
//「ギリギリ合格です」と表示される。

var score = 75;
test(score);
//「不合格です。追試を受けてください。」と表示される。

このように関数を使うことで、コードの記述量が少なくなり、コードが冗長化することも防ぐことができます。

イベント

イベントとは、ある一定のイベントがおきたとき、そのイベントに合わせてプログラムされた処理がおこなわれます。

イベントの種類はたくさんありますが、その中の1つに「onclick」というイベントがあります。

「onclick」というイベントを使って、イベントのコードを見ていきましょう。

  <input type="button" value="Click" onclick="x()">

    var x = function () {
      console.log("Hello world");
    }
//「Hello world」と出力される

マウスを1度クリックしたときに「Hello world」と出力されます。

javascriptには様々なイベントが用意されており、自由に使用することが可能です。

イベントにはこのようなモノがあります。

・onBlur
・onFocus
・onChange
・onSelect
・onSelectStart
・onSubmit
・onReset
・onAbort
・onError
・onLoad
・onUnload
・onClick
・onDblClick
・onKeyUp
・onKeyDown
・onKeyPress
・onMouseOut
・onMouseOver
・onMouseUp
・onMouseDown
・onMouseMove
・onDragDrop

このように様々なイベントが用意されているので、状況に合わせて、使い分けましょう。

イベントを使いこなすことで、HTML・CSSだけで実装するよりもおしゃれでかっこいいWEBサイトを制作することができます。

まとめ

今回はjavascriptについて説明しました。

いかがでしたか？

今回、紹介したjavascriptは主にWEBで使うためのコードです。

javascriptは、WEBサイト以外にもオセロゲームやおみくじゲームなど簡単なゲームを制作するときにも使用することができます。

今回、紹介した方法以外にも様々な使い方があるので、興味のある人はぜひjavascriptを習得してください。

また、このサイトではJavascript以外にもHTML・CSS・PHP・セキュリティ・WEBサービス・SEOなどWEBに関する様々な情報を発信しています。

これからWEBに関して勉強したいという人は、他の記事も参考にしてください。