JavaScriptでできることは山ほどありますが、今回はその一部を紹介します。
具体的にその言語で「何ができるのか」をはっきり知っておくと、学習する時に役に立つと思います。
プログラミングを覚えるには、実際に何かを作ってみるのが一番近道です。今回紹介する「JavaScriptでできること」を手を動かして試してみましょう。
今回は「タイマーが作れる」「計算ができる」あたりは省略します。
目次
HTMLを操作できる
DOM操作と呼ばれるやつですね。これはJavaScriptの醍醐味ともいえます。
以下のボタンをクリックすると、その下のテキストが変化します。
ここのテキストが書き換わります。
JavaScriptはクライアントサイド（ブラウザなど）で動く言語です。一度ブラウザに表示されたドキュメントを、動的に書き換えることができるのです。
アニメーション
CSSだけでは表現できない複雑なアニメーションをWEBサイトに加えることができます。
ここのテキストがアニメーションしながら消えます。
JavaScriptを始めたばかりの時、アニメーションの処理ができるようになって興奮しましたね。
非同期通信ができる
Ajaxを利用すれば非同期通信ができます。非同期通信とはページ自体を再読み込みせず、差分だけを更新することができる技術です。
Ajaxは、「Asynchronous JavaScript + XML」の略です。
有名な例だとGoogle Mapですね。Google Mapをドロップして動かすと表示されていなかった範囲が読み込まれますが、ページは遷移しません。
これが非同期通信です。差分だけ更新されていきます。
サーバーサイトでも動く（Node.js）
本来JavaScriptはクライアント側（ブラウザ）で動く言語でした。しかし、Node.jsの登場によりサーバーサイドで動くこともできるようになりました。
大量のリクエストにも強く、リアルタイムの処理ができますが、Node.jsが利用できるレンタルサーバーは限られています。PHPなどに比べると、導入するのがかなり手間ではあります。
参考記事：
初心者にもわかりやすく解説！サーバーサイドJavaScript、Node.js とは？ | Tech2GO
WEBアプリケーションが作れる
まず、WEBアプリって何？ってとこですが、PCなどにインストールせずにWEB上で利用できるアプリのことです。有名なものだとGmailとかEvernoteとかFeedlyとか。SNSとかもそうです。インストールせずにWEB上で利用できますね。
これらは基本的にサーバーサイドの言語を利用して作られていますが、JavaScriptだけでWEBアプリを作ることもできます。
JavaScript製のアプリだと、Aceというテキストエディタがあります。
JavaScriptだけでここまでできるのは面白いですね。
WEBアプリを作るのに便利なライブラリやフレームワークがたくさんあるので、それらを試してみましょう。
デスクトップアプリも作れる
Electronというフレームワークを使えば、デスクトップアプリまで作れます。テキストエディタのAtomやVisual Studio CodeもElectronで作られているそうです。
参考：Electronでアプリケーションを作ってみよう – Qiita
最近発売されて気になる本
Google ChromeやFirefoxの拡張機能が作れる
何となく拡張機能を作るのは難しそうですが、ちょっとした拡張機能なら意外と難しくないです。
個人的に作ってみたやつ。
はてなブログ編集用のChrome拡張機能を作りました（使い方の説明） | SHIROMAG
「ブラウザにこんな機能があったら便利なのになー」って思うことがあれば、拡張機能を自作しちゃえば良いと思います。
WebAPIが利用できる
JavaScriptで各WEBサイトなどで公開されているAPIを利用して、WEBサービスを作ったりアプリ作ったりできます。
JavaScriptでよく使われるのは、サーバーのデータをリクエストして、その結果をWEBサイトに表示することですね。
例えば、AmazonのAPIを利用すれば、取得したい商品名をリクエストして価格や在庫などの情報を受け取り、サイトに表示するなんてことができるのです。
参考：「Amazon API」の使い方を紹介します！最安値やランキング取得できるよ①－アソシエイトID（タグ）登録編－ – ぱんぶろ
ちなみに、このブログではサイドバーにはてなスターの合計数を表示させてますが、これもAPIを利用しています。
「うちのブログのスター数をくれ！」とリクエストして結果を受け取り、表示させているのです。
参考：はてなスター取得 API – Hatena Developer Center
ゲームが作れる
JavaScriptでゲームを作ることもできます。フレームワークやライブラリを使って、複雑なゲームも実装することができます。
Unityで開発ができる
Unityはゲームを作成できるゲームエンジンです。UnityはJavaScriptで開発ができるので、本格的なゲームを作ってみたい人は試してみて下さい。
参考記事：JavaScriptではじめるUnityプログラミング入門
ちなみに、Unreal EngineというC++ベースのゲームエンジンがあるのですが、こちらは「Unreal.js」というプラグインを入れるとJavaScriptを利用することができます。
参考記事：Unreal.js 入門 – Qiita
Unrela Engineはなんと無料で利用できます。
Chromeのスプレッドシートやドキュメントでスクリプトが使える
Google Chromeで利用できるスプレッドシートやドキュメントでもJavaScriptが利用できます。
ExcelがあればVBAでプログラムが組めますが、無料で表計算ソフトを使いたい人且つプログラムを組みたい人は、これらのChromeアプリでJavaScriptを試してみてください。
でも、実務で使っている人はほとんどいないと思うので、あくまでも遊び感覚かなと。
PhotoshopやIllustratorの機能を拡張・作業を自動化できる
個人的に時間があれば試してみたいのが、PhotoshopやIllustratorでのJavaScriptの利用です。
デフォルトにはない機能を追加したり、作業を自動化することができます。
参考記事：
JavaScriptでPhotoshopを自動化してみよう！基礎編① | Go-Nextブログ
私自身エンジニアではないので仕事でJavaScriptを使うのはWEB制作に関する部分だけですが、趣味で色々試しています。
参考書のコードを動かすのも良いですが、実際に何かを作ってみた方が学習は捗ります。
「作ってみたい！！」というものがあれば、とりあえずチャレンジしてみましょう。
関連書籍
他にもこんな記事書いてます。
HTML・CSS・JavaScriptを独学するのにおすすめの入門書・参考書まとめ – SHIROMAG
最近のコメント