JavaScriptでできることとは？おすすめの学習方法を徹底解説

Web上で動作する、もっとも身近なプログラミング言語『JavaScript』。現在のJavaScriptはWebアプリの開発のみならず、さまざまな場面で活躍するプログラミング言語となっています。

今回はJavaScriptでできることと、おすすめの学習方法を初心者向けにご紹介します。

JavaScriptとは

JavaScriptとは主に、Google ChromeやSafariといったブラウザ上で動くプログラミング言語です。

JavaScriptを使えば、たとえば以下のようなことができます。

• ブラウザ上に表示された画面を部分的に動かす
• 画面上に複雑なアプリケーションを構築する
• サーバーとの情報のやり取りをする

JavaScriptでできること

ブラウザ上でのJavaScriptは、もともとあまり多くの動きができるプログラミング言語ではありませんでした。

しかし近年はスマホやPCなどのIT端末の性能向上や、JavaScriptそのものの進化によって、JavaScriptでできることは以前より幅を広げました。

この記事では、JavaScriptを使えば実現できる代表的な6つのことをご紹介します。

1. ブラウザに表示された画面に動きを与えられる

ブラウザ上で表示するHTML（Webページの内容と構造を記す言語）やCSS（Webページの装飾を指定する言語）をJavaScriptで操作し、画面に動きを与えられます。

たとえばユーザーのスクロールに合わせて、画面上の背景デザインを変化させたり、ローディング時のアニメーションを作ったりできます。

See the Pen Hand written SVG text animation by Matthew Ellis (@mellis84) on CodePen.default

▲出典：Hand written SVG text animation (anime.js公式デモ)

2. サーバーと通信して情報を送受信できる

JavaScriptは、サーバーと通信して情報を取得することもできます。

Web上のコンテンツは基本的に「サーバーサイド」と「フロントエンド」のふたつのシステムで構築されています。

ここでいう「サーバーサイド」とはサーバー側で動いているプログラムのことを示します。

サーバーサイドのプログラムは、たとえば以下の役割を担っています。

• URLに対してどのページを表示するかを制御する
• データベースから特定の情報を取得する

一方でフロントエンドのプログラムは「サーバーサイドから取得したWebページをブラウザに表示する」などの役割を担っています。

ブラウザ上で動くJavaScriptは、フロントエンドとサーバーサイド間のやりとりを行える言語なのです。

たとえば以下のことを実現できます。

• 郵便番号をフォームに入力すると、それに対応した住所をサーバーから取得してフォームに表示させる
• チャット画面を開いているとき、他人が送信したチャットメッセージを自分の画面に表示させる
• 検索フォームに入力した単語に関連するキーワードの候補を表示する

▲ユーザの入力に合わせて関連する検索候補を表示できるのは、JavaScriptがサーバーと通信を行なって情報を取得してくれているおかげ

3. Webページ上に複雑なアプリケーションを作れる

「画面を部分的に動かす」「サーバーと情報を送受信する」などができるJavaScript。その機能を活用して、ブラウザ上に高度で複雑なアプリをつくれます。

たとえば表計算ソフト『Googleスプレッドシート』やワープロソフト『Googleドキュメント』などは、JavaScriptにより動的なコンテンツを精製しています。

▲出典：Google スプレッドシート

近年ではこのような「ブラウザ上で動作する複雑なアプリケーション（Webアプリ）」の需要が高まってきています。

Webアプリは「iPhoneかAndroidか」といった端末の違いを気にする必要はなく、「職場ではPCから、家や通勤中にはスマホから使用」なんて使い方が可能です。

PCやスマホ、タブレットなどさまざまなデバイスを複数所有するのが一般的ないまの日本では、こういった使い方をできるブラウザアプリの需要は高いです。

4. スマホアプリを作れる

ここまでは「JavaScriptはブラウザ上で動くもの」だと説明してきました。

しかし近年ではJavaScriptの役割が拡大して、ブラウザ以外の環境でも活用されるケースが増えています。

ブラウザ外でJavaScriptが活用されるパターンのひとつがJavaScriptでの「スマホアプリ開発」です。

もともとスマホアプリは、Androidなら『Java』や『Kotlin』、iOSなら『Swift』や『objective-C』などのプログラミング言語で開発されていました。

しかしAndroidとiPhoneで必要なプログラミング言語が違うのは開発者にとって不便なところです。

この状況を打破したのが『React Native』。これは、JavaScriptのスマホアプリ開発用のフレームワーク（アプリ開発をサポートするパッケージ）です。

React Nativeを活用することで、開発者たちは「Android、iOSのどちらにも対応したスマホアプリ」をつくれるようになりました。

React Nativeでつくられたプロダクトの代表例には、スマホアプリ版のFacebookやInstagramなどが挙げられます。

▲出典：Instagram

5. チャットボットなどサーバーで動くアプリケーションを作れる

▲人間の代わりに宅配便の再配達依頼などを引き受けてくれるチャットボット（出典：クロネコヤマト　LINEで宅急便）

ブラウザ外でJavaScriptが活用される2つめのパターンが「サーバーサイドのシステム開発」です。

もともとブラウザで動かす前提でつくられたJavaScriptは、サーバーサイドでは動かないプログラミング言語でした。サーバーサイドでは『Java』『Ruby』『PHP』などのプログラミング言語が用いられていたのです。

