JavaScriptでできることとは

JavaScriptでできることとは

JavaScriptとは何か?出来ることや勉強方法を詳しく解説

JavaScript(ジャバスクリプト)とは、主にWebサイトに動きをつけるプログラミング言語です。HTMLやCSSを習得したWebデザイナーやエンジニアを目指す方が次に勉強する技術の1つとしてオススメです。
情報設計に基づき、綺麗に作ったデザイン、検索を意識した的確なマークアップ(Googleから高評価されるプログラミングの事です)。その次にWebサイトに必要なのは、やはりサイトを訪れた方々を楽しませる動きでしょう!

ただページが表示されているだけよりも、スマホの画面をスクロールしたら何かが表示されたり、ちょっと気の効いたアクションがある方が見ていて楽しいサイトになりますよね。うまく使えば閲覧時間も長くなります。そして作る側も、色々な表現ができるようになってくるとモチベーションアップにもつながります。
是非、楽しいJavaScriptの世界に足を踏み入れてみましょう!

目次

JavaScriptとは?

JavaScript(ジャバスクリプト)とは、Webサイトに動きをつけることを目的として開発されたプログラミング言語です。略してJS(ジェーエス)などと呼ばれています。
皆さんがよく目にする企業サイトのメイン画像が切り替わるスライドショーや、スマートフォンのメニューボタン、ネットショップの商品画像が拡大される動きなどもJSを使って制作されています。
主にインターネットを見る為の「ブラウザ」というソフトの上で動作し、ページに演出を加えたい時に、CSSでつける動きと共によく使用されます。
JavaScriptは技術の進化スピードが非常に早い大人気言語です。最近ではサーバーで動くJSなどもあり、スマートフォンアプリやデスクトップアプリの開発もできるようになりました。

JavaScriptの歴史

JavaScriptは1995年にNetscape社のブレンダン・アイク氏によって開発されました。当初はJavaScriptではなく「LiveScript」と呼ばれていましたが、当時「Java」という言語が普及していた為、人気にあやかり「JavaScript」と改名されました。
一時期は過剰な演出に使われたことにより人気をなくし、ブラウザで機能OFFにされていた時期もありました。ですが「Ajax」という技術を利用したGoogleマップの登場により、再び注目を浴び始め現在では絶大な人気を誇っています。

JavaScriptの特徴

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

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

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

他言語との違いは?

jQueryとJavaScriptの比較

jQueryとは、2006年にジョン・レッシグ氏によって開発されたプログラミング言語です。
JavaScriptをもっと簡単に書けるように改良された言語で、「Write Less, do More(少ない記述で、もっと多くのことをする)」がスローガンです。
学習コストの低さや、「jQueryプラグイン」と呼ばれる、JSに精通してなくてもスライドショーなどが作成できる小さなプログラムがネットで沢山配布されていることや、様々なブラウザに対応していることも人気の秘訣で爆発的に普及しました。
スピーディーなサイト制作が可能なので、非常に多くの現場で採用されています。ピュアなJavaScriptは初学者には難しいので、jQueryから学ぶケースも多いです。

JavaとJavaScriptの関係

JavaとJavaScriptは、名前は似ていますが全く別の言語です。
多くの場合、Javaはサーバー側で動く言語、JavaScriptはクライアント側(ブラウザ)で動く言語で、役割も全く違います。初学者の方などはよく同じ言語だと勘違いしてしまうので、気をつけましょう。
しかし、JavaScriptの名前の由来には大きく関係しています。JavaScriptが開発された当時、サン・マイクロシステムズ(現・オラクル)社が開発したJavaという言語が大きな注目を浴びており、2社が業務提携していた事もあったため、「LiveScript」という名前から「JavaScript」という名前に変更されました。

RubyとJavaScriptの比較

RubyとJavaScriptの違いは、Rubyはサーバーで動く言語、JavaScriptはクライアント側(ブラウザ)で動く言語ということです。
JavaScriptは海外の方が開発した言語ですが、Rubyは日本生まれのプログラミング言語です。1993年に、まつもとゆきひろ氏が開発して世界に広まっていきました。
Ruby on RailsというWebアプリケーションフレームワークが非常に有名で人気です。(フレームワークとは、アプリケーションを開発しやすいようにある程度のルールが決められている雛形のことです。)

JavaScriptで出来ることは?

JavaScriptを使うと色々な事ができますが、具体的には何ができるのでしょうか。JavaScriptはWebサイトに動きをつけることに始まり、入力フォームの制御、アプリの作成、データのビジュアライズができたりと、できる事が本当に豊富です。1つ1つ詳しく説明していきます。

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アプリを制作する際に、フロントサイドの部分は主に「フレームワーク」を使用して制作する事が多いです。フレームワークとは、1から全てアプリの機能を作らなくても、ある程度アプリを作成する為の機能が用意されていて、チームみんなで同じルールに基づいて作れる便利な雛形です。
JavaScriptのフレームワークでは、近年では「Vue.js」「React.js」などが人気で採用されています。

サーバーサイド

サーバーサイドはPHPやRuby、Javaなど他の言語を用いて、それぞれのフレームワークを使用して作ることが多いです。
フロントサイドからのデータを受け取って、何かしらの処理をして、またフロントサイドにデータを送ります。例えばチャットアプリですと、フロントサイドから送られてきたデータを受け取り、他の人にサーバーサイドから転送したりして使われます。
また、PHPの人気フレームワークの「Laravel」のフロント部分として、先ほどのJavaScriptの「Vue.js」が採用されているのもJavaScriptフレームワーク人気の理由の1つです。

スマホアプリの作成

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

ハイブリッドアプリ

