JavaScriptでできること(作品・アプリ例も紹介)

JavaScriptを学ぼうと思っています。

JavaScriptは動くウェブサイトを作るための言語、 というイメージがありますが、 具体的にどんなことができるのかを知りたいです。

今回はこのような疑問に答えていきます。

これからプログラミングを始めようとしている方にとって JavaScriptはおすすめの言語です。

動きのあるWebサイトを作ることが出来るのはもちろん、 サーバーサイドのプログラムやゲームを作ることもできたり、 活躍の幅が広がっています。

そこでこの記事では、JavaScriptでできることを 具体的なアプリ・作品例と共に紹介します。

JavaScriptの特徴

まずは簡単にJavaScriptの特徴を説明します。
JavaScriptは主にWebフロントエンドの開発言語として使われていて、 フロントエンド開発(クライアントサイド)ではシェアをほぼ独占しています。

これまでは「JavaScript = クライアントサイドの言語」という位置づけでしたが、 「Node.js」というJavaScript実行環境を使うことで、 サーバーサイドの言語としても使えるようになりました。
さらに、ハイブリッドアプリと呼ばれるiPhone/Androidの両方で動作する スマホアプリを作ることもできます。

JavaScriptの学習難易度は易しめです。 書籍やWebサイトなど学習教材がたくさんありますから、学びやすい言語です。 ただし入り口部分は易しいのですが、奥が深い言語なのであまり深入りしすぎると学習効率が悪くなります。自分がやりたいことに応じて学ぶようにしてください。

ライブラリを有効活用する

JavaScriptにはたくさんのライブラリが存在します。 一番有名で使用されているのは「jQuery」です。

それ以外にも特定の機能に特化したライブラリが多数あり、 それらのライブラリをうまく取り入れることで 効率的に開発ができるようになります。

1から自分で作るのもいいのですが、 ライブラリという先人の知恵を上手く活用することをおすすめします。

JavaScriptででできること: ブラウザでのUI編

できること①:メニュー操作

メニュー

Webサイトの案内図の役目を果たすのがメニューです。 そのサイトにどんな項目があるのかを教えてくれます。

上図のようなメニューを階層型ドロップダウンメニューと呼び、 他にもハンバーガーメニューなどいろいろなメニューの実現方法があります。 こうしたメニュー項目を表示させたり非表示にしたりする操作をJavaScriptで実現できます。

メニューを作る場合は「jQuery」を利用して作ると簡単ですし、 ライブラリを使う手もあります。

できること②:画像スライダー

画像スライダー

サイト内の画像が切り替わる機能をスライダーやスライドショーと言い、 主にサイトのメイン画像部分で使われます。 画像は手動でも自動でも切り替えることができます。

スライダーとして有名なライブラリが「Swiper」です。 Swiperは数千ものサイトで使用されているライブラリで、 BMWやDisneyといった超有名企業サイトでも使われています。

Swiper

できること③:Ajaxでの非同期通信

Google Map

JavaScriptがメジャーな言語になるきっかけとなったのが 「Ajax」という非同期通信技術です。
「Ajax」を使っている代表的なアプリが「Google Map」です。

「Google Map」が出てきた当時 「JavaScriptでこんなことができるんだ!」 と多くの技術者がJavaScriptに再注目することになりました。

できること④:カレンダー

カレンダー

上図のようにJavaScriptでカレンダーを作ることもできます。 日付を入力する場合、自分で入力するよりも、 カレンダーから選択して入力できた方が便利です。

カレンダー描画のJavaScriptライブラリで有名なものとしては 「flatpickr」「Datepicker」などがあります。

できること⑤:グラフ

グラフ

データを基にグラフを描画することもできます。 株価のデータがあれば、上図のような株価の推移グラフができます。

グラフを描画するJavaScriptライブラリは多数あります。 「c3.js」「Chartist.js」「Chart.js」などがあり、 中でも有名なのが「D3.js」です。

ただし、グラフ用のライブラリを導入する場合は、 設定等が多少面倒です。画像スライダーのようには簡単には設定できません。 サンプルコードを読んで、表示したいデータを設定したり等の手間が掛かります。

D3.js

できること⑥:ゲーム

phina.js

JavaScriptでいろんなゲームを作ることもできます。 シューティング系、落ちモノ系、トランプゲーム、脱出ゲームなど。
自分で1からロジックを構築してもいいですし、 ライブラリを使うと効率よく開発できます。

ゲーム用のJavaScriptライブラリとしては 「phina.js」や「enchant.js」などがあります。

JavaScriptでできること: その他

できること⑦:サーバーサイドプログラミング

node.js

JavaScriptといえばクライアントサイド言語というイメージでした。 ですが「Node.js」というJavaScript実行環境の登場によって、 サーバーサイド言語としてもJavaScriptが使えるようになったのです。 サーバーサイドでも使えるようになって、 JavaScriptの活躍の幅がますます広くなりました。

Node.jsを使っているサービスとしては、決済サービスのPaypalや、 タクシー配車サービスのUberなどがあります。

できること⑧:スマホアプリ

monaca

JavaScriptでは「ハイブリッドアプリ」と呼ばれるスマホアプリを作成することができます。

普通、iPhoneアプリを開発する場合はSwiftというプログラミング言語を使います。 Androidアプリを開発する場合はJavaかKotlinというプログラミング言語を使います。 両方のアプリを作る場合は別々の言語で作る必要があります。

ですがハイブリッドアプリならJavaScriptで書くだけで、 iPhone/Androidの両方で動くアプリを作ることができます (開発にはJavaScript+HTML+CSSの知識が必要です)。 1つの言語で作るだけなので、開発効率が上がります。

ハイブリッドアプリの開発環境としては「Monaca」が有名です。

JavaScriptを学ぶには

タイトルとURLをコピーしました