JavaScriptでできることを実例サンプル紹介

2022年12月20日プログラム始め方JavaScript

JavaScriptでできることを実例サンプル紹介
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を実際に動かしてみてください。

関連記事:JavaScriptでプログラミングを始める方法

最後までお読みいただきありがとうございました。

プログラミングスクール受講メリット

・メンターにすぐ聞けるので分からないところでつまづかない
・受講生同士で学び合いモチベーション維持しやすい
・就学後に就職支援や進路サポートを受けることが出来る

ユート
ユート

1985年生まれ1児の父親です。Web系エンジニアを10年以上しています。
プロフィール
Amazon欲しいものリスト

2022年12月20日プログラム始め方JavaScript

Posted by ユート