しかし『Node.js』が開発されたことによって、サーバーサイドでJavaScriptを動かせるようになりました。

開発者たちはフロントエンドだけでなく、JavaScriptの技術でサーバーサイドも同時に開発できるようになったのです。

Node.jsを活用すれば、JavaScriptでWebアプリのサーバーサイド側のシステムを構築できます。

6. スプレッドシートと連携して業務効率化を図れる

▲GASの編集画面（出典：Google Apps Script）

ブラウザ外でJavaScriptが活用されるパターンの3つめが「スプレッドシートなどのGoogleサービスと連携した業務自動化・効率化システムの開発 」です。

GoogleドキュメントやGoogleスプレッドシートをはじめとしたGoogle製のサービスでは、JavaScriptをベースにしたプログラミング言語「Google Apps Script（GAS）」で業務の自動化や効率化のシステムをつくれます。

GASはあくまでGoogleが自社製品のために用意したJavaScript拡張言語です。しかしその自由度が高いため、多くの企業や個人がGASを利用しています。

ブラウザ上から編集＆実行できるので、開発環境を用意する必要がなく手軽に扱えるため人気があります。

GASを利用すれば、以下が可能になります。

• Googleスプレッドシートの自動操作や高度な集計をする
• GASのプログラムを使って他のWebページとの情報の送受信をする
• 日時を指定して作成したGASのプログラムを定期的に自動実行すれば日報の作成など定型的な業務を自動化できる
• GASのみでWebページの開発・公開ができる
• GASでスプレッドシートやドキュメントと連携しながら社内用に情報をまとめたwikiページを展開できる

Google Apps Scriptについて、詳しくは以下の記事をご覧ください。

JavaScriptはどんな人に向いている？

もともとはブラウザのみで動作するプログラミング言語だったJavaScript。しかし現在ではJavaScriptの技術ひとつでさまざまなことを実現できるようになりました。

これからプログラミング言語を学習したい人、かつどの言語から始めるか迷っている人は、とりあえずJavaScriptから始めてみるのはおすすめできます。

とくに

• 自作のWebアプリを開発したい人
• 自分のブログやホームページのデザインや画面動作を凝りたい人

には、JavaScriptはぴったりのプログラミング言語です。

JavaScriptはWebアプリや画面上のアニメーションなど「目で見て分かるもの」をつくるときに活躍することが多いです。

そのため「自分がつくったものを視覚的に確認したい人」「デザインや画面上の装飾をこだわりたい人」こそ、楽しみながら学習を進められるでしょう。

JavaScriptを学習する方法

プロパティの操作

初心者におすすめの学習法が、ブラウザ上に展開されたWebページ（HTML）上のさまざまな要素の操作です。

JavaScriptの基本は、HTML上の要素が保持するさまざまな値（プロパティ）の操作です、入力フォームに文字列を書きこんだり、画面上の要素を動かしたりできます。

プロパティの操作には以下の方法があります。

• JavaScriptの開発環境下で、入力フォームや画面上の要素を動かすプログラムをつくる
• Chromeの検証モードなどを使い、JavaScriptのコードを変更してみる

この基本の操作を繰り返し、JavaScriptの基本的な仕組みに慣れましょう。

▲Chromeの検証モード。これをポチポチいじっているだけでも楽しい

Webページ制作

だんだんとJavaScript慣れてきたら、次はHTMLとCSSのマークアップを利用しつつ、JavaScriptを利用した自作のWebページをつくってみましょう。

アニメーションを取り入れたり、ユーザの操作に合わせて画面を変化させたり、段階をふんで処理を行います。そうすれば、少しずつJavaScriptの技術を身につけられるはず。

アプリ制作

公式ドキュメントや解説本／解説記事を読みながらJavaScriptの使い方を覚え、ある程度基本的な作業をこなせるようになったら、好きなアプリを制作してみましょう。

ただしアプリ制作では、JavaScript以外のプログラミング言語やIT技術を絡めながら学習していく必要があります。そのときは逃げることなく、必要となった新しい技術を身につけていきましょう。

そうすることで、JavaScriptを他の技術と組み合わせながら開発を行う総合的な力が身につきます。

プログラミングスクールの利用

JavaScriptの学習を進めるにあたって、調べてもいまいち理解できない事象に出会うこともあると思います。

そんなときに役立つのがプログラミングスクールです。わからないことがあれば、必要に応じて講師に質問しながら学習を進められます。

またプログラミングスクールのほか、Web上で利用できるプログラミング学習サービスもあります。Webから利用できる学習サービスは、自分のペースに合わせて学習できるのでおすすめです。

必要に応じてスクールやサービスを利用しながら、自分にあった学習法でJavaScriptのスキルを身につけていきましょう。

まとめ

時代の変化とともに機能を発展させ、現在では高度なWebアプリやスマホアプリ、さらにはサーバーサイドのシステムまで幅広い場面でJavaScriptは活躍しています。

年々その重要性と注目度を増しているJavaScript。学習のために用意するものが少なく、勉強しやすいプログラミング言語でもあるので、これからプログラミングの学習を始める人にもおすすめの言語です。

（執筆：sig_Left　編集：Sansui Riho）