JavaScriptを学ぶにあたって、そもそも「JavaScriptとは何か」について把握しておきましょう。
JavaScriptでできることを把握することで、
「今後何を学ぶべきか」「どのような方向へ進んでいくか」に気づくキッカケになるかもしれません。
今回の記事では、これからJavaScriptを学んでいく方へ、JavaScriptとはどのような言語で何ができるのか簡単に紹介していきます。
目次
JavaScriptとは
JavaScriptとは、主にブラウザ上で動作するプログラミング言語です。
動的なページを作成する言語として紹介されることが多いですが、できることの幅がとても広い言語です。
Webサイト開発以外にもアプリケーションやゲーム開発、またサーバーサイドで動作するプログラムも実装可能な便利な言語です。
JavaScriptは「プログラミング言語」
今まで学んできたHTMLとCSSは、マークアップ言語と呼ばれるものでした。
マークアップ言語は、Webサイトや文章の構造や装飾の情報を示すために用いられます。
対し、JavaScriptは、プログラミング言語と呼ばれるものになります。
プログラミング言語はマークアップ言語と比べて、本格的にプログラムを書くことができる言語となります。
言語の扱いが今まで学んだHTMLとCSSと違うというイメージを持っていただければ大丈夫です。
JavaとJavaScriptは違う言語
名前が似ていますが、「Java」と「JavaScript」は異なる言語です。
Javaは、「アプリケーション」や「システム開発」に用いられる言語です。
対し、JavaScriptは主に「Webサイト開発」に用いられる言語です。
JavaScriptを「Java」と略してしまうと、意味が間違って通じてしまう恐れがあります。
なので、略して呼ぶときは、「JS（ジェーエス）」か「ジャバスク」が無難です。
JavaScriptの役割
ここで、Webページ開発におけるJavaScriptのイメージをつけておきましょう。
- HTML：Webサイトの構造を作る
- CSS：Webサイトの装飾を作る
- JavaScript：Webサイトに動きなどのアニメーションをつける
このイメージを覚えておけば大丈夫です。
JavaScriptでできること
ここではJavaScriptでできることについて紹介していきたいと思います。
webサイトに動きをつける
イベント
イベントとは、処理を実行するきっかけのことを言います。
- クリック
- スクロール
- ページの読み込み
など、皆さんがWebサイト上で何気無く行っている操作は処理を起こすイベントになります。
webサイトやアプリケーションなどは、何らかのきっかけを元に処理を実行することが多く、 上記のようなイベントに応じて、どんな処理を行うかをJavaScriptで作成します。
ハンバーガーメニューも、メニューがクリックされたというイベントを元に開閉処理を行なっています。
アニメーション
JavaScriptを利用することで様々なアニメーションを実装できるようになります。
多くのサイトに取り入れられている「カルーセルパネル」や「スライドショー」などもJavaScriptで作ることができます。
こちらの例ではZeroPlusMediaのカルーセルパネルの例です。
レイアウト作成
レイアウト作成の面でも、JavaScriptは活用されます。
例えば、Webサイトのキービジュアルを画面いっぱいの高さ（ビューポートの高さ）にしたい場合、CSSではなく、JavaScriptを利用して、高さ指定を行います。
CSSの100vhは正式なビューポートの高さではありませんので、JavaScript側で計算し指定することができるのです。
JavaScriptは色々できる
Webサイトに動きやアニメーションを作成すること以外にも、JavaScriptは活用されます。
Webアプリケーション
Webアプリケーションとは、Webサーバー環境上で動作しているアプリケーションのことです。
「Twitter」や「クックパッド」、「Gmail」などが具体例として挙げられます。
このようなwebアプリケーションのUIは、JavaScriptのライブラリ・フレームワークである「React」、「Vue」、「Angular」等を用いて作られています。
スマホアプリケーション
JavaScriptを利用し、アプリケーション開発を行うこともできます。
多くのスマホアプリは、SwiftとJava(もしくはKotlin)で作られていますが、JavaScriptで作られた「React Native」というフレームワークを使って作ることも出来ます。
サーバーサイド
JavaScriptは、主にブラウザ上で動作するプログラミング言語だとお伝えしましたが、「Node.js」を利用することで、サーバーサイドで動作させることも可能になります。
このようにJavaScriptは単なるクライアントサイドの言語ではなく、クライアントサイドからサーバーサイドまで幅広く様々なことを実行できる万能な言語となります。
Webサイト制作でも中上級者になるとNode.jsを使う機会も出てきます。
開発を効率的に行うために
ここで、開発を効率的に行うために使われるフレームワークとライブラリについて解説します。
フレームワークとは
フレームワークとは、Webサイト開発やアプリケーション開発を行う際に、設計の雛形になるものです。
フレームワークを導入すると、制作までの道のりや枠組みが決まっているので、大幅に制作工数を削減することが可能になります。
2020年6月現在の主要フレームワークとして、「Vue」や「Angular」があります。
フレームワークを活用するメリット
フレームワークを導入した場合、フレームワークに足りない機能のみ自身で制作し、追加する形となります。
なので、あらかじめ制作の雛形が決まっているので、ゼロからの制作に比べ大幅に工数を削減することができます。
また、自身で制作する箇所が減る分、バグを抱えるリスクも減少します。
ライブラリとは
ライブラリとは、便利なプログラムの部品を集めた、ひとまとめにしたもの
Webサイトのアニメーションを作成するにあたり、「jQuery」「GSAP」などはよく利用されます。
ライブラリを使わず、素のJavaScriptで実装すると複雑なコードになりがちな処理も、ライブラリを利用することで簡単に記述することができるようになります。
どれくらいコードが短くなるかは、次回以降の記事でイメージを掴んでいただくので、この記事での解説は割愛させていただきます。
ライブラリを利用するメリット
こちらもフレームワーク同様、開発効率が格段に上がります。
どのライブラリを導入するかにもよりますが、 例えば、webサイト制作で使うjQueryは、よく利用する処理を数行のコードで呼び出すことが可能になっております。
JavaScriptで10行のプログラムを記述しなければならない処理を、jQueryなら3~5行で書くことができます。
このように素で記述するよりも、1から作るのが大変な機能などはライブラリを使用して開発効率をよくします。
JavaScriptを学んでいこう
ここまでで、JavaScriptがどのような言語なのかを簡単に説明してきました。
Webサイトに動きなどのアニメーションを追加するために必須の言語になります。
次回以降の記事でJavaScriptの書き方や使い方について解説していきますので、このまま学習を続けていきましょう。
