【JavaScriptとは?】初心者でも理解できる特徴や使い方を簡単解説!

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

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

プログラミングの入門者にとって、言語の特徴を掴むことはとっても難しいですよね。

「JavaScript(ジャバスクリプト)」という言語がプログラミングをする為に必要なものだということは分かります。

しかし、詳しい内容が書いてある書籍やWebページなどを見ても「結局何を言っているのか分からない」ということがよくあると思います。

そこでこの記事では、

  • そもそもJavaScriptとはなんなのか?
  • どんな特徴があってどんな使い道があるのか?
  • どのような使い方ができるのか?
  • 習得するとどんな仕事ができるのか?
  • フレームワークはどんなものがあるのか?
  • どうやって学習すれば良いのか?

といった内容を、専門用語を噛み砕いて誰でも分かるように徹底解説していきます!

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

JavaScriptとは?

shutterstock_310954343

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

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

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

JavaScriptの特徴は?

shutterstock_423138442

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

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

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

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

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

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

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

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

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

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

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

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

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

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

オブジェクト指向に関してわかりやすくまとめた記事もありますので、ぜひご参考ください。

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

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

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

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

もしJavaScriptに興味があってまだ触ったことがないという方は、次の記事を参考にしてぜひ触れてみてください。

JavaScriptのできること・使い道は?

shutterstock_122664079

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

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

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

JavaScriptの最もポピュラーな使われ方がWEBページに動きを付けることです。

写真をスライドさせたり、サイドバーを出し入れしたり、インタラクティブな動きはJavaScriptなどで制作されています。

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

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

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

JavaScriptで出来ることに関して詳しくはこちらでも紹介していますので合わせてご覧ください。

JavaScriptの使い方は?

javascript-basic-3

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

JavaScriptを書くために準備すること

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

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

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

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

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

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

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

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

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

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

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

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

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

簡単な方法としては、標準で用意されている「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」という仕組みを利用することで、JavaScriptを使ってダイナミックなWebサイトを開発できるというわけです。

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

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

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

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

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

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

さらにDOMについて知識を深めたい方は、次の記事で基本から活用事例をまとめているのでぜひ参考にしてみてください!

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

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

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

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

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

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

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

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

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

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

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

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

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」というものなどが特に有名です。

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

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

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

どんなフレームワークがあるのか知りたい方は次の記事をご覧ください。

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

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

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

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

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

全体を把握することから始めたい方

JavaScriptを学ぶために何をすれば全体を把握することから始めたい方はこちら。

JavaScriptを学ぶのに最適な学習サイトまとめはこちら。

入門者向けの無料スライドまとめはこちらから。

JavaScript学習に最適な良著を厳選していますので参考にどうぞ。

簡単な作品を作ることから始めたい方

まずはどんなものが作れるのか知り、自分で実際に手を動かしながら作品を作りたい方はこちら。

メソッドなど基礎知識を学ぶことから始めたい方

JavaScriptでよく使われるメソッドや文、そして配列などの基礎知識を一つ一つしっかりと身につけながら学習を進めたい方はこちら。

[配列とは] [繰り返し処理で使用するforeach文入門] [置換処理で使用するreplaceメソッド入門]

他にも本ブログでは様々なJavaScriptに関する基礎知識をわかりやすく解説しています。

ぜひ、以下の検索結果にて気になる記事から学習してみてください。

まとめ

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

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

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

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

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

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


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

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


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

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

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

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

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

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

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

cta_js5

学習者インタビュー

人気記事セレクション

プログラミング学習者必見

専属講師に質問し放題、レッスンし放題!最短1ヶ月でフリーランスエンジニア
プログラミング学習カリキュラム無料公開中
Ruby学習カリキュラム無料公開中
Python学習カリキュラム無料公開中
 1記事最大11,000円!テックライター募集


LINEで送る
Pocket

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

最新情報をお届けします

書いた人

井上 慎也

井上 慎也

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