https://www.sejuku.net/blog/wp-content/themes/voice_child/images/samurai_logo.png 侍エンジニア塾が運営するプログラミング入門者向け学習情報サイト

JavaScriptとは?初心者でもわかる特徴や使い道・使い方を完全解説!

井上 慎也
書いた人 井上 慎也


侍エンジニア塾ブログは、未経験からWebアプリ開発と仕事獲得をサポートする
侍エンジニア塾のオウンドメディアです。
プログラミング学習を覗き見

こんにちは!インストラクターの井上です!

プログラミング初心者が学習を進めて行くと、必ずと言っていいほど耳にする

「JavaScript(ジャバスクリプト)」

しかし、詳しい内容が書いてある書籍やWebページなどを見ても

「結局何を言っているのか分からない」

という声をよく聞きます。

専門用語を並べて説明されても、理解するのに苦労するのが現状です。

そこでこの記事では、JavaScriptについて、専門用語を噛み砕いて誰でも分かるように徹底解説していきます。

最後までお読みいただければ、JavaScriptについて体系的に理解すること間違いなしです!

【この記事で得られること】
・JavaScriptの特徴や使いみちが分かる
・JavaScriptでできる仕事やその年収が分かる
・フレームワークについて詳しくなる
・効率のいい学習方法を知ることができる

JavaScriptの特徴を分かりやすく解説

shutterstock_310954343

JavaScriptとは、アプリ開発で使用される人気のプログラミング言語のひとつです。

特に近年は様々なアプリ開発をする際にも使用されている、注目を集めるプログラミング言語になっています。

ちなみに、語呂が似ているJava(ジャバ)」は全く別の言語ですので、JavaScriptを略す場合は、Java(ジャバ)ではなくJS(ジェーエス)というようにして下さい。

多彩な場所で利用されている

JavaScriptはブラウザに実行環境が搭載されていることから、主にWebサイトやWebアプリ・サービスなどを開発する際によく利用されています。

サーバーサイドをJavaScriptで開発するための「Node.js」の存在もどんどん大きくなっていますね。

WebサイトやWebアプリ・サービスは一般的にクライアントサイドサーバーサイドで処理が行われています。

「InternetExproler」や「GoogleChrome」といったブラウザで行う処理がクライアントサイドでの処理です。

それに対して、クライアントサイドで持っていない情報が入ったデータベースを参照するような処理がサーバーサイドでの処理になります。

クライアントサイドではHTML、CSSといった言語が使われます。

サーバーサイドではPHPやJava、Ruby、Pythonなどの言語が使われます。

JavaScriptはクライアントサイドでもサーバーサイドでもどちらでも利用可能なプログラミング言語です。

また、近年はその活躍フィールドをどんどん広げており私達の身近なモノにまで利用されるようになっています。

例えば、スマートフォンで利用できるアプリの開発や、バーチャル空間を体験できるVRアプリの開発などにも利用されています。

さらに、電子工作やハードウェア開発におけるIoT分野、最近話題の人工知能(AI)開発にも利用できるJavaScriptのライブラリが多く公開されています。

このような状況下で、JavaScriptを学習するということは今後さらに自身の活躍の場を広げる機会にもなるでしょう!

トレンドなオブジェクト指向を使っている

JavaScriptは本格的にプログラミングを行う場合、オブジェクト指向という考え方が必要になってきます。

オブジェクト指向とはプログラムでモノ(オブジェクト)を組み立てていくというプログラミングの考え方のことです。

実際に触ってみないと具体的にイメージ出来ないかもしれませんが、今は詳しく分からなくても問題ありません。

使いながらどういうものなのか理解していけばよいでしょう。

この考え方を使うことが出来るようになれば、とても分かりやすいプログラムを組めるようになります。

使いこなすためには様々な知識が必要になってくるため、習得するまでに掛かる時間はある程度必要です。

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

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

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

それに対して、JavaScriptの場合はブラウザとテキストエディタだけでお手軽に始めることができます。

そしてWEBサイトへ動作を付けられるという特徴や手軽さから、WEBデザイナーの方でも記述する機会のある言語にもなっています。

勿論、JavaScriptなどを専門に扱う「フロントエンジニア」と呼ばれる方もいますが、様々な人に広く使われている言語でも有ります。

あなたはJavaScriptで何を作る?

shutterstock_122664079

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

JavaScriptの使い道は基本的には以下の通りになります。

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

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

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

また、WEBページ上に地図を表示させるGoogle Maps APIなどもJavaScriptで利用することが出来ます。

