fbpx
  1. HOME
  2. ブログ
  3. エンジニアになろう!
  4. JavaScriptを使ってできることをわかりやすく解説!

JavaScriptを使ってできることをわかりやすく解説!

JavaScriptでできることとは?

にゃんこ師匠 にゃんこ師匠
今日は『JavaScript』でできることを紹介していくぞ〜
ミツオカミツオカ
プログラミング初心者でも『JavaScript』って名前だけは聞いたことがあると思いますね
にゃんこ師匠 にゃんこ師匠
そうじゃな〜!それくらい代表的なプログラミング言語じゃ
ミツオカミツオカ
でも、「具体的になにができるのか?」「JavaとJavaScriptは同じものなのか?」と疑問に思ってる人もいるんじゃないでしょうか?
にゃんこ師匠 にゃんこ師匠
では、その辺も詳しく解説していこかの〜

そもそもJavaScriptとは?

JavaScript(ジャバスクリプト)は、プログラミング言語の一種です。

横文字でとっつきにくいですが、実は、私たちが普段から利用しているWEBサイトは、JavaScriptが使われていることがとても多いのです!

主に、動的なコンテンツを作成するために使われます。

例えば、お問い合わせフォームを表示したり、たくさんの画像をスライドさせながら表示させたりすることが可能です。

JavaScriptを使うことによって、ユーザーの印象に強く残るサイトを作り上げることができます。

幅広いシーンで利用されている言語

また、JavaScriptは汎用性の高い言語として知られています。

Webページに動きを加える以外にも、「Webアプリ」や「ゲーム」の開発にも使われているのです。

Webアプリの場合、メニュー画面の切り替えや、チャット機能をもったアプリの作成が可能です。

ゲームの場合は、画像の表示やルールを決定することで、オリジナルのクイズゲームなどを作成することが可能です。

JavaScriptは幅広いシーンで利用されているプログラミング言語だと言えるでしょう。

JavaとJavaScriptは別物

混同されることの多い「Java」「JavaScript」ですが、これらは別の言語です。

開発当初はLiveScriptと呼ばれていたが、1995年にサン・マイクロシステムズ(現・オラクル)が開発したプログラミング言語Javaが当時大きな注目を浴びており、ネットスケープとサン・マイクロシステムズが業務提携していた事もあったため、JavaScriptという名前に変更された。
引用:Wikipedia

Java企業の顧客情報管理をはじめとした、大規模なデータ処理を得意としています。

一方で、JavaScriptは、動的なWebコンテンツの作成を得意とします。

※名前は似ていますが、別物なので注意しましょう。

JavaScriptを使ってできること

一例ではありますが、JavaScriptを使ってできることを、具体的に5つに分けて、まとめてみました。

1. ポップアップウィンドウ
2. Ajax
3. サイトの利便性UP
4. フォーム制御
5. リアルタイムで動くグラフ

ポップアップウィンドウ

WEBサイト内のリンクをクリックした時に、別のウインドウを立ち上げることができます。

本当にページを移動してもよろしいですか?

このファイルを削除してよろしいですか?

一度はどこかで見たことがあると思いますが、こんな風に、主に注意喚起に用いられます。

Ajax

Ajax(エイジャックス)は、ページを移動しなくてもデータを取得できたり、表示したりできる機能です。

代表的なのは、GoogleMapですね。

この機能を利用して、中の地図を動かせるような仕組みを作っています。

サイトの利便性UP

JavaScriptは、サイトの利便性を上げるために用いられます。

見やすく、使いやすいサイトにするための工夫ができますよ。

一例ではありますが、具体的には次のようなことが可能です。

装飾の変更:文字色や背景色の変更

タブ作成:大量の情報を一気に表示しても分かりにくいですよね。タブごとにまとめることで、見やすく表示することができます。

カーソル表示:メニューにカーソルを合わせると、より詳しいメニューが表示されるように出来ます。

スライダー:画像が横にスライドすると、切り替わるようにすることが出来ます。

フォーム制御

会員登録や、ショッピングカート機能など、ユーザーが入力できるフォームを作ることができます。

入力フォーム自体はHTMLでも作ることができますが、次のような制御ができるのは、JavaScript特有ということができます。

例は、こちら。

選択した内容によって質問内容を変える

カート内の合計代金を表示する

入力内容のチェック(例:「かな」の項目にカタカナで入力しているとエラー表示が出る)

住所検索(郵便番号を入力すると、入力された郵便番号情報をもとに「都道府県」や「市区町村」を自動で入力してくれる機能)

入力文字数のカウント

リアルタイムで動くグラフ

リアルタイムで動くグラフが作成可能です。

例えば、1秒ごとに変動する株価のチャートを表示することもできます。

有名なところでは、このようなものがあります。

Chart.js
動的で美しいチャートを手軽に作ることができるポピュラーな JavaScript ライブラリ

Epoch.js
様々なグラフを生成するJavascriptライブラリ

highchart.js

Google Chart Tools

さいごに

にゃんこ師匠 にゃんこ師匠
ミツオカはネットショッピングはするのかい?
ミツオカミツオカ
楽しくていつの間にか何時間も経ってるんですよね〜!
にゃんこ師匠 にゃんこ師匠
カーソル当てるとメニューが開いたり、画像が横に動くスライダーとか見かけるじゃろ?
ミツオカミツオカ
あ!そういうのはJavaScriptを利用して作られているのか〜!
にゃんこ師匠 にゃんこ師匠
わかってきたのう〜!JavaScriptでできることは幅広いのじゃ
ミツオカミツオカ
絶対覚えてやるわ!(炎)

一緒に働いてくれる仲間を募集しております!

ライトコードでは、仲間を募集しております!

当社のモットーは「好きなことを仕事にするエンジニア集団」「エンジニアによるエンジニアのための会社」。エンジニアであるあなたの「やってみたいこと」を全力で応援する会社です。

また、ライトコードは現在、急成長中!だからこそ、あなたにお任せしたいやりがいのあるお仕事は沢山あります。「コアメンバー」として活躍してくれる、あなたからのご応募をお待ちしております!

なお、ご応募の前に、「話しだけ聞いてみたい」「社内の雰囲気を知りたい」という方はこちらをご覧ください。

ライトコードでは一緒に働いていただける方を募集しております!

採用情報はこちら

関連記事