こんにちは。侍エンジニア塾ブログ編集部です。

プログラミングをこれから始める方にとって、JavaScriptは比較的人気なプログラミング言語の1つではないでしょうか。

しかし、JavaScriptが色々できることはわかるけど、具体的に何ができるのかよく分からない、という方もいらっしゃいますよね。プログラミング言語によってはできることとできないことがあるので、実はあなたの目的とJavaScriptがマッチしていないということも考えられます。

そこでこの記事では、JavaScriptで具体的にどんなことができるのか、例としてどんなモノが作れるのかを解説していきます。

JavaScriptを学習する前に、まず何ができるのかをしっかりと学んでおきましょう。

そもそもJavascriptとは？

JavaScriptは、主にInternet ExplorerやGoogle Chromeといったブラウザ上で動作するプログラミング言語です。ブラウザ以外にも、インターネットに繋がる様々なデバイスで使用されており、便利な生活を送る上で欠かせません。

Webプログラミングを学習している方にとって、JavaScriptはHTML/CSSの学習後に出てくるはじめての本格的なプログラミング言語になりますね。

※正確にはHTMLは「マークアップ言語」、CSSは「スタイルシート」であり、プログラミング言語ではありません。

JavaScriptはプログラミング言語の中でも、プログラムの記述や実行を比較的簡易に行うことができるスクリプト言語の一つでもあります。

JavaやCといったプログラミング言語では、プログラムを実行するためにソースコードを機械が読み取れるように変換する「コンパイル」という手続きが必要ですが、スクリプト言語では手続きが不要なので手軽にプログラミングできます。

そのため、プログラミング学習を始めたばかりの初心者でも、比較的取り組みやすいプログラミング言語になっています。

勉強を始めたばかりの方は、JavaScriptはWebページの動きを担当していると学習するのではないでしょうか。HTMLやCSSがWebページのデザイン(動きのない静的)を担当していることから、よく言われます。

しかし、JavaScriptでできることはものすごく幅広く、様々なモノを作ることができるのです。JavaScriptの基本をもっと詳しく知りたい方はこちらを御覧ください。

JavaScriptとは？概要・始め方・将来性を初心者にもわかりやすく解説

更新日 : 2020年7月23日

JavaScriptでできること

では、具体的に何ができるのかさっそく見ていきましょう！

Webサイトに「動き」を加える

HTML、CSSの操作を動的に行うことができます。

動的とは、Webページが表示された後に、HTMLの要素を追加したり、CSSで色を変えることができることを指します。

そのため、目立たせたいボタンやメニューにアニメーションや効果を追加したりできるので、ユーザーが使いやすいサイトを作ることが可能なのです。

Webサイトの利便性を向上させることは、ビジネス上ではユーザー獲得において重要な要素となります。これがもっともJavaScriptが使われる理由です。

もっと具体的な例で確認してみましょう。

具体例1:HTML要素を追加

下記のようなコードを書くと、HTML要素を追加することが可能です。

See the Pen appendChild2 by 河野七海 (@kouno73) on CodePen.0

このあと紹介するクリックイベントを使うことにより、クリックしたら動作するというプログラムにしています。

具体例2:CSSを変えて見た目を変更

JavaScriptはHTMLだけでなく、CSSの変更も可能です。

See the Pen anime4 by 河野七海 (@kouno73) on CodePen.0

こちらもクリックイベントと組み合わせてみました。

イベント処理

JavaScriptは、マウスの動作やクリックされたという動作をイベントとして取得することができます。そのイベントと紐づけて、いろいろな動作をつけることも可能です。

具体例1:クリックしたら動作する

先ほど紹介した、クリックしたら動作するプログラムですね。

See the Pen sample2 by 河野七海 (@kouno73) on CodePen.0

クリックされたことを判定するコードを入れ、その中に実際に起きる変化を書くことで、クリックしたら変化するプログラムを書くことができます。

具体例2:チェックされたら動作する

判定できるのはクリックだけではありません。下記のようなチェックボックスにチェックが入った時も、イベントとして取得が可能です。

See the Pen onchange2 by 河野七海 (@kouno73) on CodePen.0

こんな感じで、チェックしたら次の項目が表示されるプログラムが書けるというわけです。

その他のイベント

