スライドショースライドショー

JavaScriptとは?初心者向けに徹底解説【これだけ読めば完璧】

この記事をご覧になっているあなたは、

JavaScriptってどんな言語?
学んで何ができるの?
JavaScriptは学ぶべき?
どんな人におすすめ?

などと思っていませんか? プログラミングを入門して学習を進めて行くと、「JavaScript(ジャバスクリプト)」は必ずと言っていいほど耳にするので気になりますよね。

しかし、詳しい内容が書いてある書籍やWebページなどを見ても「結局何を言っているのか分からない」という声をよく聞きます。入門したばかりの初心者からすれば、専門用語を並べて説明されても理解するのに苦労するのは当然のことです。

そこでこの記事では、JavaScriptについて専門用語を噛み砕いて誰でも分かるように徹底解説していきます。最後までお読みいただければ、「JavaScript」について体系的に理解すること間違いなしです!

【この記事を読んで得られることとは?】

  • JavaScriptの特徴や使い方が分かる
  • JavaScriptでできる仕事やその年収が分かる
  • JavaScriptの入門に必要な基礎知識を知ることができる
  • JavaScriptの効率のいい学習方法を知ることができる

JavaScriptとは?概要・特徴を解説

画像:Shutterstock

JavaScriptの歴史

JavaScriptの歴史は、かつて「Netscape Navigator」と呼ばれるブラウザに搭載されていたプログラミング言語「LIve Script」が始まりになります。

1995年に名称が「JavaScript」に変更されてから、マイクロソフト社のIEを含めていくつかブラウザで使われるようになりました。しかし、JavaScriptは各種ブラウザの独自カスタマイズが行われており、互換性に問題があったので1997年に標準化された「ECMAScript」が誕生します。

現在のJavaScriptはこのECMAScriptが基本ベースになっており、毎年のようにバージョンアップが実施されているのが特徴的です。


JavaScriptの概略

その後、現在までにさまざまなライブラリやフレームワークが誕生したことで、便利なエコシステムが形成されて初心者から上級者まで幅広い層に支持されています。

簡単な年表を以下にまとめておきます。

  • 1995年:JavaScriptの誕生
  • 1996年:IE3.0登場、ブラウザごとに独自の言語仕様になる
  • 1997年:JavaScript標準化のためECMAScriptが作られる
  • 2005年:JavaScriptのAjax技術を利用したGoogleマップが誕生
  • 2006年:jQueryなどのライブラリ開発が盛んになる
  • 2009年:Node.jsの誕生
  • 以降、フレームワークやビルドツールなどの開発が始まり現在に至る

JavaScriptとJavaの違いとは?

JavaScriptと名前の似ている「Java」は、名前が似ているだけで全く別のプログラミング言語です。

例えるならオーストラリアとオーストリアくらい違います(笑)。 同じ国ですが、全く違う場所にありますよね。

元々JavaScriptは「LiveScript」という名前で開発されたのですが、当時からJavaは絶大な人気を誇っていたため、その勢いに乗るためにLiveScriptからJavaScriptに変更したと言われています。

JavaScriptはWeb業界だと人気No.1


こちらの画像はStackoverflowというエンジニア向けの有名なQ&Aサービスによる、全世界の使われているプログラミング言語調査の結果です。

JavaScriptは6年連続で1位の人気でして、ウェブ業界においてはどの会社でも使われているほどの人気です。すごいですよね。

目に見える側の「フロントエンド」も、目に見えないシステム側の「サーバーサイド」も開発が可能なので、今後Web業界の特にフロントエンドエンジニアになる方は学習必須となります。

JavaScriptでできること(作れるもの)とは?

shutterstock_122664079

画像:Shutterstock

では実際に、JavaScriptを使ってどのようなものが作られているのかを見ていきましょう。

JavaScriptで作れるものは?

JavaScriptで作れるものは、基本的に以下のものになります。

  • WEBページの動作
  • WEBアプリ開発
  • スマホアプリ開発
  • ゲーム開発

JavaScriptの最も一般的な使われ方がWEBページに動きを付けることです。

