プログラミング初心者に向けてJavaScriptの概要や特徴・学習方法などを解説していきます。
「ブラウザ」とは、「インターネットを見るソフト」で以下の4つが有名です
- Google Chrome
- Apple Safari
- インターネットエクスプローラー
- Edge
最近のほとんどのホームページは、何かしらJavaScriptが使われています。
ネットを見ていて、次のような経験をしたことはないでしょうか？
- ネット検索で文字入力したら、自動的に検索候補のリストが表示された
- ネットショッピングで、商品を選んでいくと買い物の合計金額が変化した
- 郵便番号を入力したら自動的に住所の候補が表示された
このように「ホームページに動きのある処理を作る」のがJavaScriptです。
JavaScriptはここ数年、最も活躍しているプログラミング言語の1つと言えます。
エンジニア プログラム初心者でも勉強しやすい「JavaScript」は需要もかなり高まっています
そこで本記事では
- JavaScriptの概要、特徴
- JavaとJavaScriptの違い
- JavaScriptで作れるもの、将来性
などについて詳しく解説していきます。
目次
プログラミング初心者のためのJavaScriptの基本的な特徴
プログラミング言語の中では「JavaScript」は取り組みやすい言語です。
プログラム初心者の方は「JavaScript」というと
プログラマー志望者 なんだか難しそうだな・・・
という感じがするかもしれません。
パソコンさえあれば、ほぼ準備なしで始められるので、JavaScriptは初心者におすすめです。
JavaScriptはどんな言語？概要を紹介します
JavaScriptな次のような特徴があります。
- ホームページと相性が良い言語
- ブラウザで実行できる（フロントエンド）
- サーバーでも実行できる（バックエンド）
それぞれ詳しく見ていきます。
ホームページと相性が良い言語
JavaScriptは、「ホームページと相性が良い言語」です。
JavaScriptは、ホームページに動きをつけるために考えられたプログラミング言語です。
昔のホームページは、ネット通信が遅く、単に「文字や画像が固定で表示されるだけ」でした。
ですが、ネット技術の向上で
- マウス操作で画面を変える技術
- 音楽や動画を流したりする技術
が作られていきました。
JavaScriptはホームページの中に処理を埋め込むことができ、簡単に作れる仕組みがあります。
そのためJavaScriptは、ホームページと相性が良い言語なのです。
ブラウザで実行できる（フロントエンド）
JavaScriptは、ブラウザさえあればプログラムを実行できます。
JavaSucriptは「特別なプログラム」や「アプリ」は必要ありません。
ブラウザさえあれば開発ができます。
スマホでもパソコンでも画面サイズなどの違いはありますが、同じように動作させられるのです。
フロントエンドはユーザーの目の前（フロント）で動作するという意味です。
JavaScriptはフロントエンドで
- 画面表示
- 操作の処理
などを行う重要な役目を果たしています。
サーバーでも実行できる（バックエンド）
JavaScriptは、フロントエンドだけでなく、サーバーでも実行できます
先述したようにブラウザで動作する処理を「フロントエンド」と呼びます。
通常、ホームページは「フロントエンド」と「バックエンド」を連携させて作られます。
フロントエンドとバックエンドは、次のような役割分担をしています。
- フロントエンド：ブラウザでホームページを表示し、マウス操作などによる動きを担当
- バックエンド：ホームページに表示するためのデータを加工・作成を担当
バックエンドは、普段は気付きにくい縁の下の力持ち的な存在です。
例えば、
- ログイン認証
- データベースから会員情報を取り出してブラウザで見られるよう加工し、ブラウザにデータを渡す
といった役目を果たしています。
以前はバックエンドのプログラミング言語は、PHP（ピーエイチピー）などの言語しか使えませんでした。
現在は「フロントエンド」と「バックエンド」両方ともJavaScriptが使えるようになっています。
ここ数年サーバーでもJavaScriptが使える「Node.js」を導入する流れがあります。
なのでバックエンドのJavaScriptエンジニアの需要も高まっています。
JavaとJavaScriptの違いは何が違うのか
「Java」と「JavaScript」は、名前は似ていますが全く違うものです。
JavaScriptは、開発時は「LiveScript」と呼ばれていました。
しかしJava言語を開発した会社と業務提携していた関係もあり、JavaScriptに変更されました。
JavaScriptは「ホームページ」に使われることが多いです。
しかし「Java」は
- パソコン
- スマホのアプリ開発
- 家電
- 自動車
などのコンピューターで使われることが多いです。
JavaScriptの仕組み
JavaScriptは、プログラムを書いたHTMLファイルをブラウザで読み込むと、すぐ実行されます。
JavaScriptの特徴＝プログラムを書いたファイルをブラウザで読み込むと、すぐ実行できる
JavaScriptの処理は、ブラウザ内ですべて行われます。
ホームページでJavaScriptを動かす場合は、表示内容を書いたHTMLファイルにJavaScriptのプログラムを追記します。
例えば、
- ボタンをクリックしたらメッセージを出す
- 画像をクリックしたら拡大表示する
といったことを記載します。
ホームページのページを開いてから閉じるまで、ブラウザ上で処理が実行されます。
JavaScriptの難易度
JavaScriptの難易度は、やや低めです。
JavaScriptは「初級～中級レベル」であれば、それほど時間はかかりません。
プログラミング未経験でも数週間あれば概略レベルまでは理解できるかと思われます。
プログラミングの経験者ならもっと早く習得できます。
- C/C++言語
- Java
- Python
などの言語を知っているなら、プログラム構造が似ているので理解しやすいでしょう。
JavaScriptの専門性
Webサービスの中核となる技術が使われるため専門性は高いです。
ホームページの開発は、先述したようにブラウザで処理を担当する「フロントエンド」とサーバーでの処理を担当する「バックエンド」の2つがあります。
ただし、バックエンドの方は、データベースとのアクセスやセキュリティに関する処理なども必要です。
なのでより高度な知識が必要が必要になります。
エンジニア これから勉強するなら、まずは「フロントエンド」の処理を学んで、そして「バックエンド」に進むのがオススメです
JavaScriptで作れるもの：なにができるのか
現在、ほとんどのホームページは「JavaScript」なしでは作ることができません。
ホームページを見ているだけでも、知らない間に「JavaScript」が活躍しています。
そこで、JavaScriptで何ができるのか、実際に動いているサービスなどを見ていきましょう。
JavaScriptはホームページで動きがある処理を作れる
JavaScriptは、ホームページで主に「動きがある処理」や「マウスやタッチ操作」「文字入力」に関わる処理を担当しています。
例えば、次のような処理が作れます。
- 検索時に入力した文字に候補を出す
- データ読み込み中に「読み込み中」の画面を表示する
- 画像が一定間隔で変わっていく（スライダー）
- 小さい画像をクリックすると大きい画像で表示する
- ネットショッピングでカートに商品を入れると買い物の合計金額が変わる
- 文字入力中にミスしたら即座にエラーを出す
- 表示するたびに変わる広告を出す
- 郵便番号を入れたら自動的に住所の候補が出る
- ダイアログボックスを表示（YES/NOなど
挙げればキリがないですが、現在のホームページにはJavaScriptが必須になっています。
JavaScriptでつくられたサービスはGoogle Map、ブラウザゲーム等
Webの様々なサービスの操作画面はJavaScriptが使われています
JavaScriptで作られたサービスは、次のようなものがあります。
- Google Mapの操作画面
- Gmailの操作画面
- ブラウザゲームの操作画面
- オンラインチャットの操作画面
- リアルタイム株価
- FXチャート
こちらも挙げればキリがありませんが、Webの様々なサービスにJavaScriptが使われています。
JavaScriptでできるのは「Web全般の技術」
JavaScriptでできることは、Web全般の処理が行なえます。
企業や商品のサイトをJavaScriptで構築することもできます。
「フロントエンド」は、HTML/CSSの作成に、JavaScriptを組み合わせればほぼ作れます。
「バックエンド」は、Node.jsを使い、JavaScriptで記述できます。
JavaScriptの将来性
これからJavaScriptを勉強するなら、今後のニーズやエンジニアになっても将来性があるか気になります。
そこで、JavaScriptの将来性についてご紹介します。
求人数
JavaScriptの求人数は、Web関連はしばらく成長が見込まれるため、増加傾向と想定されます。
ある求人サイトでは、「JavaScript」エンジニアを募集している案件は、1年間で約1800件でした。
求人サイトは様々あるため、非公開での求人も含めるとかなりの案件数になると思われます。
他の言語の求人数での比較としては、求人数はJava・PHPの半数程度です。
ほとんどの企業はホームページを持ち、情報発信していくため、常に新しい商品やブランドのサイトが登場しています。
そのため、今後しばらくはJavaScriptの求人は増えると思われます。
JavaScriptエンジニアの年収
JavaScriptは金融機関のサービスでも使われており、企業によっては1,000万円プレイヤーも狙えます。
JavaScriptエンジニアの年収は、およそ次のようになります。
- フロントエンド：300万～800万円/年
- バックエンド：300万～1000万円/年
年収は、持っているスキル（経験年数）や開発案件によって幅が大きいので、およその目安として見てください。
また「フリーランスで働く場合」と「企業に勤める場合」でも年収は変わってきます。
JavaScriptエンジニアの案件（フリーランス案件）
フリーランスのJavaScriptエンジニアの案件は、小さい案件から大きい案件まで様々で需要が高まっています。
小さい案件だと、次のような仕事があります。
- ホームページのパーツ作成
- ホームページの改善提案、修正
- 企業や商品のホームページの作成（数ページの規模）
大きい案件だと、次のような仕事があります。
- ネットのアプリの開発
- ネットショップなどのシステム開発
- 会員制サービスのシステム開発
- 企業内システムの開発
など
小さな案件は、在宅でも可能な案件が多いです。
大きい開発案件は、企業に行って働く形式（常駐型）が多いです。
そのため勤務地もチェックしておく必要があります。
エンジニア 初めは慣れないことが多いから小さい案件から始めていくといいですね
JavaScriptが学べる学習サイト3選
JavaScriptを学ぶときは言語使用を確認しましょう。
「JavaScriptが勉強できるサイト」はたくさんあります。
そのため、JavaScriptを学習するときは、「古い仕様」でないことを確認してから勉強する必要があります。
サイトに「ES6対応」などと書かれていることが多いです。
JavaScriptを学べる学習サイト「マンガで分かるJavaScriptプログラミング講座」
引用元：マンガで分かるJavaScriptプログラミング講座
『マンガで分かるJavaScriptプログラミング講座』は、超初心者の方におすすめの学習サイトです。
特に、プログラム未経験で、勉強が途中で挫折しそうな方に向いています。
マンガで大まかな解説があった後に、文章で詳しい補足説明があります。
ただ欠点としては、
- ES6（ECMAScript2015）未対応でプログラムが古いこと
- 初級レベルの話が多い
ということが言えます。
このサイトが理解出来たら、もうワンランク上のサイトや本で脱初心者を目指すとよいです。
JavaScriptを学べる学習サイト「Progate」（無料・有料）
引用元：Progate
動画で勉強するより自分のペースで勉強したいなら、『Progate』がおすすめです。
Progateは要点だけがまとまったスライドを読むことでJavaScriptの勉強できる学習サイトです。
長い文章をずっと読むより短時間で勉強ができます。
実際にプログラムを入力して実行できるテスト環境もあります。
自分でJavaScriptの実行環境を用意する必要がないのが便利です。
JavaScriptを学べる学習サイト「ドットインストール」（無料・有料）
引用元：ドットインストール
短い動画で学習したいなら『ドットインストール』がおすすめです。
ドットインストールは動画で簡単な例題を解きながら、少しずつ勉強できる初級者～中級者向けのサイトです。
1つの単元が短く、少しずつ勉強できます。
無料と有料の学習コンテンツがあります。
月額制で980円/月がかかりますが、集中してやれば本を買うより安く勉強ができるかもしれません。
無料でも一部のコンテンツが見られるので、チェックしてみてはいかがでしょうか。
プログラミングを始めようか迷っていませんか？
プログラミングを始めてみようと思っても学習で挫折しないか
職業として生計を立てていけるか不安ですよね。
プログラミングジャパンでは全くの初心者でも最速で安定した収入を得るプログラマーになる為に必要なステップをLINE＠で配信しています。
