JavaScriptの魅力をなるべく簡単にまとめてみた！

この記事は、初心者である私が「jsの魅力、伝えたいなぁ」と思って書いた記事です。
一応初心者にも理解できるようにはしていますが、多分以下の知識を持っている人じゃないと完全に理解できないと思います。

• HTMLをある程度記述できる
• ある程度ITについての知識がついている(P検3級程度)

これがわからなくても、できる限りわかるようにはしているので、わからない部分はネットで調べてより詳しい情報をみて理解していってください()


さて、先ほども言ったように、私は初心者な訳です。
初めてプログラム言語を触ったのは、今から1年半ぐらい前になりますかね。まぁ、プログラム言語を学ぶにあたって、自分が使うプログラム言語を決める必要があるのですが、ネット上では
「JavaScript(以下、js)がおすすめだよ！」
という声が多いと感じましたし、私も一番最初はjsをいじりました。


まぁしばらくはいろんなプログラム言語を触った訳なんですが、やっぱりjsに戻ってきましてね。せっかくだし、jsの参考書でも購入するかということで、買ってみたんですが、その参考書が結構当たりだったんです。今まで当たり前だと思ってたものが違ってたり、その逆もあったり。また、コードの行数を減らすためのテクニックとか、色々なことが書いてあったんです。


そこで今回は、その参考書からも多少抜粋して、jsの代表的な特徴について紹介してきます。

1,書いてすぐに動かせる

よく、「jsは初心者向けプログラム言語だよ」と言われるのですが、その根拠のひとつがこれだと感じます。
例として、C言語はコンパイラ言語ですので、一度書いたコードはコンパイルして、その後、コンパイルし終わったファイルを実行する訳ですが、ここまでの作業がめんどくさいという人もいるかも知れません。
もっと極端な話、C言語はコンパイラとかデバッガとか、IDE(統合開発環境)が必要になってくるんですが、jsはこれといったものは必要ありません(厳密には違いますが。後で説明が入ります)。まぁ、エディタぐらいは必要でしょうけど。


じゃあjsはどうやってコードを動かしてるんだ、って話になると思うんですよね。
答えは、__ブラウザの中のエンジン__で動かしているんです。
詳しく言っちゃうと、例えば皆さんが使っているであろうsafariやgoogle Chrome、fire foxなど、俗にいう「Webブラウザ」がありますよね？実は、そのブラウザの中には__jsを実行するためのエンジンがある__のです。それはブラウザによって変わってくるので、例えばsafariでできることが、google Chromeになるとできないなど、ちょっとした差はあります。
まぁ要するに、__ブラウザの中でjsが動くから、コンパイラとかも必要ないよ__ということです。
さらにいっちゃえば、__jsにとってのIDEはブラウザ__ということになります。

2,動的型付け言語

初心者からしてみたら、「何その単語」となりますよね。
簡単にいうと、動的型付け言語とは、
「プログラムを動かす時にデータ型決めておくよ」
という言語を指します。
つまり、データ型をつける必要がないということです。これが、多分「初心者におすすめのプログラム言語」と言われる所以なのではないでしょうか。


ここからは自論なのですが、正直この機能については初心者向けとは思えません。というのも、データ型を指定しないということは、その変数はどんなデータ型にもなれるということです。それが論理エラーを招く可能性もありますし、プログラマーからしてみても、「この変数はこのデータ型を持っているのか」というのが視覚的に判断できないので、混乱が生じる可能性もあります。


初心者だからこそ、データ型について詳しく触れる必要があるのではないのか、と思ったり思わなかったり

3,HTMLの操作が非常に楽

先ほども言ったように、jsはWebブラウザで動作するプログラム言語です。
HTML¹とはWebブラウザにおいて、文書を生成するためのマークアップ言語なのですが、同じWeb上で動作するので、HTMLに対する操作が非常に楽です。
例えば、
「ボタン"userButton"が押されたら、id="Text"のpタグの文章を変える」
という処理は、以下の通りで実現できます。

test1.js

document.getElementById("userButton").onclick = function{    //ボタンを押したら...?
    //id"Text"のpタグに文字列を代入
    document.getElementById("Text").innerHTML = "Hello JavaScript!";
}

これで完了です。至って簡単ですね。
「は？簡単じゃないし？」と思う方もいるとは思いますが、しばらくjsに触れればこれも理解できます。

4,イベント処理

そもそもイベントとは、__ユーザがサイトに対して何かをしたアクション__のことを指します。
例えば、
「"A"のキーが押されたらメッセージを出力したい」
という処理があるとすると、そのコードは以下の通り。

test2.js

document.addEventListener("keydown",event =>{
    let key = event.key;        //キーの値を取得
    if(key == "A") console.log("Aが押されました!!");    //キーがAならば
});

こんな感じで、簡単にイベント処理を行うことができます。ついでに、test1.jsの、「ボタンが押されたら....」という処理も、イベント処理の一種になります。

まとめ

jsは様々な機能がありますが、基本はWeb環境で動くことのできる、Web特化のプログラム言語です。ただ、Web以外にも、様々な場所で活躍している、プログラム言語の代表的な言語になります。また、ここで紹介できなかったjsの魅力もあります。詳しくは下にある参考文献を購入して見てみてください。


昔は、「toy language(おもちゃの言語)」と言われていたらしいですが、今はそんなことないので、ガシガシ勉強しましょう！

参考文献：初めてのJavaScript 第3版 | オライリー

1. HTMLとは、「Hyper Text Markup Language」の略で、Webの文書の書式を定義する為の、一種のマークアップ言語です。簡単にいうと、Web上の文書を作成する為の言語です。jsをいじるならばこの言語も知っておいた方がいいですね ↩