何枚かの写真をスライドさせて表示したり、ランキングやバナー広告などを表示するサイドバーを出し入れしたり、ユーザーが操作して表示を替えれるWebページはJavaScriptなどで制作されています。

また、WEBページ上に地図を表示させるGoogle Maps APIなどもJavaScriptで利用することが出来ます。さらにJavaScriptは、LINEやFacebook、TwitterなどのSNSやチャットのような本格的なアプリ開発も行っていくことが出来ます。

WEB系のサービス以外にもiPhoneやAndroidなどのスマホアプリにも手が出せることは魅力的です。それと、スマホやブラウザのゲームなども手軽に制作することが可能になっています。

これを踏まえ、あなたがJavaScriptで何を作りたいのか明確にして、学習を効率よく進めましょう。JavaScriptでできること詳しく解説した記事はこちらからどうぞ。

JavaScriptで作られたサービス

実際にJavaScriptを使って開発されたサービスを紹介します。

全てJavaScriptで開発したというわけではないのですが、動的な挙動にはJavaScriptを用いて作られています。

JavaScriptが使われるケースは非常に多いため、下記の記事で紹介されているサービス53選を数えたところ、33個のサービスでJavaScript(フレームワーク含む)が使用されていました。

エンジニアHub:[53選]国内注目のWebサービス・アプリを大調査! プログラミング言語、フレームワーク、アーキテクチャの一覧【2017年】

初心者がJavaScriptで作るのにおすすめなもの

作りたいものを最初から見つけるのは難しいでしょうし、まず何を作ることを目標にすれば良いのかも最初は戸惑うことでしょう。

そこで、まずJavaScriptを学んでみたい人は、以下のように簡易的なWEBアプリを作ってみるのがおすすめです。

【カレンダーの作成】

【ビンゴアプリの作成】

【ブロック崩しの作成】

上記サンプルを例に、とにかくまずは1つ成果物を作ってみることが重要です。なぜなら次に作りたいものや、足りないスキルが見えてくるからです。

ちなみに、上記のようなWebアプリケーションを作るには、HTMLとCSSという別の言語も学ぶ必要があります。そのため最初のうちは意外と時間がかかったり、エラーが出てうまく進まなかったりします。

そもそもどうやって学べばいいの?
効率的な学習方法や独学でWebアプリを作る方法を知りたい!

のように感じている方は、弊社で行っている「無料体験レッスン」を受けてみるのも1つの方法です!

無料とは言っても、自分にピッタリな学習プランのご提案やキャリア相談なども行うことが可能なので、以下のリンクからぜひお気軽に参加してみてください。
侍エンジニア塾
無料体験レッスンの詳細はこちら

JavaScriptでできないこと(作れないもの)とは?

JavaScriptで開発できる幅はとても広いのです。しかし、分野にはそれ特有の開発にもっとも適した言語が存在します。

そういう意味でいうと、デスクトップアプリ、スマホアプリ、人工知能、ゲーム業界などは開発可能だけど、他の言語の方が向いています。

例えばアプリでしたらSwiftJava、人工知能はPython、ゲームならUnityCなど、それぞれ向いている言語があるので、あくまでもWeb業界を軸として活躍する言語ということを覚えておいてください。

JavaScriptを使うメリット

ブラウザに実行環境が搭載されている

JavaScriptはブラウザさえあれば実行できるのが大きな特徴です。

その理由は簡単で、ブラウザにJavaScriptの実行環境が搭載されているからです。Ruby・PHP・Pythonなど他の言語は実行環境を自分で整える必要があるわけですが、JavaScriptはその必要がないという手軽さがあります。

IE・Edge・Chrome・Firefox・Safari・Operaなど、ほぼすべてのブラウザはJavaScriptを最初から実行できるわけです。これはスマホのブラウザにおいても同じことが言えます。

フロントエンド・サーバーサイド両方開発が可能

JavaScriptはもともとフロントエンド(ブラウザで実際に見れている画面)の開発が主軸でした。しかし現在はNode.jsノードジェイエス)というサーバー側も開発できるソフトがあるため、JavaScript1つ覚えればフロントもサーバーも開発できるようになりました