「Webアプリとインストール型のスマホアプリの合わせ技」のような存在で、HTML/CSS/JavaScriptで開発したブラウザ上で動くWebアプリを「WebView」と呼ばれる、iOSやAndroid OSにWebページを読み込んで表示する仕組みを利用して作成します。

ネイティブアプリ

ネイティブアプリではこれまでに出てきたアプリとは違い、HTML/CSS/JavaScriptと言った言語は基本的に使用しません。
iOSの場合はSwiftなど、Android OSの場合はJavaなどの言語を使って制作します。
ネイティブアプリの場合、スマートフォン本体(デバイス)にもともと搭載されているカメラや電話帳機能などと連携することが容易です。また、動作スピードがハイブリットアプリよりも高速なことも特徴の1つです。

しかし近年では、JavaScriptフレームワークでもネイティブアプリの作成が可能で、「Electron」「React Native」などでデスクトップアプリや、スマートフォンのアプリが作成可能です。

Chrome、Firefoxの拡張機能を作成

JavaScriptでは、Chrome、Firefoxなどのブラウザの拡張機能(アドオン)の作成も可能です。
ブラウザで閲覧しているWebページのスクリーンショットを撮影する、Webページの文章で使われている文字の色を確認するアドオンなど、様々な種類が既に世の中で使用されています。
これらは自分でも作成可能で、「json」と呼ばれる形式の設定ファイル、HTML/CSS/JavaScriptを使用して制作可能です。

ブックマークレットを作成

JavaScriptでは、ブックマークレットの作成も可能です。ブックマークレットとは、ブラウザのブックマークにJSの短いコードを登録し、クリックすることで実行できる技術です。
「開いているページのURLをクリックしてコピーする」のような便利な細かい機能を自作できます。プログラムをブラウザに新規ブックマークとして登録すると作成完了です。

JavaScriptの勉強はこんな人におすすめ

JavaScriptで何が出来るかを詳しく説明してきましたが、実際にJavaScriptを勉強するにはどんな人がおすすめかご紹介します。
これまでJavaScriptに苦手意識を持っていた人、まだよくわからない・初めて聞いたという人、自分には必要ないと思っている人も意外なところでJavaScriptを勉強しておくと役に立つことや活躍するシーンがあるかもしれません。

Webサイトを作成したい人

JavaScriptはHTMLやCSSを習得後、もう一歩踏み出してWebサイトに動きをつけたい!という方におすすめです。
CSSでもアニメーションはつけることはできますが、ブラウザのスクロール取得、クリックの検知などアニメーションの「きっかけ」には、やはりJavaScriptが必須になってきます。Webデザイナーやフロントエンドエンジニア志望の方におすすめです。

プログラミング初心者

JavaScriptはプログラミング初心者の方にも入門しやすい言語として人気です。人気の理由は、テキストエディタとブラウザさえあれば動作する手軽な実行環境と、アニメーションとして動きが見えてモチベーションが上がりやすいところです。
少し難しい話になりますが、「int(整数)」「float(少数)」など「型」という概念を意識せず学べることが、C言語などより入門しやすい理由の1つです。

Webアプリ・スマホアプリを作成したい人

JavaScriptはWebアプリ・スマホアプリを作成したい人にもおすすめです。前述したハイブリットアプリという作成方法でスマホアプリの画面を作成できます。さらに、React NativeなどのJavaScriptのフレームワークを利用すれば、ネイティブアプリの開発も可能です。今後もこの流れは加速していくと思われるので、勉強しておいて損はないでしょう。

作業を効率化したい人

JavaScriptは仕事の作業効率化にも使うことができます。Webアプリケーションで集計したデータをCSVファイルという形式で書き出し、エクセルでインポートしてマーケティング業務で活用できます。
さらにオリジナルのアプリケーションも作成できますので、業務の効率化を目的としたMicrosoft Officeのようなオリジナルアプリケーションも作ることが可能です。

JavaScriptの勉強方法は?

JavaScriptの勉強方法は、やはり「ひたすらWebサイトを制作する」ことが1番大切だと思います。
まずは学習動画を見て一通り基礎を学んだら、あとは制作の数をこなしましょう。いきなりピュアのJavaScriptを使用してWebサイト制作を始めると難しいので、jQueryから始める方が多いです。
そして、毎回新しい課題を自分に与えることが大事です。「メイン画像のスライドショーを作ってみよう」「Ajaxという技術を使ってみよう」「CSSアニメーションと連携させてみよう」「計算見積もりシステムを作ってみよう」など、様々なジャンルの使用方法を試して制作していくうちに、身についていくと思います。実践が大事です。
jQueryに慣れてきたらピュアのJavaScriptの勉強も始めましょう!近年のJSフレームワークはほぼjQueryは使われておらず、JavaScriptの知識が必須になってきます。

まとめ

以上、JavaScriptについて書いてきましたが、この言語は非常に奥深く、制作できるものも多伎に渡ります。プログラミング入門者から上級者まで様々な層に愛用されている言語と言えます。
もともと「Webサイトを動かす言語」というシンプルな目的の言語として誕生し、一時期は邪魔者扱いを受けて人気を無くしたりもしましたが、目まぐるしい進化の歴史を辿り、今では大人気の言語に成長しており就職・転職にも非常に有利です。
JavaScriptを中心としたフロントエンド界隈は進化が非常に早いので流行を追いかけるのが大変ですが、今後もJSで出来ることは間違いなく沢山増えてくるはずなので、勉強しておいて損することはないでしょう。
まずは簡単なものでいいのでJSを書いて、Webサイトを動かしてみてください。そしてその時の感動を一生忘れないでくださいね。是非、楽しいJavaScriptの世界に入門してみてください!