他にも、以下のようなイベントを取得することができます。

こんなにたくさんのイベントを取得することができます。

ユーザーの操作に応じて自由に処理を追加できるため、どんな機能でも実装できるといっても過言ではありません。

非同期通信

非同期通信とは、「リアルタイム通信」を実現する技術のことです。

通常Webサイトでは、「Internet Explorer」や「Google Chrome」といったブラウザ上からサーバーという処理を行うコンピュータへ通信を行い、サーバーから処理した結果を受け取ります。

ブラウザでURLを入力した時は、少し待たないとWebページが表示されないでしょう。これは、サーバーからの応答を待っているからです。

しかし、非同期通信を使ったアプリは、サーバーの応答を待たず次々と処理を行うことができます。

例えば、GoogleMapは地図を動かしても動かした差分だけ画面が更新されますが、これは次々とサーバーと非同期通信し、リアルタイムで画面を更新することで実現しているのです。

JavaScriptで作れるモノ

それでは、JavaScriptでどのような機能が実現できて、どんなものが作れるのかを紹介します。

Webサイト

一番メジャーな利用方法として、JavaScriptでは様々な動きをWebブラウザ上で表現できます。例えば、次のような機能をJavaScriptで作成できます。

最近は、Webサイト上でも簡単なアニメーションは、CSS3というもので表現されることもあります。

しかし、JavaScript等を使わないとブラウザの機能を利用した複雑な動きや細かな動作を作ることが出来ません。

なお、jQueryやBootstrap3と呼ばれるような、特定の動作が予め簡単に作れるように処理がまとめられているものもあります。

世の中にあるほとんどのWebサイトでJavaScriptが使われており、使われていないWebサイトの方が少ないです。

Webアプリ

JavaScriptは、Webアプリも作ることができます。JavaScriptだけでWebアプリを作ることも可能ですが、RubyやPythonなど、他のプログラミング言語と併用されることが多いです。

Webアプリ開発では、Webページのデザインや処理を担当するフロントサイド、サーバーでの処理を担当するサーバーサイドと分かれて作業することが多いです。

フロントサイド

フロントサイドでは、主にWebアプリの使いやすさを向上させるために、ボタンやメニューに機能をつけていきます。

現在ある多くのWebアプリでは、主に

などの機能に用いられています。

サーバーサイド

サーバーサイドJSと呼ばれる、サーバーと通信する機能を実装できるJavaScriptがあります。Node.jsというものやMeteor.jsが有名です。

リアルタイムにやり取りをするチャット機能や通知機能などの作成を得意としています。

なお、Node.jsやMeteor.jsはCloud9という開発ツール上でも簡単に学習や開発を始める事ができますので、こちらもチェックしてみてください。

Cloud9の使い方と便利機能！最強プログラミング開発環境（IDE）

更新日 : 2020年3月24日

スマホアプリ

スマホアプリには大きく分けてネイティブアプリとハイブリットアプリと呼ばれるものがあります。

ネイティブアプリはスマートフォン本体がほぼそのまま理解できる命令で書かれているので、スマホにとって動作させやすいものになります。

ハイブリッドアプリはWebの技術で記述して、通訳を通して大体ネイティブアプリと同じように動作させられるようにしたものとも言えます。

JavaScriptは様々な開発環境があるため、両方制作することが可能です。

ハイブリッドアプリ

JavaScriptでひとつコードを書けば、AndroidやiPhoneのiOSなど様々な環境へ配布することが出来ます。

代表的なものにはMonacaという開発環境などがあります。

⇒参考：Monaca https://ja.monaca.io/

ネイティブアプリ

通常ネイティブアプリはAndroidならJava、iOSならSwiftというプログラミング言語で制作しますが、Titaniumといったツールを使うと、JavaScriptのコードをネイティブアプリへ変換してくれます。

⇒参考：axway http://www.appcelerator.com/mobile-app-development-products/

Titaniumの動向などは、下記スライドなどが参考になるでしょう。

ゲーム

厳密に言えば、仕組みはWebアプリやスマホアプリと同じなのですが、そこに画像などの表示やルールを設けることで簡単にゲームを制作することも可能です。ルールの作り方次第なので、クイズゲームやシューティングゲーム、RPGなども制作可能です。