また、「Google Apps Script」というGoogleのサービス上で動くマクロもJavaScriptを使っているので、言語1つ覚えるだけでWebアプリケーションの開発の選択肢はかなり広がっています。

フレームワークが豊富

フレームワークとは、各言語に用意されているアプリケーションの雛形のようなものです。フレームワークを使うことで、時間を短縮して作りたいモノを完成させることができます。

JavaScriptのフレームワークとして、「Vue.js」「Angular」「React」などフロントエンド開発用のフレームワークが複数存在します。

JavaScriptを学ぶことで、これらのフレームワークも理解ができるので、開発スピードを一気にあげることができます。

JavaScriptは初心者でも学びやすく始めやすい

JavaScriptは、「InternetExproler」や「GoogleChrome」といったブラウザと、あとはテキストエディタ(メモ帳)さえあれば実際に動かすことが可能です。

ちなみにJava、Ruby、C#、C言語、Pythonのような他のプログラミング言語の場合、パソコン上で動作させるためのコンパイラやVisual Studio、Eclipseのような開発環境を準備する必要となってしまいます。この準備で時間を取られたり、つまづいてしまうことがよくあります。

それに対して、JavaScriptの場合はブラウザとテキストエディタだけでお手軽に始めることができます。そしてWEBサイトへ動作を付けられるという特徴や手軽さから、WEBデザイナーの方でも記述する機会のある言語にもなっています。

もちろん、JavaScriptなどを専門に扱う「フロントエンジニア」と呼ばれる方々もいますが、実際の開発の現場では様々な人に広く使われている言語でもあります。

「自分もJavaScriptを実際に使ってみたい!」という方に向けて詳しく解説した記事がありますので、下記のリンクからぜひご覧ください。

JavaScriptに興味があって触れてみたい人へ向けた記事はこちら。

手軽にJavaScriptを動かしてみたいという人への記事はこちら。

JavaScriptを使うデメリット

ブラウザによって動作が変わるときがある

JavaScriptはブラウザ上で動く言語なので、Internet Exploler、Google Chrrome、Safari、Firefoxなど、現在見ているブラウザによって動作が変わる可能性があります。

JavaScriptのバージョンと、ブラウザの種類やバージョンによって実装に微妙な違いがあるため、このような問題が起こってしまいます。

ブラウザの種類やバージョン、各々のブラウザ独自の実装の違いを考慮して、同じように動作するようなコードの書き方をしなければいけません。

処理のスピードに時間がかかるときがある

JavaScriptは動作の実行をするときに解析、解釈、変換が必要なので、処理のスピードとしては少し遅くなってしまう時があります。

JavaScriptの読み込むタイミングを変更したりなど、様々な対策で処理スピードを早くする対策は行われていますが、これはサービスリリース後の話になるので、初心者の今はあまり気にする必要はないかもしれません。

JavaScriptの入門

これまでJavaScriptの基本的な概要について解説をしてきました。

この章では、さらにJavaScriptがどのようなプログラミング言語なのかを理解するために、少しだけ簡単なプログラミングについてご紹介していきます。

実際にプログラム言語に触れてみることで、JavaScriptが持つ性質を体験してみましょう!

JavaScriptの書き方

まず最初にJavaScriptを「どこに書けば良いのか?」について解説をしておきます。

基本的にJavaScriptはHTMLの中に書いていくのですが、実際のプログラムは「scriptタグ」の中に記述していきます。

<!doctype html>
<html>
<head></head>
<body>
    <script>

        // ここにJavaScriptを記述していく

    </script>
</body>
</html>

もう1つの方法として、JavaScriptだけを記述したファイルを読み込む方法もありますが、最初のうちは「scriptタグ」の中に記述していく方が手軽に取り掛かれるのでオススメです。

JavaScriptで「Hello World」を書いてみよう

