【初心者も意外と身近な言語】 JavaScriptってどんな言語？

はじめに

今回はJavaScriptというプログラミング言語を紹介します。
この言語は、Webプログラミング初心者の方が最初によく学ぶHTMLとCSSに次いで、馴染みのある言語といえるでしょう。

この記事では、

の2つを説明していきたいと思います。

また、最後には簡単にJavaScriptを動かして頂きたいと思っています。
これからJavaScriptを勉強してみたいと思う方の手助けとなれば幸いです。

目次

JavaScriptってどういう言語？

JavaScript(ジャバスクリプト)とは動的なWebページを作るためのプログラミング言語です。
1995年にブレンダン・アイク(Brendan Eich)がNetscape社のエンジニアであった頃に開発されました。

この言語はクライアント側のWebブラウザ上で動作します。
つまり私たちが見ているパソコン上で動作しているという事です。
そのため、JavaScriptを動かす際には特別な環境構築をする必要がありません。
そういった点においては、勉強しようと思えばすぐに始めるため学習までのハードルが低い言語だと言えます。

そもそもプログラミング言語には、サーバー側で動作するものとクライアント側で動作するものの2種類に分けることができます。

それぞれの言語について以下にまとめます。

プログラミング言語の分類

もしサーバーって何？と思われたり、もっと詳しく知りたいという方は、こちらの記事を参照してみてください。

【WEBプログラミング初心者必読】意外と知らないWEBの仕組み

一番最初に動的なページを作成できると言いましたが、動的なページと言ってイメージが沸くでしょうか。

JavaScriptではこんなことができます。

ここに挙げたのはほんの一例です。
他にも様々なことができます。

その他、JavaScriptでできることのサンプルは下記のサイトで見ることができます。

JavaScript入門＆サンプル集

このようにJavaScriptは、より魅力的なWebページを作る要であると言えます。

JavaScript入門: 実際に動かしてみよう

準備

では、実際にJavaScriptを動かしてみましょう。

とはいっても先ほど説明したように、JavaScriptを動かすためには特別な環境構築は必要ありません。
インターネット環境、Webブラウザがあれば十分です。
今回はWebブラウザにGoogle Chormeを使用します。

Googleの検索画面で右クリックを押し、一番下の「検証」を押してください。
ページ内に別の画面が表示されたと思います。
一番上のElementsにはそのページのHTMLやCSSが表示されています。
今回はConsoleを使いますので、そこをクリックしましょう。

この画面でJavaScriptが動作します。
ここで実際にコードを書いていきたいと思います。

具体的に今回は、

の6つを簡単にやってみたいと思います。
みなさんもコンソール上に書いてみて、JavaScriptの雰囲気を掴みましょう。

文章のポップアップ: alert

まずは簡単に文章をポップアップ表示させてみたいと思います。
コンソール内に以下のように書いてください。

alert("Hello world");

JavaScriptのコードは最後にセミコロン(;)を付けます。
忘れても動作しますが、最初のうちは忘れずに付けるようにしましょう。

alert()はブラウザ上にかっこの中の文章を表示できます。
それでは実行してみましょう。

このように表示されていれば問題なく動作しています。

コンソール上への表示: console.log

先ほどはブラウザ上に文章を表示させましたが、コンソール上にも表示できます。
以下のように書きます。

console.log("This is console.");
> This is console.

This is console.と出力されたと思います。

変数を定義する: var

どのプログラミング言語でも変数を定義することができますが、JavaScriptでは以下のように定義します。
既に他のプログラミング言語を勉強されている方は理解しやすいと思います。

var 変数名 = 変数;

JavaScriptでは、varが変数を定義する際に必要なので忘れないでください。

それでは実際にやってみます。

var x = 13;
x
> 13

これでxに13が代入されています。
更にこのxを使って四則演算が可能です。

x + 12
> 15
x / 13 + 21
> 22

また、変数はカンマ(,)で区切ることで同時に定義することもできます。