画像やアニメーションの表示など、ゲームを制作することを簡単にしてくれるツールが多数配布されていますので、こちらも参考にしてみてください。

JavaScriptでゲーム開発に必要な基礎とライブラリ活用術

更新日 : 2020年5月8日

JavaとJavaScriptの違い

初心者によくある疑問として、JavaとJavaScriptはどう違うのかという疑問があります。JavaとJavaScriptは名前は似ていますが、全く別のプログラミング言語です。

JavaScriptは、ユーザーがより使いやすいようWebページに動きを付けたり、Webサービスの開発で使用されます。クライアントサイド(クライアント端末で動作するプログラムの作成)で動作します。

対してJavaは、環境に依存せずどんな環境でも動作します。Java仮想マシン上で動かす事によって、WindowsやMac、Linuxなどデバイスを問わず動かすことができるのです。

サーバーサイドで使用されることが多く、業務システムやアプリ開発などの開発で使用されます。

Javaは、一度（プログラム）を書けば、どこでも実行できる汎用性の高いプログラミング言語であるのに対して、JavaScriptはWebページに動きをつけるために使用されると覚えておくと良いでしょう。

JavaScriptに関連する技術

jQuery

jQueryは、JavaScriptをより簡単に記述できるように設計されたライブラリです。JavaScriptで記述すると煩雑になってしまうソースコードも、jQueryを使用すると少ない記述で済ませられます。

プログラミング初心者でも扱いやすく、JavaScriptライブラリの中のデファクトスタンダードと言えるでしょう。

jQueryを使用する最大のメリットとして、どのようなブラウザでも使用できることが挙げられます。

Internet ExplorerやGoogle Chromeなど、各ブラウザにより仕様が異なっており、JavaScriptでは同じコードでも一部のブラウザでは動かないという現象がWeb開発の悩みとして多くありました。

しかし、jQueryを使用すればブラウザの違いを吸収し、どのブラウザでも同じコードで動かすことができます。WebサイトやWebアプリの開発で使用されることも多く、JavaScriptと一緒に覚えておきたいスキルです。

Ajax

Ajaxは、「Asynchronous JavaScript + XML」の略で非同期通信を行う仕組みです。同期処理では一瞬画面が白くなって画面が切り替わりますが、非同期通信では画像の遷移がない通信を行うことができます。

Ajaxを使ったサイトでは、Googleマップが有名です。Googleマップでは、画面が白くなることなくリアルタイムで地図情報が更新されていくのが分かると思います。

理解し使える事ができれば、Webサイトやサービス開発の幅も広がります。Ajaxは様々な技術が合わさって実現されており、その中でもJavaScriptは必要不可欠なスキルなので、ぜひ覚えておきたい技術ですね。

JSON

JSONはJavaScript Object Notationの略で、XML等と同様のデータ変換フォーマットの一種です。

JavaScriptと名前に入っていますが、Java、PHP、Ruby、Python等の言語でも使用することが可能です。XMLと比べ可読性が高く軽量であるため、最近ではWebアプリケーション開発などでもJSONを使用されることが増えています。

冗長なXMLと比べて通信時のデータ量を削減できるなどのメリットもあり、今後Web開発をしたいと考える方にとっては、JavaScriptと同様に知っておきたい技術です。

Javascriptを学ぶべき対象者は？

比較的習得難易度が低いことと、できることが多いため、初学者に人気のJavaScriptですが、どのような人が学習するべきかを整理すると、

といったようになります。

Javascriptは、「読みやすく書きやすい言語」なのでプログラミング初心者の人にはぴったりの言語ですし、Web上の表面的な部分を扱う言語なので成果が分かりやすく、インターネット社会において非常に需要の高い言語といえます。

逆にこれらの項目に当てはまらない場合は、JavaScriptではなく別の言語を学んだ方がいいかも知れません。あなたの目的に合わせて必要なプログラミング言語を診断する、プログラミング診断サービスを用意しました。

最短1分であなたに合ったプログラミング言語の選定が出来るので、本当にJavaScriptを学んだほうがいいかお悩みの方はぜひご利用下さい。

さっそく診断してみる

JavaScriptの求人状況

JavaScriptの知識を活かし、求人応募を考えている方もいらっしゃると思います。

