JavaScriptの概要。JSとは？

JavaScript関連

JavaScript

基礎

投稿日時 : 2025/01/26 更新日時 : -

JavaScriptについて知りたいです。JSとは何ですか？

説明しよう

JavaScript及びその略語のJSはWebサイトのページに動きを付けたり、機能を加えたりできるスクリプトだ。2025年1月、現在の当サイトのトップページはグラデーションにアニメーションをしてサイトタイトルが表示されるが、これは何のフレームワークもライブラリも使用していない通常のJavaScriptでプログラミングした。

JavaScriptにはたくさんのライブラリやフレームワークがある。今から書く事は覚える必要はないし一部の人しか知らないが、ライブラリやフレームワークを使っていない生粋なJavaScriptをVanilla JS(バニラJS)と言う。バニラってチョコやミントと違って何も混ざっていないだろう。あまり使われていない単語だから共通語のように他のプログラマに言う事は避けよう。

これからJSのライブラリであるjQueryなどの講座も公開したいが、このカテゴリではバニラのJavaScriptについてレクチャーするので予めご留意願いたい。

JavaScriptはどんなプログラミング言語？

通常のJavaScriptはブラウザで動作する。JSの歴史は古く30年前の1995年に誕生したようだ。当時のインターネットは回線も遅くまた世界的にもまだ普及していなかった。

画像1枚表示するのに何秒も待っていた可能性があるな。Webサイトで動きのある事をしようとする事は難しく思えたが、ブラウザにWebサイトに書かれたプログラムを実行できるエンジンを搭載したら、軽量のサイトでも動きのある事やページに機能を実装する事ができるのではないか、と技術者は考えたのだろう。

そこでJavaScriptが登場して普及するのだが、ブラウザによって動作が変わるからECMAScript(エクマスクリプト)と呼ばれるJavaScriptの仕様を決める国際規格が登場し、それが標準化して当時からブラウザには規格通りにJSを実行するエンジンがデフォルトで搭載されている。だからJavaScriptはフロントエンドのWebページのプログラミングにめちゃくちゃ強くほぼ一強だ。SilverlightやFlashも出てきたが、現在はあまり見かけなくなってしまったな。

ちなみに当サイトのトップのグラデーションスクリプトは約5KBだ。動画で実現すると仮に5MBなら1000倍くらい差が出るな。画質も格段に綺麗だしアニメーションのフレームレートなどの制御も簡単だ。JSがいかに凄いか分かるだろう。

多機能や動きのあるWebサイトを作りたいならJavaScriptは必須なのですね！
ところでフロントエンドって何ですか？

フロントエンドとは簡単に言うとブラウザがWebサイトを読み込んでHTMLやCSS、JSなどを表示して実行するが、その目に見える表の部分(コード)や仕組みの事だ。逆にバックエンドはWebサイトの裏側の事でサーバのプログラミング言語ではPHPが有名だね。ま、それぞれの意味は名前の通りだよ

ECMAScriptについて

Scriptと入っているからプログラミング言語っぽいけど国際規格だ。ECMAScriptは機能の追加により、よく更新されているのでそれに合わせてブラウザもアップデートで新しいJavaScriptの機能に対応しているのだろう。

JavaScriptを勉強するなら2015年以降のバージョンのES6がよい

僕は2012年に出版された分厚いJavaScriptの本で勉強していて情報をアップデートせずに最近まで来た。新しい書籍を買ってこの講座の記事を書こうとしたら所々、書き方が変わっていて驚いた！

もし君達がお金をケチって2014年以前の中古のJavaScriptの本を買ったら後々後悔するかもしれない。そうならない為にJavaScriptは最低でも2015年の仕様のECMAScriptのバージョン6であるES6(ES2015)またはそれ以降の対応のものがよい。

ちなみに現在のバージョンはES14とかES15なんだとか。

Web以外でJavaScriptは他に何ができる？

JavaScriptのライブラリやフレームワークを使えばフロントエンドのWeb以外にも様々な事ができる。興味を持たれた方はそのライブラリやフレームワークを詳しく調べてみるとよい。ちなみに、これらのJSはHTMLとCSSもセットで理解が必要だと思われる。僕は触った事がないものがほとんどなので、かなり要約している。

Electron

JavaScriptでパソコンのデスクトップアプリを開発する事が可能。

React Native

React.jsで記述でき、スマホのアプリ開発ができる。JSの技術が使われている。

Node.js

Webサイトでバックエンドの開発に。

JavaScriptのWebのフロントエンドのライブラリやフレームワーク

おまけでこれを知っておくとよいかも。

React.js

近代的なWebのフロントエンド開発に。関数型プログラミングに類似している構文で、通常は「React」とだけ表記される事が多い。学習コストは高いが将来性もある。

Vue.js

近代的なWebのフロントエンド開発に。反応型データバインディングの構文。学習コストは中くらい。中規模な開発に向いているようだ。

jQuery

学習コストが低く簡単に様々な事ができる。当サイトでも使っているが、最近は上記のライブラリやフレームワークの方が仕組み的に推奨されるらしい。

上記以外にもたくさんのライブラリやフレームワークがある。ライセンス周りをちゃんと調べて、トレンドだったり自分の開発したいプロジェクトに合わせて習得すると良いと思う。