さらにJavaScriptは、LINEやFacebook、TwitterなどのSNSやチャットのような本格的なアプリ開発も行っていくことが出来ます。

WEB系のサービス以外にもiPhoneやAndroidなどのスマホアプリにも手が出せることは魅力的です。

それと、スマホやブラウザのゲームなども手軽に制作することが可能になっています。

JavaScriptを実際に動かしてみよう!

javascript-basic-3

ここからは、JavaScriptの基本となる導入から簡単な使い方までを詳しく見ていきましょう!

JavaScriptの書き方

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

ファイルを読み込む方法は2種類です。

HTML内に直接記述する方法

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

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

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

2つ目は、外部ファイルとして読み込む方法です。

この方法は、HTMLファイルとは別にJavaScriptプログラムだけを記述したファイルを用意するという意味になります。

例えば、「app.js」というファイル名で保存されたJavaScriptプログラムがあるとします。

この場合、次のような記述でファイルを読み込みます!

scriptタグの「src属性」を利用してapp.jsのファイルパス(保存場所)を記述すればOKです!

この方法だと、JavaScriptだけを記述したファイルを編集できるようになるので、管理がしやすくファイルを分割することも簡単です。

「Hello World」を書いてみよう!

それでは、実際に簡単なJavaScriptプログラムを書いてみましょう!

プログラミング言語を学ぶ際にはお馴染みの「Hello World」という文字列を出力してみます。

簡単な方法として2種類の方法をご紹介します。

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

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

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

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

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

そこで、JavaScriptの場合によく使われるのが「console.log()」メソッドです。

次のような記述を行います!

そして、各種ブラウザに搭載されている「開発者ツール」を起動してみましょう!

例えば、Chromeブラウザであれば「Ctrl + Shift + I」というショートカットキーで以下のように起動します。
javascript-basic-1

すると、「Hello World」という文字列が出力されているのが分かりますね!

この方法だと文字列や変数・オブジェクトの中身などを自由に表示できるので大変便利です。

JavaScriptから操作するDOMとは?

みなさんは「DOM(document Object Model)」という言葉をご存知でしょうか?

簡単に説明すると、JavaScriptからHTMLの各要素を操作するための仕組みと考えると分かりやすいでしょう。

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

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

つまり、JavaScriptを使って動きのあるWebサイトを開発できるというわけです。

試しに、次のようなJavaScriptを記述してみましょう!

先ほどは「Hello World」という文字列を出力しましたが、今度は「document.body」という記述に変えています。

これで開発者ツールからログを確認すると、以下のような表示になっています。
javascript-basic-2

HTML内のbodyタグの中身が出力されていることに気づきましたでしょうか?

「document.body」という記述をしましたが、実はHTMLファイルのbodyタグの中身を出力するという意味だったわけです。

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

JavaScriptをスマホで使う方法は?

JavaScriptをPC・スマホで有効・無効にする方法

最近ではスマートフォンに搭載されているブラウザから、Webサイトを閲覧することが多くなりました。

ところが、一部の端末やブラウザなどではJavaScriptの機能がオフになっている場合もあります。

そこで、スマホのブラウザにあるJavaScript機能を「有効・無効」にする方法をおさらいしておきましょう!

Androidスマホの場合

まず、一般的なAndroidスマホの場合の手順は以下のとおりです。

①ブラウザを起動
②メニューから「設定」を選択
③リストから「高度な設定」を選択
④リストから「JavaScriptを有効にする」をチェック

最後のチェックを入れるか入れないかで、JavaScriptの有効・無効を選択することが出来るようになります。

iPhoneの場合

次に、iOSを搭載したiPhoneの手順は以下のとおりです。

①「設定」アプリを起動
②リストから「Safari」を選択
③リストから「詳細」を選択
④「JavaScript」をチェックする

こちらも最後のチェックを入れるかどうかで、JavaScriptの有効・無効を選択できます。

最近のWebサイトやサービスなどは、ほぼ必ずJavaScriptを活用して開発が行われています。

そのため、特に理由がない限りは基本的に「JavaScript」は常に有効にしておきましょう!

スマホ向けに開発する方法

JavaScriptはユーザーが使っている環境がPCかスマホかを判定することができます。

JavaScriptの仕事市場は?

shutterstock_210791029

JavaScriptを習得することで、どのような仕事が出来るのかを見ていきます。

「レバテックフリーランス」による案件