求人サイトにてキーワード「JavaScript」で検索した場合、以下のような案件が2,650件見つかりました。

スマホアプリ開発エンジニア

JavaScript以外にも、PHP/Ruby/Objective-Cなど様々なスキルを使用する案件が多く見られました。アプリ開発に対する幅広いスキルを持ったエンジニアを募集している求人が多く、JavaScriptの知識だけでは求人応募は難しいでしょう。

フロントエンドエンジニア

JavaScriptの他には、PHP/Ruby/Python/jQuery/React/Node.jsなどを使用した求人が多く見られました。

JavaScriptのみのスキルでの求人も一部ありましたが、ほとんどは上記のようなスキルも合わせて求められています。

特にPHP・Rubyを使用した求人は多く見られ、フロントエンジニアを目指す方は一緒に学ぶと良いかもしれません。

Webデザイナー/UI/UXデザイナー(Web制作)

JavaScriptと一緒にHTML5、CSS3を求められている求人がほとんどです。PHPやVue.jsなどのフレームワークも理解していれば、応募できる求人の幅がより広がるという印象です。

HTML・CSS・JavaScriptの3点の基本が理解できていれば、求人に応募できるチャンスがあると感じれました。

最後に、JavaScriptの求人数を他のプログラミング言語と比較し表にまとめてみました。

プログラミング言語	求人数
JavaScript	2650
TypeScript	554
JAVA	5086
PHP	3017
Ruby	1842
Python	1917
Go	3749
Swift	819

他の言語の求人数と比較しても、求人はかなり多いと感じました。

ただし、JavaScript単体で使用できても応募できる求人は少ないので、HTML×CSS×JavaScriptなどスキルを掛け合わせて持っておくことが大事でしょう。

どのようにJavaScriptを学べばいいのか？

JavaScriptを学ぶには、

この2種類があります。

独学で学習を始める場合、無料学習サイトなど多く存在するので、以前よりも学習を始めやすい環境になってきています。ですが、独学で学習する場合、学習時間はおおよそ1000時間かかると言われています。

そのため、モチベーションが続かず挫折する可能性も非常に高いため、プログラミングを学ぶことは難しいと印象を持つ人もいるのではないでしょうか？

プログラミングを挫折せず効率的よく習得するには、適切な環境と適切な教材で学習を続けることが鍵となります。

このように疑問を持つ人もいるでしょう。

では、そのような環境を作るためにはどうすればいいでしょう？ 答えは、上で紹介したプログラミングスクールで学習をすることです。

弊社「侍エンジニア塾」では、

を提供いたします。あなたも侍式メソッドで、効率的なプログラミング学習を体感してみませんか？

といった不安や悩みを抱えているあなたは、まず、弊社「侍エンジニア塾」の無料体験レッスンを受けてみてはいかがでしょうか？ 弊社では未経験から転職やフリーランスとして活躍されている卒業生を、多く輩出している実績があります。

JavaScriptを学ぶ目的を明確化し、その明確になったキャリアに向かって最短で学習するための学習プランを提案させて頂きますので、無駄のない学習で最速でエンジニアになれるイメージが湧くと思います。

不安があって、なかなか未来に向かって一歩踏み出せないあなたを全力でサポートいたします。遠方の方でもオンラインで無料体験レッスンを受講出来るので、お気軽にご利用お待ちしております。

まとめ

いかがでしたか？ JavaScriptでできること、いろいろイメージが具体化してきたと思います。

JavaScriptはまだまだ進化の過程にあるため、今後どんどん環境が変わっていくことが予想されます。つまり、まだまだ無限の可能性を秘めているのです！

これからますます楽しみなJavaScript、この機会にぜひ学習してみてください。

未経験からWebアプリ開発にいたるまで！エンジニアになるためのプログラミングスキル修得方法

更新日 : 2020年3月23日

プログラミングは必須！現代の3種の神器と言われるビジネススキルとは

更新日 : 2020年7月30日

87.5%が挫折！？プログラミング独学のステップと成功のコツを解説

更新日 : 2020年6月30日

フリーランスエンジニアと会社員の年収や働き方の違いを徹底比較

更新日 : 2020年1月28日

【体験談付】3Kはもう古い！？エンジニアが手にする『5つの自由』とは？

更新日 : 2020年7月30日