それでは、実際に簡単なJavaScriptプログラムを書いてみましょう!プログラミング言語を学ぶ際にはお馴染みの「Hello World」という文字列を出力してみます。簡単な方法として2種類の方法をご紹介します。

ポップアップで表示する方法

標準で用意されている「alert()メソッド」を使って次のように記述します!

alert('Hello World');

そして、HTMLファイルをブラウザで開くとポップアップ表示で「Hello World」という文字列が表示されるはず!

しかし、この方法だと毎回ポップアップが表示されるので少し面倒です。

開発者ツールで表示する方法

そこで、JavaScriptの場合によく使われるのが「console.log()メソッド」です。次のような記述を行います!

console.log('Hello World');

そして、各種ブラウザに搭載されている「開発者ツール」を起動してみましょう!例えば、Chromeブラウザであれば「Ctrl + Shift + I」というショートカットキーで以下のように起動します。

javascript-basic-1

画像:console.log() メソッドの解説

すると、「Hello World」という文字列が出力されているのが分かりますね!この方法だと文字列や変数・オブジェクトの中身などを自由に表示できるので大変便利です。

JavaScriptのサンプル例

基本的なJavaScriptだけでもさまざまなことが実現できるのですが、分かりやすいように簡易的なサンプル例をご紹介しておきます。

例えば、入力したテキストの文字数をリアルタイムに計測して表示するアプリが以下のように作れます。
(※以下のボックス内へ実際に文字を入力してみてください。)

【文字数カウントアプリ】

See the Pen 文字数カウントアプリ by masa (@s_masato) on CodePen.light

以下のサンプルは単純なテキストに、CSSのスタイルをJavaScriptから制御することでアニメーションを実現しています。

【テキストアニメーション】

See the Pen 文字アニメーションのサンプル by masa (@s_masato) on CodePen.light

これらのサンプルはいずれも基本的なJavaScript構文だけで実現しているので、みなさんも少し学習すれば簡単に作れるようになります。

JavaScript初心者が独学する方法

本章ではJavaScriptを独学するための効果的なステップについて解説します。

初心者の方でこれから学習を始めようと検討されているなら、まずは順番に実践してみてください。独学で学習できるサイトやサービスも合わせて紹介しているので、基本的なスキルアップや仕事に繋げるための基礎技術を身につけるためにも有効です。

①開発環境を準備しよう

JavaScriptの学習は基本的にブラウザさえあれば可能ですが、効率よくプログラミングするための環境を整えておくと便利です。

現在はブラウザからアクセスするだけで開発環境が整うコードエディタがたくさんあります。なかでもオススメは以下の3つです。

  • JSFiddle
  • CodePen
  • Glitch

JSFiddleとCodePenはよく似ていて、HTML / CSS / JavaScriptを利用したプログラミングが可能です。ログインするとポートフォリオのようにプロジェクトを保存&管理することもできるので便利です。

Glitchはより高度なクラウドIDEとして利用可能で、HTML / CSS / JavaScriptの基本的なプログラミングだけでなくNode.jsを利用したサーバーサイドの開発も行えるのが特徴です。

いずれも無料で利用できるので、学習用途やサンプルアプリを作って公開するのには最適でしょう。

②HTML/CSSを学ぶ

JavaScriptの学習をする前に、最低限のHTML / CSSを学んでおきましょう。

理由はいくつかありますが、JavaScriptでWebサイトを制御したりアニメーションを作るということは同時にHTMLやCSSを操作することにも繋がります。

まずは以下のポイントが理解できるようになると良いでしょう。

  • HTMLで基本的なWebサイトの骨組みを作れるか?
  • HTML属性の基礎知識があるか?
  • CSSでHTML要素を装飾できるか?
  • CSSで基本的なレイアウトを構築できるか?
  • CSSで実現できること、できないことを理解しているか?

すべてを詳しく勉強する必要はありませんが、簡単なWebサイトをHTML / CSSだけで構築できるとJavaScriptを学習するときも役立ちます。

まずはProgateの無料講座から始めてみると効果的ですよ。

③JavaScriptの基礎概念や文法を学ぶ

