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

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

JavaScriptでできることとは?

にゃんこ師匠 にゃんこ師匠
今日は『JavaScript』でできることを紹介していくぞ〜
ミツオカミツオカ
あ、にゃんこ師匠~!「Java」と「JavaScript」って何か違いがあるんですかー?
にゃんこ師匠 にゃんこ師匠
ぜんっっぜん別物じゃ!
ミツオカミツオカ
ええ!そうなんだ~!
「JavaScript」って、「具体的になにができるのか?」「JavaとJavaScriptの違いが分からない」とか疑問に思ってる人も多いんじゃないですかね?
にゃんこ師匠 にゃんこ師匠
では、その辺も詳しく解説していこかの〜

そもそもJavaScriptとは?

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

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

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

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

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

こちらの記事もオススメ!

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

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

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

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

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

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

JavaとJavaScriptは別物

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

開発当初は、LiveScript と呼ばれていました。

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

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「超」入門

さいごに

いかがでしたでしょうか?

JavaScript について、少しでも気になっていただけたようであれば幸いです!

(株)ライトコードは、WEB・アプリ・ゲーム開発に強い「好きを仕事にするエンジニア集団」です。
JavaScriptでのシステム開発依頼・お見積もりはこちらまでお願いします。
また、JavaScriptを扱えるエンジニアを積極採用中です!詳しくはこちらをご覧ください。

※現在、多数のお問合せを頂いており、返信に、多少お時間を頂く場合がございます。

こちらの記事もオススメ!


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

ライトコードよりお知らせ

にゃんこ師匠にゃんこ師匠
システム開発のご相談やご依頼はこちら
ミツオカミツオカ
ライトコードの採用募集はこちら
にゃんこ師匠にゃんこ師匠
社長と一杯飲みながらお話してみたい方はこちら
ミツオカミツオカ
フリーランスエンジニア様の募集はこちら
にゃんこ師匠にゃんこ師匠
その他、お問い合わせはこちら
ミツオカミツオカ
   
お気軽にお問い合わせください!せっかくなので、別の記事もぜひ読んでいって下さいね!

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

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

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

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

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

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

採用情報はこちら

関連記事

採用情報

\ あの有名サービスに参画!? /

バックエンドエンジニア

\ クリエイティブの最前線 /

フロントエンドエンジニア

\ 世界はお前の手の中に・・・ /

モバイルエンジニア

\ サービスの守り神! /

インフラエンジニア