WEBトレ

JavaScript・jQuery

JavaScriptとは

JavaScriptは、Webサイトに動きをつけるプログラミング言語です。
「JavaScript」は開発当初「LiveScript」と呼ばれていましたが、その当時人気のあったプログラミング言語の「Java」にあやかって「JavaScript」という名前に変更されました。
「JavaScript」と「Java」にいくつかの共通点はありますが、まったく別の言語です。

jQueryとは

jQueryはJavaScriptのためのライブラリです。
jQueryを使用することでシンプルにJavaScriptを記述できるようになり、それまで数十行にわたるコードが必要だった処理もわずか数行で実行できるようになりました。

JavaScriptの特徴

以下のような「イベント」と呼ばれる様々な命令を操る司令塔のような役割を担います。
JavaScriptの特徴は、Webサイト上の「ふるまい」を操るところです。

・画面が読み込まれたタイミングを検知する
・ボタンをクリックしたかどうか検知する
・画面のスクロールやリサイズされたか検知する
・3秒後にアニメーションをさせる

また、サーバーとのデータのやり取りなども担当するWebブラウザ上のマルチプレイヤーです。

JavaScriptでできること

Webサイトに動きをつける

JavaScriptの1番の仕事、「Webサイトの動き付け」では様々なことができます。
ただの動かないページを味付けし、サイトを訪れた人を楽しませ、離脱率を下げたり、こだわりの動きをつけ、企業やショップのブランディングに活用されるなどしています。

ポップアップウィンドウ

ポップアップウィンドウは主に、閲覧制限をかけたページのIDやパスワードの入力を求める時や、お問い合わせフォームを送る際に「本当に送信しますが、よろしいでしょうか？」という確認などに使われます。
クリックした時や、ページを読み込んだ時に表示させることが多いです。

フォーム制御

フォームの内容をサーバーに送る前に、入力欄の内容チェックなどに使われています。
具体的には、「必須項目が入力されているか」「電話番号、メールアドレスの形式が正しいか」などをチェックします。
不完全な内容を送信しようとした場合のエラーメッセージもJavaScriptを使って表示させています。

Ajax・非同期通信

Googleマップの登場で爆発的に普及した技術です。ページの読み込みをせずに、サーバーとのデータのやりとりを可能にする技術です。
具体的には、Googleマップではスクロールして地図の場所を変更するたびにJavaScriptでサーバーにアクセスして必要なデータを取ってきて表示させています。
また、ネットショップなどでも使われています。あらかじめ全商品を表示させず、「もっと見る」ボタンを押すと同一ページ内で商品の画像が追加される仕組みも多くの場合Ajaxを使用しています。

リアルタイムで動くグラフ

JavaScriptは本当に色々なことが可能で、canvas」というタグの中に線や円、様々な図形を描画する命令にも使用することができます。
canvasは様々なデータのビジュアライズにも使用されており、データを可視化したグラフ作成にも使用されます。
また、「Node.js」というサーバーで動くJavaScriptなどを使い、ブラウザにリアルタイムでデータを送り、それでグラフを描画することも可能です。

保険シミュレーションの計算

JavaScriptは、ブラウザ上での計算機としての役割も果たします。
基本的な算術計算が可能なプログラミング言語なので、例えば、「旅行サイトで何泊、何人で宿泊するか」などの見積もり機能などに使用されています。
中でも保険シミュレーションの計算にも多く採用されており、年数やプラン、家族構成など、様々な選択肢を選んだ結果を計算し、その結果により最適なプランの提案や金額の表示などが可能です。

Webサイトの作成

JavaScriptが作成された理由、それは「Webサイトの動きをつけること」なので、やはりJSと言ったらWeb制作が皆さんの頭の中に最初に浮かぶでしょう。
華やかなアニメーション演出や、ボタンにカーソルを合わせると色やデザインを変更させて別ページに飛ぶのが分かるなどの挙動をし、ユーザーのサイト閲覧を助ける役割を担うなど、Webサイト制作に欠かせない存在です。

Webアプリの作成

アプリの作成は専門の言語の知識がないと難しいのではと思うかもしれませんが、実はブラウザ上で動くWebアプリは、HTML/CSS/JavaScriptを使って作成することができます。
例えば、SlackやChatWorkのようなチャット形式のアプリケーションなどもこれらの技術を使用して作ることができます。
Webアプリの作成には、Webサイト制作と同じようにフロントサイドとサーバーサイドによって異なる技術を使用します。

フロントサイド

Webアプリによるフロントサイドとは、画面上での操作する部分の事をいいます。例えばチャットアプリでは、文章を入力する部分です。
そこもJavaScriptで制御されていて、ブラウザの画面で入力したデータをサーバーサイドに送ります。
Webアプリを制作する際に、フロントサイドの部分は主に「フレームワーク」を使用して制作する事が多いです。
フレームワークとは、１から全てアプリの機能を作らなくても、ある程度アプリを作成する為の機能が用意されていて、チームみんなで同じルールに基づいて作れる便利な雛形です。
JavaScriptのフレームワークでは、近年では「Vue.js」「React.js」などが人気で採用されています。

サーバーサイド

スマホアプリの作成

JavaScriptはWebアプリのみに留まらず、スマートフォンアプリの制作も可能です。
スマートフォンアプリには、ハイブリッドアプリとネイティブアプリという２つの種類があります。