JavaScriptを学習するときは、あらかじめ勉強するべき項目をまとめておくと効率が良くなります。

一般的にJavaScriptの基本を抑えようと考えると、以下の項目については理解しておくべきでしょう。

  • 変数と配列
  • 条件分岐
  • 繰り返し処理
  • 関数
  • オブジェクト操作
  • DOM制御
  • 非同期処理
  • Ajax

初回はドットインストールのような、動画で学べるタイプのコースを一通り実践してみるのが良いでしょう。上記の項目は無料コースでもしっかりと学習できます。

また他にも、JavaScriptを学習する際に初心者が必ず躓いてしまうポイントは以下の4つです。

  • var, let, const
  • スコープ
  • this
  • undefined, null
  • NaN

それぞれの意味や違いについて理解できるようにしておきましょう。

④ライブラリ、フレームワークを知る

JavaScriptの基本を学習したら、次にいくつかのライブラリやフレームワークにも触れておきましょう。

ライブラリで代表的なのはjQueryで、HTML要素を簡単にJavaScriptから扱えるようにしてくれたりなど多彩な機能を提供しています。ライブラリはこのように便利な機能を再利用できる形にまとめたプログラムとも言えます。

フレームワークで代表的なのはReact / Angular / Vueなどで、これはWebアプリやサービスなど中規模から大規模なプログラムを構築しやすくしてくれるプログラムです。家に例えると、基礎工事や骨組みを提供していて、あとは壁や内装を自分好みにカスタマイズしていくイメージです。

ライブラリとフレームワークの違い

JavaScriptはこのようなエコシステムが充実しているおかげで、初心者でも短期間で自分のイメージするWebアプリやサービスを開発できるようになるわけです。

⑤自分の作品を公開してみる

ここまでの学習で作成したWebアプリは、そのまま隠しておくよりもネット上に公開してさまざまな人から意見を頂くのも勉強になります。

また複数の作品を公開することで、自分のポートフォリオとしても機能するのでスキルを証明することにも繋がります。これは就職や転職などにも有効であり、またこの作品集がきっかけで案件を獲得できることもあるのでオススメです。

Webアプリなどを公開するのに便利なサービスとしては以下の通りです。

  • GitHub Pages
  • Firebase
  • Netlify
  • Heroku

もっとも簡単なのは「Netlify」で、HTML / CSS / JavaScriptのファイルをZipにまとめてアップロードするだけですぐにネット上へ公開できます。

また、少し学習は必要になりますがFirebaseを活用できるようになると、データベースが使えるのでより高度なWebサービスを構築できるようになります。

また、学習の過程をログ代わりにブログなどで公開しておくのも効果的です。あとで自分が読み返しても良いし、コメントなどで第三者からさまざまな意見を参考にできる場合もあります。

JavaScriptの将来性

shutterstock_210791029

画像:Shutterstock

それではJavaScriptの現在の求人数や年収なども踏まえて、今後の需要が増えていくのか?将来性はあるのか?を解説していきます!

JavaScriptの求人件数


引用元:indeed 企業求人数国内ランキング https://proengineer.internous.co.jp/content/columnfeature/5957

「indeed」によるプログラミング言語別求人数の調査でいうと、JavaScriptは現在第4位の8,426件となっています。

第4位ですが求人件数としては十分にあるといえます。今後エンジニア自体の需要と共に求人件数が全体的に増えていくことを考えると、さらにJavaScriptの求人件数も増えていくでしょう。

プログラミング言語年収ランキング

 

求人検索エンジン「スタンバイ」の調査によると、プログラミング言語別年収ランキングでJavaScriptは第9位で、平均額は536万円となっています。

フリーランス案件の多いレバテックフリーランスの案件例を見てみると、月収95万円までという案件等がいくつも有ることが確認できます。

201708200243_3984_ leva_2

引用元:レバテックフリーランス公式サイト https://freelance.levtech.jp/

エンジニアの年収は正社員なのかフリーランスなのかによっても変わってくるので、平均年収ランキングはひとつの参考として見ていきましょうね。

