JavaScrptとは何か?初心者向けに概要から使用例までを詳しく解説


JavaScrptとは何か?初心者向けに概要から使用例までを詳しく解説

HTMLやCSSのような言語を学んでいくと、どこかのタイミングで「JavaScript」というワードを目にすることになるでしょう。今回は、そんなJavaScriptについて、基本的な概要から具体的な活用例までを解説していきます。

Webについて、HTMLやCSSを通して学んだら、次はJavaScriptに手を出してみるのもよいでしょう。それでは、はじめていきますね。

目次
  1. そもそもJavaScriptとは?
  2. JavaScriptとJavaは別の言語!
  3. JavaScriptの特徴とは?
  4. 様々なものをつくることができる
  5. 初心者でも学びやすい
  6. オブジェクト指向が身につく
  7. JavaScriptの使い道とは?
  8. Webサイト開発
  9. Webアプリ開発
  10. ゲーム開発
  11. スマホアプリ開発
  12. JavaScriptのフレームワークとは?
  13. AngularJS
  14. React.js
  15. Backbone.js
  16. まとめ

そもそもJavaScriptとは?

image 実は、全ての人間がJavaScriptのヘビーユーザーであり、知らぬ間に日々JavaScriptに触れていることを知っていましたか?

スマートフォンやパソコン、最新の車、スマートテレビなど、ほぼ全てのデバイスを通して、私たちはJavaScriptを利用しています。もはや、生活に欠かせないものと言っても過言ではないでしょう。

とはいえ、これだけでは結局「JavaScriptは何なのか」がわからずじまいですよね。

簡単に説明すると、JavaScriptとはWebブラウザとWebサイト、Webサービスとのやりとりをスムーズにするためのプログラミング言語です。HTMLとCSSだけでは動きのない、静的なものしか作ることができませんが、そこにJavaScriptを加えることで、動きのある、動的なものを作ることが可能です。

具体的には、クリックするとポップアップ(最前面に飛び出てくるウィンドウ)が出るようにできたり、リアルタイムで動くグラフを作ることができたりします。また、サイトだけでなくアプリ開発にも利用されており、FacebookやAirbnbなどが使用している言語でもあります。

JavaScriptとJavaは別の言語!

image 注意しておきたいのが、JavaScriptとJavaは似ている言葉ですが全くの別物だということです。親戚のようなものですらありません。

Javaについて簡単に説明しておくと、オラクルという会社が提供している言語で、PCアプリやAndroidの開発などに用いられています。

確かによく見れば構文が似ている点もありますが、JavaScriptとJavaは全くの別物です。なので、Javaと混同しないように、JavaScriptはJSと略されることが多いですね。

JavaScriptの特徴とは?


image

ここからは、JavaScriptにはどんな特徴があるのかを説明していきます。

様々なものをつくることができる

Webサイト上で動く機能を作ることができるのはもちろんですが、その他にもゲームやツール、さらにはChromeやFirefoxの拡張機能、スマホアプリなんかも作れてしまいます。

その理由はJavaScriptに「クロスプラットフォーム」という考え方をもったツールがたくさんあることです。

プラットフォームがなんであれ、そこに最適化して、どこでも同じ動きをさせることができるのがJavaScriptの特徴です。

初心者でも学びやすい

JavaScriptは「ブラウザ(GoogleChromeやInternetExplorerなど)」と「テキストエディタ(メモ帳など)」の2つを用意するだけで動かすことが可能な言語です。

そして、世界中で沢山の人が使っている言語ですから、それだけ参照できる資料が大量にありますよね。これらの理由から、JavaScriptは初心者でも比較的学びやすい言語となっています。

ただし、より効率的に学ぶのであれば、最初にHTMLとCSSを習得しておくことがおすすめです。

オブジェクト指向が身につく

簡単に言ってしまえば、オブジェクト指向とはわかりやすいプログラミングをすることができるようになるものです。

オブジェクト指向について説明すると、オブジェクト、つまりモノを組み立てていくというプログラミングの考え方と言うことができます。あくまでオブジェクト指向は概念ですので、その理解にはやや時間がかかりますが、習得によって開発の効率を上げることができるでしょう。

JavaScriptの使い道とは?

image 具体的なJavaScriptの使い道は、以下のようなものになります。

  • Webサイト開発
  • Webアプリ開発
  • ゲーム開発
  • スマホアプリ開発

Webサイト開発

Webサイトを作る時に、JavaScriptはいたるところで活躍するでしょう。たとえば、複数枚の写真をスライド形式で表示したいときに、JavaScriptを使ってそれを表現することができます。 image

Webアプリ開発

Webアプリを開発したいときにも、JavaScriptは有効です。

Reactというライブラリを自社で開発したFacebookは、WebアプリにJavaScriptを使用しています。

image

画像出典:facebook

ゲーム開発

JavaScriptでは、ゲームを開発することだってできます。おなじみのテトリスを、HTMLとJavaScriptを用いることで作ることが可能です。

image

スマホアプリ開発

JavaScriptを書くことができれば、スマホアプリの開発も可能です。この「flavabeats」というアプリは、JavaScriptで書かれているリズムゲームですね。

image

画像出典:flavabeats

JavaScriptのフレームワークとは?

image JavaScriptだけではなく、各言語に用意されている土台のようなもの。それがフレームワークです。フレームワークを直訳すると「枠組み」ですが、「この通りに作ればうまくいく」と考えられた土台だと思ってください。

ある程度の道筋をフレームワークに示してもらうことで、初心者でも比較的ラクに開発を行うことができるものがフレームワークですね。

ここからは、JavaScriptの有名フレームワークを紹介していきます。

AngularJS

image

画像出典:AngularJS

企業向けのシステムを作る際に用いられることの多いフレームワークで、複雑なWebアプリを作るときに用いられています。

たとえばAppleやGoogleなど、世界中で知られている超有名企業がこのAngularJSを使って開発を行っていますね。学習コストは高いですが、これさえあれば大半のことはできるくらい、充実した機能を持っているフレームワークでしょう。

React.js

image

画像出典:React.js

2013年にリリースされた、新しめのフレームワークがこちらのReact.jsです。FacebookやInstagram、Airbnbなど、こちらの有名な企業が使っているフレームワークといえますね。

今までのコーディング手法よりも、より簡潔でわかりやすく記述できる点がメリットです。

Backbone.js

image

画像出典:backbonejs

制約が少なく、自由度の高いプログラミングをすることができるフレームワークが、こちらのBackbone.jsです。こちらもまた、TwitterやHulu、Pinterestなどの有名で大規模なサービスに使用されています。

初期の学習コストが低いので、JavaScriptフレームワークの入門としても使えますね。

Webサイト担当者としてのスキルが身に付く

無料カウンセリングはこちら

まとめ

image JavaScriptの大まかな説明とその使い道、フレームワークについて解説しました。説明だけではなんとも言えないと思うので、ぜひ一度コードを書いてみることをおすすめします。

使い古した言葉ですが、「習うより慣れろ」です。便利で何にでも使うことができる言語なので、ぜひがんばって習得してみてはいかがでしょうか。

HTML/CSSを学んだ後にJavaScriptを学習する方は多いのでしょうか?ここからは一気に難易度が上がる言語になってきます。「独学では難しいかな?」と感じたらCodeCampの無料体験を受けてみてはいかがでしょうか?


黒田剛司
この記事を書いた人
黒田剛司
まずは7日間お試し!人気プログラミング講座を無料公開中
オンライン・プログラミングレッスンNo.1のCodeCamp