JavaScriptとは?初心者向けに概要や使い方をわかりやすく解説

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

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

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

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

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

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

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

この記事の目次

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

画像:Shutterstock

JavaScriptの概要

JavaScriptは1995年に開発され、当初はWebサイトに動きをつけるために開発された言語です。

近年はWebサイトやアプリを開発をする上で無くてはならない存在になっており、昨今のWebサイトのほとんどにJavaScriptが使われています。

Webサイト・アプリ・サービスの開発に使われることがメインであるものの、他にもデスクトップアプリやスマホアプリ、ゲーム、IoTや人工知能開発など、様々な業界で利用が可能になっており、今後かなり用途の広がる言語として注目をされています。

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つ作ってみることで、次に作りたいものや、足りないスキルが見えてきます。簡単なものでいいので作ってみましょう。

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

そもそも3つもどうやって学べばいいの?

効率的な学習方法や独学でアプリケーションを作る方法を知りたい!

という方は、弊社で行っている「無料体験レッスン」を受けてみてはいかがでしょうか?

JavaScriptを身につけて、独学で最初の1歩を踏み出す方法や、JavaScriptを学んだあとのキャリアなど根本的なご相談も可能です。

侍エンジニア塾
無料体験レッスンの詳細はこちら

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

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

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

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

JavaScriptを使うメリット

それでは、JavaScriptを学ぶメリットについて紹介していきます。

ほぼ全てのブラウザ上で動く

JavaScriptは現在、パソコン・スマートフォン関係なく、ほぼ全てのブラウザで作動します

逆に全てのブラウザで動く言語はJavaScriptしかなく、最大のメリットです。

今後様々なサービスがブラウザ上で動かせるようになっていくに従って、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の将来性

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-basic-3

画像:Shutterstock

上でいろいろJavaScriptについて話しましたが、話だけではよくわからないことも多いですよね。そこでここからは、JavaScriptの基本となる導入から簡単な使い方までを詳しく見ていきましょう!

実際にJavaScriptを動かしてみて、アウトプットすることで体感的に覚えることができるので、自分のペースでやってみましょう。

JavaScriptの書き方

JavaScriptを利用するには、一般的にHTML内からJavaScriptファイルを読み込む必要があります。ファイルを読み込む方法は2種類です。

HTML内に直接記述する方法

1つ目は、「scriptタグ」内にJavaScriptを直接記述する方法です。

<body>

<script>

    //この中にJavaScriptプログラムを記述する

</script>

</body>

簡単なJavaScriptを書くのであれば、この方法がお手軽に始められるのでオススメです!

外部ファイルを読み込む方法

2つ目は、外部ファイルとして読み込む方法です。この方法は、HTMLファイルとは別にJavaScriptプログラムだけを記述したファイルを用意するという意味になります。

例えば、「app.js」というファイル名で保存されたJavaScriptプログラムがあるとします。この場合、次のような記述でファイルを読み込みます!

<body>
<script src="ファイルのパス/app.js"></script>

</body>

scriptタグの「src属性」を利用してapp.jsのファイルパス(保存場所)を記述すればOKです!この方法だと、JavaScriptだけを記述したファイルを編集できるようになるので、管理がしやすくファイルを分割することも簡単です。

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からDOMを操作してみよう

みなさんはDOMdocument Object Model)」という言葉をご存知でしょうか? 簡単に説明すると、JavaScriptからHTMLの各要素を操作するための仕組みと考えると分かりやすいでしょう。

「DOM」という仕組みを利用することで、以下の操作が可能です。

  • Webサイトに記述された内容を取得する
  • Webサイトに記述された内容を書き換える
  • Webサイトに記述する内容を追加する
  • Webサイトを操作した場合にイベントを発生させる

つまり、JavaScriptを使って動きのあるWebサイトを開発できるというわけです。試しに、次のようなJavaScriptを記述してみましょう!

console.log( document.body );

先ほどは「Hello World」という文字列を出力しましたが、今度は「document.body」という記述に変えています。これで開発者ツールからログを確認すると、以下のような表示になっています。

javascript-basic-2

画像:DOM(document Object Model)の解説

HTML内のbodyタグの中身が出力されていることに気づきましたでしょうか?「document.body」という記述をしましたが、実はHTMLファイルのbodyタグの中身を出力するという意味だったわけです。

つまり、これはJavaScriptからHTMLにアクセスできることを意味しており、これこそがDOMを使ったアクセスというわけです!

もっとDOMについて知識を深めたい人はこちらの記事をご覧ください。

JavaScriptの学習ロードマップ

①HTML/CSSを学ぶ(目安時間:30時間)

JavaScriptはWebサイトの見た目に動きをつけることから始めると学びやすいため、まずは見た目を構成するHTMLとCSSについて基礎的な学習をする必要があります。

やるべきこと

②JavaScriptの基礎概念や文法を学ぶ(目安時間:50時間)

Rubyの基礎概念や基礎文法を学んできっちりと土台作りをおこないます。基礎的な文法である「変数」や「条件分岐」などを学びます。

やるべきこと

③HTML/CSS/JavaScriptを使ってサンプルアプリを作る(目安時間:80時間)

HTML/CSS/JavaScriptが理解できたら、サンプルアプリケーションを作ってみましょう。

本記事でも解説したカレンダーやビンゴは定番ですし、他にもおみくじやストップウォッチなど作りやすいアプリは複数あるので、作りたいと思えるものにまず挑戦して見ましょう。

やるべきこと

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

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

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

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

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

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

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

こういった完全個別型の学習サポートにより、弊社の卒業生では未経験から3ヶ月でアプリ・サイトを7つ開発し、6社から内定を獲得した事例もございます。

未経験から3ヶ月でアプリ・サイトを7つ開発!挫折から立ち直った驚異的な学習方法が明らかに!
更新日 : 2019年5月27日

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

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

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

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

まとめ

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

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

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

LINEで送る
Pocket

最短でエンジニアを目指すなら侍エンジニア塾

cta_under_bnr

侍エンジニア塾は業界で初めてマンツーマンレッスンを始めたプログラミングスクールです。これまでの指導実績は16,000名を超え、未経験から数多くのエンジニアを輩出しています。

あなたの目的に合わせてカリキュラムを作成し、現役エンジニア講師が専属であなたの学習をサポートするため効率よく学習を進めることができますよ。

無理な勧誘などは一切ありません。まずは無料体験レッスンを受講ください。

無料体験レッスンの詳細はこちら

書いた人

侍ブログ編集部

侍ブログ編集部

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

おすすめコンテンツ

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

プログラミング学習の効率を劇的に上げる学習メソッドを解説