JavaScriptの今後の需要

これまで解説したJavaScriptの人気や現在の求人数、言語としての特徴を踏まえると、JavaScriptの需要は下記の理由から、今後も高まっていくと予想ができます。

  • フロントエンドの開発にあたって代替できる言語がない
  • フレームワークの開発が進んでおり、すでに様々なサービスに実装されている
  • ウェブだけでなくアプリやゲーム、人工知能など開発可能な業界も増えている

ですので、Web業界でエンジニアになりたいと考えている方は、安心して学んでOKです!

JavaScriptを学んで最短でエンジニアになる方法

JavaScriptの学習方法まで解説いたしましたが、さらに一歩進んで転職や独立まで目指すあなたはプログラミングスクールをおすすめいたします。

プログラミングスクールでは、経験者から教わることができるので、本来独学でエラーにつまづき学習が進まないところを、解決方法を教わりながらテンポよく進めることができます。

そうはいっても、プログラミングスクールって費用もかかるし、そもそも本当にそんなスキルが身につけられるか分からなくない?
パソコン苦手だし……

そんなふうに思う方もいらっしゃると思います。

しかし、侍エンジニア塾では、3つの特徴によって学習からキャリアのサポートまで着実に行います。

  • 専属講師によるマンツーマレッスン
  • あなたの学習に合わせて作るフルオーダーメイドカリキュラム
  • 転職・独立をサポートするオリジナルアプリケーション開発支援

こういった完全個別型の学習サポートにより、弊社の卒業生では未経験から転職に成功した事例もございます。

元美容師が見つけた「本当にやりたいこと」21歳で超大型案件の開発をするエンジニアに
更新日 : 2019年9月19日

授業型で他の生徒と同じスピードでの学習だと、一度授業に置いてかれたら分からないまま授業が進んでしまったり、そもそも本来学ぶ目的は人それぞれ違いますよね。

侍エンジニア塾の無料体験レッスンでは「プログラミングを学んでどんな生活や人生を送りたいのか」をヒアリングさせて頂き、叶えられるキャリアと最適な言語選定や学習プランを提案いたします。

JavaScriptは人気急上昇中の言語で、WEBエンジニアになりたい人にはおすすめですが、人工知能を作りたい人や、いち早く独立したい人は他の言語の方がおすすめな場合もあります。

まずは学習の方向性をコンサルタントに相談することで、時間を無駄にせず学習を進めることができます。お気軽に下記のカレンダーより無料体験レッスンへお越しください。業界に精通した弊社スタッフがあなたのお悩みをとことん解消いたします

まとめ

JavaScriptの特徴や使い道などについて解説しました。

今後も様々な分野で活躍する言語ということがおわかり頂けたでしょうか。

JavaScript言語の特徴を抑えた上で、楽しいプログラミングライフを送っていただければ幸いです。

LINEで送る
Pocket

「プログラミング、右も左もわからない…」という方にオススメ

当プログラミングスクール「侍エンジニア塾」では、これまで6000人以上のエンジニアを輩出してきました。

その経験を通して、プログラミング学習に成功する人は、「目的目標が明確でそれに合わせた学習プランがあること」「常に相談できる人がそばにいること」「自己解決能力が身につくこと」この3つが根付いている傾向を発見しました。

侍エンジニア塾は上記3つの成功ポイントを満たすようなサービス設計に磨きをかけております。

cta_under_bnr

「自分のスタイルや目的に合わせて学習を進めたいな」とお考えの方は、ぜひチェックしてみてください。

cta_under_btn

書いた人

侍ブログ編集部

侍ブログ編集部

侍エンジニア塾は「人生を変えるプログラミング学習」をコンセンプトに、過去多くのフリーランスエンジニアを輩出したプログラミングスクールです。プログラミングに役立つ情報や有用な情報を発信していきます。
サービスページはこちら
ツイッターはこちら
フェイスブックはこちら

おすすめコンテンツ

あなたにぴったりなプログラミング学習プランを無料で診断!

プログラミング学習やキャリアのお悩み、お気軽にご相談ください。