.net column
.NET開発者のためのブログメディア

開発環境

JavaScriptで作るものは?できること3つとあわせてご紹介

2020年07月27日
SE
JavaScriptで作られているものは身近にありますよね。
PM
身近なスマホアプリやWebサイト、そしてゲームなどにJavaScriptが幅広く使われています。

JavaScript入門

JavaScriptとは、Webブラウザ上で動かすことのできるプログラミング言語の一つで、現在、世界の多くのウェブサイトでJavaScriptが使われています。

Webサイトは基本的にHTMLとCSSで構築できますが、JavaScriptを使うことで、Webページに様々な動きをつけることができます。

例えばWebブラウザ上で画像の拡大表示ができたり、カーソルを当てるとその該当メニューが開いたり、フォームを作って文字を入力して送付できたりします。

HTMLとCSSだけだと動かない「静的」なWebサイトとなりますが、JavaScriptを用いることでこういった動きをつけることができるので「動的」なサイトとなります。ちなみに、JavaScriptは省略形でJSと書く場合も多いです。

JavaとJavaScript

JavaとJavaScriptは全く違う言語です。JavaScriptは、見た目や動作を華やかにするフロントエンドのマークアップ言語なのに対し、Javaはシステムの中身などをプログラム構築するサーバーサイドの言語です。

JavaScriptの呼び出し方

JavaScriptを呼びだすには、2通りあります。1つ目がインラインスクリプトです。HTML内に直接JavaScriptを書いていく方法です。下記のように<script>タグを書き、その中にJavaScriptのコードを書いていきます。

<script>
//ここにJavaScriptを書きます。
</script>

外部ファイルからの呼び出し方

JavaScriptのファイルがhtmlとは別にあって、そのJavaScriptファイルをHTML内に呼び出す方法です。

下図のように<script>タグの中で、画像などを呼び出すのと同じようにsrc = “JavaScriptのファイル名”を記述することで、読み込むことができます。

JavaScriptのファイルですが、ファイルの拡張子は「.js」となります。

<html>
<head>
<script src=”test.js”></script>
</head>
<body>

</html>

コメントアウト

エラーが出てしまう場合には、文頭に「//」を書くと、その行はコメントとみなされます。そのため、プログラムとしては無視され、実行されません。これをコメントアウトと言います。

入門としてコメントアウトのショートカットキーは、コメントアウトしたい行にカーソルを合わせて、「command」キーと「/」キーを同時に押すことで、その行を簡単にコメントアウトすることができます。

Windowsを利用している場合には「command」ではなく「Ctrl」を押してください。

<script>
//ここに書いてある内容は反映されません
</script>

JavaScriptの書き方入門

ここからはJavaScriptの書き方について入門者向けに解説します。

「console.log(“”○○””);」というコードを書くと、()の中の○○という文字がコンソールに出力されます。「こんにちは」など数字以外の文字列は、下図のようにシングルクォーテーション( ‘ )かダブルクォーテーション( “” )で囲む必要があります。

文の最後はセミコロン(;)で終わるのも忘れないようにしましょう。

計算ができる

JavaScriptでは、計算もできます。また、数字は文字列ではないので、“”は要りません。

足し算(+)、引き算(-)、掛け算(*)、割り算(/)、割った時のあまり(%)など、この計算の書き方は、JSだけでなく、他のサーバーサイド言語(PHP, Rubyなど)でも入門的な考え方は同じです。

下図のように記述すると、それぞれコメントアウトに書いてある計算結果がコンソールに出力されます。

<script>
console.log(1 + 2);
//出力結果は3
console.log(5 + 3);
//出力結果は8
console.log(3 * 5);
//出力結果は15
console.log(4 / 2);
//出力結果は2
console.log(7 % 2);
//出力結果は1
</script>

コンソールとは何か

コンソールとは、JavaScriptを構築する上でとても便利なツールで、入出力のウィンドウのことを意味します。

下図にあるように、Google Chromeでhtmlを開いて右クリックを押して「検証」メニューを押すと、開発ツールが開けます。

Elementsの隣にあるConsoleメニューがコンソールのことで、コンソールを確認することで、JavaScriptがちゃんと動いているかを確認することができます。先ほどの、「こんにちは」という文字列と計算結果がちゃんと出力されていることがわかります。

「コンソールを使ってデバッグする」という言葉の意味は、JavaScriptの記述が出力できているか、またはエラーが出ているかを確かめることを指します。

JavaScriptの変数

変数とは、データ(値)を入れる箱のことです。それぞれの箱の名前が「変数名」であり、箱の中に実際の値(文字列や数値など)が入っています。

変数の書き方ですが、「let 変数名 = 値」で変数を定義することができます。プログラミングの「=」は「等しい」という意味ではなく、「右辺を左辺に代入する」という意味です。

下図は「こんにちは」という文字列の値をhelloという変数に代入していることになります。Console.logで変数名のhelloを入れると、「こんにちは」がコンソールに出力される仕組みです。変数をconsole.logに入れる場合はクォーテーション(””, ‘’)は必要ありません。

変数は同じ値を繰り返して使うときに便利です。また、変更した時に柔軟に対応しやすいです。1ページだけならともかく膨大なファイルとなると、変数を使っていないと変更作業が大変になります。

<script>
let hello = “こんにちは”;
console.log(hello);
</script>

JavaScriptでできること

今はまだJavaScript入門の段階ですが、学んでいったらJavaScriptで実際にどのようなことができるのかというのをご紹介します。

「ポップアップウィンドウ」は、決定ボタンを押すと何度か見かける「本当にキャンセルしてよろしいですか」などの注意を促す画面のことです。このポップアップする画面をJavaScriptで作ることができます。

「重階層プルダウンメニュー」は、1階層や2階層ならCSSでも作れますが、より複雑で階層が深い場合、CSSよりもシンプルにJavaScriptでプルダウンメニューを実装することができます。カテゴリーが何層にもなっている複雑なプルダウンメニューもJavaScriptで作ることができます。

「画像のスライダー機能」は、画像をいくつか用意し、それを何秒ごとにスライドさせるかを決めることがJavaScriptで可能です。

「アニメーション機能」は、跳ねたり、散らばったりと様々な動きやアニメーションをつけることができます。

アラートの出し方

JavaScript入門として、「アラートの出し方」をここでは紹介します。JavaScriptでは「 alert(“”文字列””); 」と記述することでアラートを表示させることができます。

下記の通り、テキストエディタで書いてみてください。そのHTMLファイルをWebブラウザで開くと、「こんにちは」というアラートが表示されました。このように、静的なウェブサイトの中で動的な動きや機能をつけることができるのが、JavaScriptの特徴です。

<!DOCTYPE html>
<html>
<head>
<meta charset = “utf-8”>
</head>
<body>
<script>
alert(“こんにちは”);
</script>
</body>
</html>

SE
書方に特徴がありますね。

PM
とても多くのサイトで利用されています。実際にコードを書いて理解を深めていきましょう。

JavaScriptの入門を学ぼう

ここまでJavaScriptの入門についてみてきましたが、いかがでしたか。

JavaScriptでの呼び出し方、書き方を覚えておきましょう。JavaScriptでは、様々なことができます。実際にJavaScriptを使って、理解を深めていきましょう。


.NET分野でのキャリアアップをお考えの方は、現在募集中の求人情報をご覧ください。

また、直接のエントリーも受け付けております。

エントリー(応募フォーム)

Search

Popular

reccomended

Categories

Tags

Jobs