Javascriptで何が作れる?スマホアプリやjavascriptの例を紹介。

この記事を読んでいるあなたは、

・Javascriptでどのようなことができるのか
・Javascriptでスマホアプリが作れるのか
・そもそもJavascriptとはどんな言語か

上記のように考えているかもしれません。

そもそもJavaScriptとは何なのか。
JavaScriptという名前を聞くと、一瞬Javaの仲間かと思う人も多いのではないでしょうか。
実はJavaという言葉が付いているだけで、Javaとは全く別物のプログラミング言語になります。

この記事では、あなたにJavascriptがどのような言語で、できることや作れるアプリには何があるのかを紹介していきます。

Javascriptとは

Javascriptで何が作れる

歴史

JavaScriptはもともとNetscape Navigatorというブラウザ専用に開発された「LIve Script」という言語でした。当時大人気だったJavaにあやかって、その名前がJavaScriptになったといわれています。
いまでは、InternetEvplolerやGoogleChromeなど、いくつもあるブラウザで動く言語です。

ただ、ブラウザによっては動かない機能などもあり、現在もバージョンアップが続けられています。

特徴

JavaScriptは、WEBページにおける複雑な動作を可能とする言語です。詳細は後で紹介しますが、動的にコンテンツを更新したり、CSSスタイルを変更したりすることができます。

JavaScriptは、とても身近なところで使用されています。
パソコンや携帯電話、スマートフォン、テレビ、車など、身近にあるデバイスに搭載されている言語でもあります。

JavascriptとHTML

HTMLやCSSを学ぶと、そこに必ずと言っていいほどついてくるのがJavascriptです。
HTMLは、ホームページを作成する上でページ構成を行う言語です。そこにCSSが加わることで、文字の色や背景色の色といったレイアウトやデザインを追加します。そして最後に、その静的なページに動きを与えるのがJavaScriptです。

HTMLやCSS、JavaScriptなどは、サーバー側ではなく、クライアントPC側で実施される言語になります。

JavaScrtpyのライブラリ

Javascriptで何が作れる

JavaScritを使用したライブラリをいくつか紹介していきます。

Ajax

JavaScritのライブラリの一つです。
Asynchronous JavaScript + XML の略で、ブラウザ内で非同期通信を行ないます。バックグランドで様々な操作を行えるので、画面遷移を伴わない動的なWebアプリケーションの実現が可能となっています。
Google Web ToolkitやjQuery、SpryなどのAjax用アプリケーションフレームワークがあります。

jQuery

JavaScriptコードををより簡単に記述できるように、設計されたJavaScriptのライブラリの一つです。
ブラウザの違いを意識する必要はなく、Ajaxの処理なども簡単に記述することができます。HTMLの部品操作も簡単に行えます。

JSON

JSONとはJavaScript Object Notationの略で、JavaScript のデータ定義文をベースとしたテキストベースのデータ交換用フォーマットです。
Java, PHP, Ruby, Pythonなど、様々な言語において使用することができます。

Javascriptで画面に動きを加える

Javascriptで何が作れる

では、実際にJavaScriptでどのようなことができるのか、紹介していこうと思います。

ポップアップウィンドウ

WEBページで利用される、メッセージ画面や確認画面、広告の表示などに使用されるものです。ネット販売のサイトでフォームを入力した際に、エラーがある項目をポップアップで表示したりするのもJavaScriptによるものです。
わざわざページを遷移して、1ページ作る必要もなく、使用する側にもストレスを与えずに画面の動きが円滑になるので一番良く使用されます。

Googleマップの表示

Googleマップを掲載したホームページを見ることは多いと思います。
お店や会社など、GoogleMapを埋め込む際に、Javascriptが使用されています。手順は、GoogleMapからAPIキーを取得し、地図を表示させるコードをJavaScriptで記述します。
該当の場所にピンをたてたりすることもできますので、ホームページ作成においてはよく使用されるJavaScriptの一つです。

画像のスライダー

ホームページで画像をスライドさせる機能や、画像をクリックしたら拡大するようなものもJavaScriptのライブラリの一種であるjQueryで使用されています。

Googleアナリティクス分析

サイトにどれだけの人が訪れたかなどを分析するシステムであるGogle Analythicsの組み込みにもJavaScriptが使用されています。

Javascriptでアプリを作る

JavaScriptでは、ブラウザの動作だけでなく、アプリを作成することもできます。
JavaScriptでゲームアプリを作成できる開発環境を紹介します。

Unity

Unityは、WindowsとMacの両方で動作するゲーム開発環境です。
もともとはJavaScriptが使用できたため、いまでも検索するとUnityとJavaScriptの組み合わせが引っかかってきます。
しかし、昔から開発している人であればともかく、いまから開発しようとしてUnityを入れた場合、JavaScriptは使用できません。もともと、Unityでは「C#」「JavaScript」「Boo」の3つのスクリプトが使用可能でしたが、現在はUnityを使用する場合はC#一択となっています。

Monaca

Monacaは、HTML5、JavaScriptなどで開発な可能なゲーム開発環境です。
iOSとAndroidの両方の開発が同時に可能であり、開発の環境がクラウドに準備されているので、開発側の手間も省ける便利さがあります。
デバッガーも準備されているので、HTML以外の言語は苦手という人におすすめの開発環境です。

React Native

React Nativeは、Facebookが作成したオープンソースのモバイルアプリケーションフレームワークです。
iOS / Androiのどちらでも動くアプリを開発でき、Facebook以外にInstagramやSkypeなどの開発のこのReact Nativeで行われています。
JavaScriptの中のUI管理フレームワーク「React」を使用して開発を行います。
紹介してきた中では、一番高難易度な開発環境ともいえます。

Javascriptは、画面に動きを与えたりアプリを作ったりできる

Javascriptがどのような言語で、できることや作れるアプリには何があるのかを紹介してきましたが、いかがでしたか?

フロントエンドエンジニアであれば、確実に覚えておきたい言語です。またライブラリの一つであるAjaxを使用すれば、サーバーサイドでも動作が可能となるので、WEB関連の技術を身に着けたいエンジニアには必見となる技術です。
また、難しそうなスマホアプリも開発ができる言語でもあります。

ぜひJavaScriptを覚えてみてはいかがでしょうか。