JavaScriptでできる実例サンプルを紹介
今回は初心者向けにJavaScriptでできることや作れるものを実例交えて紹介します。
- JavaScriptに興味あるけど具体的に何ができるのかよくわからないという人
- JavaScriptでどんなものが作れるのか理解したい人
ぜひJavaScript（ジャバスクリプト）に関心のあるプログラミング初心者の方は参考にしてみてください。
JavaScriptでできること
おもにJavascriptは、Webブラウザ（Google ChromeやSafariなど）で動作するプログラミング言語で、Webサイトなどの開発に使用されます。
略してJS（ジェイエス）と呼ばれます。
そんなJavaScriptでできることを紹介していきます。
- ポップアップを表示
- Webページの一部分を更新
- 画像スライドショーを表示
- ユーザがWebページで入力した内容を判定
では詳しく解説します。
ポップアップを表示
Webサイトを見ていると急に画面上にウィンドウでメッセージが表示されることがあります。例えばこのようなウィンドウです。
このように画面上に表示されるウィンドウをポップアップといいます。このポップアップは OK ボタンを押すと閉じられます。
こういったポップアップはJavaScriptで表示されています。
Webページの一部分を更新
Twitterを例にするとツイートのタイムラインを画面下まで行くと丸い円がクルクルします。例えばこんな感じです。
画面下のクルクルしている円が消えるとツイートが増えてタイムラインが更新されます。
注目するのは画面全体が更新されるのではなく、タイムライン部分だけが更新されるところです。これはAjax（エージャックス）という技術で行われています。
画像スライドショーを表示
画像が多いWebページで使われているのが画像のスライドショーです。たとえば以下のようなWebページです。
両端の矢印を押すと画像が左右に移動します。こういった画像スライドショーもJavaScriptで行われています。
Webページに入力した内容を判定
会員登録や商品の購入で入力するWebページがあります。たとえばこんな画面です。
そうしたWebページで電話番号の項目に数字以外の文字を入力すると赤字で「電話番号は数字で入力してください」などとメッセージが表示されます。
こうした入力項目がおかしくないかをJavaScriptではリアルタイムに判定することもできます。
Googleスプレッドシートで業務を自動化
JavaScriptでGoogleスプレッドシートで業務を自動化することができます。
ExcelでいえばVBAでマクロを作成して業務を自動化して業務効率化を行えます。GoogleスプレッドシートではJavaScriptを使って自動化を行うことができます。
たとえば以下のようなことを行うことが出来ます。
- スプレッドシートの自動集計
- SNSやGmailなどのWebサービスと連携
- グラフ作成
※厳密にはGoogleスプレッドシートではJavascriptをベースに作られた Google Apps Script というプログラミング言語です。
JavaScriptでつくれるもの
つぎはJavaScriptでつくれるものの一例を紹介します。
電卓
JavaScriptでは電卓も実装することができます。
たとえばGoogle検索で 電卓 と検索してみると、以下のような電卓が表示されます。
こういった電卓もJavaScriptを使ってつくることができます。
参照：https://www.google.com/search?q=%E9%9B%BB%E5%8D%93
ゲーム（ルーレット）
JavaScriptではゲームもつくることができます。
一例として以下のようなルーレットゲームも作ることができます。
このゲームはJavaScriptで自分が作成したルーレットゲームです。
参照：https://uteee.com/sample/roulette/index.html
Googleマップ
GoogleマップもJavaScriptが使われています。
JavaScriptが使われているのは、画面を移動したり、ピンを打ったりしたときにJavaScriptを使ってサーバとAjax（エージャックス）通信を行っています。
グラフ
JavaScriptではグラフをつくることもできます。
たとえばGoogle検索で 日経平均 と検索すると、以下の画像のように日経平均のグラフが表示されます。
こうしたグラフもJavaScriptを使うとつくることができます。
まとめ
今回はJavaScriptでできることを紹介しました。
以外にみなさんが見るWebページでJavaScriptが使われていると実感したのではないでしょうか。それぐらいJavaScriptは需要がある技術だということです。
JavaScriptは需要が高く、習得すると仕事の幅が広がります。
さらにJavaScriptに興味を持たれた方は以下のページでJavaScriptを実際に動かしてみてください。
https://uteee.com/system/program-begin/6329/最後までお読みいただきありがとうございました。
Webプログラマ兼ブロガー | プログラミング基礎知識を発信｜Webプログラマ歴は10年以上｜JavaScript,PHP.HTML | 「人生の時間は有限。悪いことをしている時間はない」
→プロフィール