var item1 = 13,
    item2 = 0,
    item3 = 'Hello world';

いちいちvarでの定義が面倒なときに利用できます
ぜひ覚えておきましょう。

入力欄の作成: prompt

alertは単に文章を表示させただけでしたが、入力欄を表示させてそこに変数を書くことでそのまま定義することができます。

var num = prompt("好きな数字を入力してください: ");

するとブラウザ上に以下の表示が出てきます。
自分の好きな値を入れて見て下さい。

ここでは18と入れてみます。

これでnumに入れた値が定義されました。

ただし、ここで注意して頂きたいことがあります。
それはここに入力したデータは数値ではなく、文字列扱いになる事です。つまり82は数値ではなく文字として扱われてします。

なので足し算をすると以下のようになります。

num + 12
> "8212"

文字列の場合は、このように続けてくっついたまま表示されます。

もし数値として利用したい場合は、以下のように記述してください。

Number(num) + 12
> 94

これで問題なく足し算ができています。

このように入力によっては文字列と数値のどちらで扱われるかが変わってくるので注意してください。

配列: array

配列とは他のプログラミング言語では「リスト」とも言われています。

Pythonのリストに関しては以下の記事で解説しています。

【Python入門】リストを使いこなそう

以下の配列を定義します。

var contries = ["USA", "Germary", "France"]

contriesという配列の中に3つの要素が定義されました。
これでまとめて扱うことができます。

中身を取り出す際には以下のように記述します。

contries[0]
> "USA”

contires[2]
> "France"

中には文字列だけでなく、数値や別のリストも入れる事ができます。

var nest = [[1, 2, 3], "Nested_1", true]

便利なので覚えておきましょう。

オブジェクト: object

オブジェクトは他のプログラミング言語だと「辞書型」とも言われています。

データをまとめて扱うことは配列と同じですが、キーと呼ばれるデータの要素の名前のようなものを定義する点で違いがあります。
また、先ほど説明した配列や関数などあらゆるものを包括できるので非常に便利です。

実際に書いてみましょう。
以下のように定義します。

var carInfo = {make: "Toyota", year: 1990, model: "Camry"}

carInfoではmakeが”Toyota”であるようにデータがに対して名前が対応していることが分かると思います。
配列は順番を覚えておく必要がありますが、オブジェクトの場合は名前をしっかりと定義しておけば簡単に自分の欲しい情報を取り出せるメリットがあります。

取り出す際は以下のように記述します。

carInfo["make"]
> "Toyota"

carInfo["model”]
> "Camry"        

特に[“”]でのダブルクオーテーションを忘れないように注意しましょう。

まとめ

今回はJavaScriptってどういうものなのかから、実際にコードを書いて動かしてみるところまで行いました。
JavaScriptは環境構築をする必要なくコードを動かせるので、学習するまでのハードルは低いです。

この記事を読んで興味を持たれた方は、今すぐにでもJavaScriptを動かせます。
これを機に、ぜひご自身でも勉強してみてはいかがでしょうか。

【マスターする価値あり】JavaScriptの需要は高い？

JavaScriptはWebアプリケーションの開発に非常に向いている言語として人気・注目共に支持を得ています。

JavaScriptには先進的なサービスやアプリの開発・画面描画に特化した多くのフレームワークが存在します。
有名なものを挙げると、Vue.js、React.js、Angular.js、Nuxt.js、Node.jsなどなどその種類は様々です。
具体的な違いについては他の記事で取り上げますが、これらは全てJavaScriptと言えます。

特化した特性や特徴をもったフレームワークが、しかもJavaScriptから派生し開発の第一線で使われているものがこれだけあるというところから需要が高いということが分かっていただけるのではないでしょうか。

CodeShipでは中でもReact.jsを取り扱い、JavaScriptのカリキュラムを強化したことで、モダンでハイパフォーマンスなサービス開発を体験し修得することができます。

興味のある方は、ぜひお気軽に無料相談会へお越しください。

おすすめ記事