フリーランス案件の多いレバテックフリーランスの案件例を見てみましょう。

JavaScriptの開発経験があれば月収95万円までという案件等がいくつも有ることが確認できます。

201708200243_3984_ leva_2

レバテックフリーランス公式サイト

「Forkwell」による案件

続いて細かな技術別に案件を紹介している「Forkwell」を見てみましょう。

年収最大1500万円は魅力的ですね。

スクリーンショット_2016-04-11_15_45_46

forkwell公式サイト

JavaScriptは現在開発市場としては需要が有ります。

特にRubyやPHPなどの言事合わせて使うことが出来れば高い収入が見込めます。

また、高所得案件の必須スキルで、次に紹介するフレームワークというものの経験も必要と書かれていますので、フレームワークについても簡単に見ていきましょう。

JavaScriptのフレームワークは?

フレームワークとは、各言語に用意されているアプリケーションの雛形のようなものです。

フレームワークを使うことで、時間を短縮して作りたいモノを完成させることができます。

JavaScriptのフレームワークとしては、「Node.js」や「AngularJS」というものなどが特に有名です。

「Node.js」はチャットやSNSをはじめ、動画配信やゲームなどリアルタイムで高速な処理が求められるサービスの構築に使われます。

「AngularJS」はWebアプリの開発に使われます。

JavaScriptにも様々なフレームワークがありますが、JavaScript自体進化の途中なので新しい技術が次々と出ています。

また、有名なフレームワークはそれに関連する情報サイトが多く存在しますので、学習の際に分からないことを調べやすい利点があります。

もちろんJavaScript以外にもフレームワークは有ります。

オススメのJavaScript入門方法は?

プログラミング入門は、サイトや教材などが無数にありますので、どれをどのように使えば効率よく学習できるのかわからなかったりしますよね。

JavaScriptにおいても、おすすめの入門情報を上手く使えるかどうかで習得までにかかる時間が全然変わってきてしまいます。

また人によって学習スタイルは様々です。

本記事では学習スタイルに合わせて以下の通り、いくつかのオススメ入門情報をお伝えしますので、是非ご自分にあった学習スタイルに沿ってJavaScriptの入門学習を楽しんでくださいね。

目的別学習方法まとめ

【簡単な作品を作ることから始めたい】
>> 自分で実際に手を動かしながら作品を作りたい

まとめ

JavaScriptの特徴や使い道などについて解説してきましたがいかがでしたでしょうか?

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

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

JavaScriptカリキュラム無料公開中!

この記事はJavaScript入門完全攻略ガイド【基礎学習/アプリ開発/仕事獲得】の一部になります。このカリキュラムは、プログラミング入門者が、JavaScriptの基礎学習からアプリ開発、さらには仕事獲得まで体系的に学べる内容となっています。

JavaScript学習に必要な情報を一つにまとめていますので効率よくJavaScriptを学ぶことが出来ます。この機会に是非活用していただければと思います。


33歳、未経験だった僕がフリーエンジニアになれた理由
現在フリーでWEBエンジニアをやられている濱口直行さん。33歳で、プログラミングを学び始め、約半年という短い期間で独立までされた学習ログを余すことなくインタビューさせていただきました。

プログラミングを学習中の方はもちろん、独立をお考えの方まで幅広く活用できる記事になっています。この機会に是非活用していただければと思います。


JavaScriptを最短で習得したい方へ

弊社マンツーマンレッスンでは、未経験者の方でも安心して学習できるように

  • プログラミング基礎学習
  • オリジナルアプリ開発
  • 仕事獲得

まで徹底したサポートを行っています。

まずは『無料体験レッスン』で、弊社のコンサルタントと一緒にあなた専用の学習方法やカリキュラムを考えてみませんか?

JavaScriptならではの学習方法や仕事獲得方法など、より具体的なアドバイスもさせていただいています。

詳しくは下の画像をクリックして弊社サービス内容をご確認ください。

cta_js5

非常識な結果を出した卒業生

活躍する現役エンジニア

人気記事セレクション

LINEで送る
Pocket

この記事が気に入ったら
いいね!をしてフォローしよう

最新情報をお届けします

書いた人

井上 慎也

井上 慎也

侍エンジニア塾のインストラクター。フリーでWEB制作の受託や自身の事業の傍ら、侍ではWEBプログラミング方法の指導やプログラミング学習コミュニティの運用を行っている。
好きなショートカットキーは、command + w 。愛機はMac Book Pro。ブラウザのタブを大量に開きがち。