【イラスト付き】JavaScript概要を一問一答でチェックしよう！【丁寧に解説】
はじめに
皆さんこんにちは。
今回はよくある疑問に回答する形式でJavaScriptというプログラミング言語についてご紹介いたします。
プログラミング初心者の方は、JavaScriptを学習するきっかけやモチベーションにしていただけますと幸いです。
今回の内容は次のような方にオススメです。
こんな人にオススメ
- JavaScriptの特徴を知りたい
- JavaScriptを学習するステップが知りたい
初めて学習する方にも分かるように、丁寧に解説していきます。
プログラミングに慣れてきた方も、是非一度目を通していただけると嬉しいです。
😋 JavaScriptの概要を確認しましょう♪
JavaScriptとは？
ウェブページでよく使われるプログラミング言語です。
JavaScriptは主にブラウザ上で動作し、ウェブページを操作する際に利用します。
| 🍕 例えば、ボタンがクリックされたらダイアログを表示するなど、ユーザーの操作に対応して画面に動きをつけることができます。具体的なサービスですと、ブラウザ版のGmailやTwitterなど、広くJavaScriptが活用されています。 |
|---|
また、Node.jsをインストールすることでコンピュータ上（サーバー）でJavaScriptを動作させることもできます。このようにJavaScriptは広い範囲で活用することができます。
😋 一度学習すれば様々な分野で使えます♪
EcmaScriptとの関係は？
EcmaScriptがJavaScriptの本名です。
JavaScriptの学習を始めると、時々EcmaScriptという名前を聞くことになります。EcmaScriptとはEcmaインターナショナルが策定している言語仕様です。
😋 EcmaScriptはプログラムの書き方のルール名のようなものです♪
ではなぜJavaScriptと呼ばれるのでしょうか。それはJavaScriptの最初の名前がJavaScriptであり、現在でも通称としてその呼び名が浸透しているためです。
正式なバージョン名はEC2015のように、EcmaScriptの頭文字が利用されています。
😋 JavaScriptはEcmaScriptのニックネームのような関係です♪
JavaScriptはなぜ人気なの？
学習しやすい、準備が手軽、スキル需要が高いという理由で人気です。
JavaScriptはプログラミング言語人気アンケートで1位を取ることが多い、非常に人気なプログラミング言語です。人気な理由は様々にありますが、よく挙げられる理由をご紹介します。
理由１：学習しやすい環境が整っている
JavaScriptは人気なこともあり学習教材が多くあります。ネット上でも書籍でも好きな教材で学習することができます。また後述する環境構築も容易であるため、学習内容をすぐに試すこともできます。
😋 導入のハードルが低いので誰でも始めやすいです♪
理由２：開発環境の用意が簡単
JavaScriptjはブラウザさえあればすぐに実行することができます。他のプログラミング言語にあるような実行環境での細かい準備は必要ありません。
JavaScript開発で人気なVisualStudioCodeというエディタは、数回クリックするだけで簡単にインストールできます。こちらは拡張機能が多数用意されており、初心者が最初に使うエディタとしてだけでなく、現場レベルでの本格的な利用もできます。
😋 JavaScriptは準備がとても簡単なのです♪
理由３：習得すると幅広く活躍可能
JavaScriptはフロントエンドとサーバーサイド両方で利用可能であるため、習得すると幅広く活躍することができます。JavaScriptは画面制御に使うので特にフロントエンドでは必須のスキルとなっています。
😋 画面だけでなくサーバーサイドも開発できます♪
JavaScriptの学習は何から始める？
HTML→JavaScriptの基本文法→DOM操作→WebAPI通信→フレームワークなど、この順番がおすすめです。
JavaScript学習の王道ステップをご紹介します。主な用途であるフロントエンドを想定しています。
ステップ１：HTMLの最低限の記述
HTMLは画面の構造を定義するための言語です。JavaScriptは画面に動きをつけるためのものなので、HTMLの基本を学習しておく必要があります。
JavaScriptの前段としてであれば、HTMLは基本の理解だけで十分です。具体的なタグを挙げると、html, head, body, button, input, form などです。
CSSも学習することをおすすめしますが、JavaScriptへの最短距離を取る場合は後回しでもOKです。
😋 JavaScriptはHTMLとセットで利用します♪
ステップ２：JavaScriptの基本文法
JavaScriptの基本文法を学習します。ここでの基本文法とは変数宣言や条件分岐など、処理を組み立てるための記述のことです。特に関数やオブジェクトはJavaScriptでは重要なので、根気よく学習を進めましょう。
😋 基本文法は全ての土台になります♪
ステップ３：DOM操作
基本文法の習得後は、DOM操作の方法を学習します。DOM操作は画面に動きをつける方法です。JavaScriptは主に画面の制御が目的のプログラミング言語です。特定のボタン押下時や、スクロール時などユーザーの操作に応じて画面の内容を変更することができます。
これまでの基本文法を活用することになりますので、基本文法の復習と行ったり来たりしながら学習を進めます。
😋 DOM操作ができたらJavaScriptが楽しくなってきます♪
ステップ４：WebAPI通信
次にWebAPI通信について学習をします。WebAPIを活用することでサーバーとデータのやり取りができるようになります。
JavaScriptではサーバーからデータをもらい、それを画面に反映させるということが頻繁にあります。商品リストを取得し繰り返し処理で画面に表示する、というようにDOM操作の知識も必要になります。
また、サーバーにデータを送信することもあります。ユーザー登録のように画面で入力した情報を加工し、サーバーに送信することで登録処理をします。
😋 本格的なWebアプリでは通信は必須です♪
ステップ５：フレームワークなど
ここまではJavaScript単体の学習を扱ってきました。大規模な開発や本格的な開発をする場合は、「もっと書きやすい」「もっと管理しやすい」方法が必要になります。そこでフレームワークが登場です。
代表的なフレームワークは「Vue.js（ビュージェイエス）」や「React（リアクト）」があります。
JavaScript単体での記述を理解した後は、お好きなフレームワークの学習に進みましょう。
😋 フレームワークには固有の記述ルールがあるので、別途学習が必要です♪
おわりに
皆さん、お疲れ様でした。
ここまでご覧いただき、ありがとうございました。
JavaScriptの概要についてついて確認をしていただきました。
JavaScriptは始めやすく習得することでで活躍の幅が広がりますので、最初のプログラミング言語に選んでみてはいかがでしょうか。
😋 これからもプログラミング学習頑張りましょう♪
Discussion