本記事では、プログラミング初心者向けに向けて「JavaScriptとは何か」「JavaScriptを学習するメリットとデメリット」などについて、分かりやすく解説いたします！
なお、本記事を執筆したのは、プログラミングスクール「アキバ・テックドリーム・アカデミー」（以下、テクドリ）の運営企業であるメディアファイブ株式会社（以下、メディアファイブ）に所属している現役のITエンジニア職の社員です。
JavaScriptとは
JavaScriptとは、プログラミング言語の一つで、主にウェブページにさまざまな動きを付けるために使用されます。省略して「JS：ジェイエス」とも呼ばれています。
HTMLやCSSと同じように、後述するフロントエンドのプログラミングを学ぶ上では中核技術ともいえる言語で、開発現場の実務でも大変よく使用されます。そのため、未経験からエンジニアを目指す方が学習するべき言語の一つです。
JavaScriptの歴史
JavaScriptは1995年にブレンダン・アイク（Brendan Eich）が開発したプログラミング言語です。
20年以上がたった現在に至るまでさまざまな場面で使用されており、ウェブサイトにおいては9割以上の使用率となっております。
JavaScriptとJavaとの関係性
JavaScriptに似た名前の「Java」というプログラミング言語がありますが、この2つの言語は全く異なる言語です。
もともとはJavaScriptが「LiveScript」という名前でしたが、当時Javaが注目を浴びていたこともあり「JavaScript」という名前に変更されました。
Javaについては別の記事で紹介していますので、よろしければご参考ください。
Could not retrieve HTML for embedding from https://tech-dream.school/archives/category/study/programming/lang/2716JavaScriptの特徴
JavaScriptの特徴として下記が挙げられます。
- 動的型付け言語
- クライアントサーバとサーバサイドの実装が可能
動的型付け言語
JavaScriptは、動的型付け言語の一つです。
動的型付け言語とは、プログラミングの実行時に代入された値などによって型を決定する言語です。
Javaなどは静的型付け言語に属するプログラミング言語です。動的型付け言語とは異なり、型をプログラムを実行する前に定める言語です。
動的型付け言語は「型」を気にする必要がないというメリットがありますが、バグが混入しやすいというデメリットもあります。例えば、数字しか入れる予定のない変数に文字列が入ってしまう可能性があります。
ソースコード例
静的型付け言語のJavaは、変数を宣言する際に「int」や「String」など型をあらかじめ決める必要があります。
例えば、以下のように数値の型「int」で宣言した変数には、文字列を代入することができません。
int value = 123; // 数値
value = "Hello"; // 文字列 型不一致によるエラーが発生しかし、動的型付け言語であるJavaScriptは動的型付け言語であるため、以下のように同じ変数の中に異なる型の値を代入することが可能です。
let value = "Hello"; // 文字列
value = 123; // 数値に変わるクライアントサイドとサーバーサイドの実装が可能
JavaScriptだけで、Webサービスを完結させることもできます。
プログラミングにおいて、目に見える部分の処理を書く「クライアントサイド」と目に見えない部分の処理を書く「サーバーサイド」に分けることがあります。
一般的には、クライアントサイドはJavaScriptで、サーバーサイドはJavaやPHPなどでWebサービスを立ち上げますが、Node.jsという実行環境を使えばJavaScriptだけで両方の役割を担うことが可能です。
JavaScriptの使用例
静的なWebページであればHTML、CSSだけでも作成できますが、画面操作などのアクションに反応して表示を変更するような、動的なWebページを作成する場合はJavaScriptが必要になります。
JavaScriptで実行できる機能として下記のようなものがあります。
- ボタン押下時の画面表示の変更
- ユーザーが入力した文字の表示
- リアルタイムの時間を表示
以下では、JavaScriptによって実行される動作をソースコードと共に紹介しています。ぜひ実際に操作してみてください。
また、ここで挙げているものはほんの一例で、他にも様々な動作が可能です。
ボタン押下時の画面表示の変更
右上のボタンをクリックするとメニューが表示されます。なお、こういった三本線アイコンのボタンを押下することで表示されるメニューを「ハンバーガーメニュー」と呼びます。
ユーザーが入力した文字を表示
文字を入力後、「表示」ボタンを押すと入力した文字がテキストボックスの下に表示されます。
リアルタイムの時間を表示
更新時点での現時刻を画面に表示させます。時間をおいてから再度画面を更新すると、再更新のタイミングに合わせた現時刻を表示します。
JavaScriptを学習する上でのメリット・デメリット
未経験からJavaScriptを学ぶ上でのメリット・デメリットについて紹介いたします。
JavaScriptのメリット
JavaScriptを学習する場合の主なメリットとして下記が挙げられます。
- 習得したスキルを活かしやすい
- 開発環境を整えやすい
- 情報が多い
習得したスキルを活かしやすい
Web開発は、フロントエンドとバックエンドの2つの領域に分けて開発します。
フロントエンドは、ユーザーが実際に操作する画面の領域のことで、バックエンドは、ユーザーには実際に見えないアプリケーションの裏側の領域を指します。
バックエンドの言語はJava、C、PHP、Pythonなど様々あり、プロジェクトによって使う言語が変わります。
しかし、フロントエンドの開発をする場合、JavaScriptを利用することがほとんどです。そのため、他の言語と比べると習得したスキルを活かせる場面が多いです。
また、ライブラリなども増えているので、今後も長く活躍するプログラミング言語とも言えます。
フロントエンドエンジニアとバックエンドエンジニアを含めたアプリケーションエンジニアについては、別の記事で紹介しています。
Could not retrieve HTML for embedding from https://tech-dream.school/archives/category/study/it-engineer/beginner-job/327開発環境を整えやすい
JavaScriptは開発環境を簡単に準備できます。
プログラミング言語を勉強する際には、まず環境構築が必要なことがあります。
例えばJavaだと、JDKやEclipseなどインストールする、環境変数を整えるなど、プログラミングの準備段階に当たる環境構築について学ぶ必要があります。そのため、初学者が学習を始めるまでのハードルが高く、実際にプログラミングをする前に挫折してしまうことも少なくはありません。
しかし、JavaScriptはHTMLファイルさえあれば勉強できるので、初めてのプログラミング学習にピッタリです。
情報が多い
JavaScriptを学ぶ人は非常に多いため情報が多く、不明点があった場合に解決しやすいです。 調べたいキーワードを入力するだけでたくさんの情報を入手できます。
JavaScriptのデメリット
JavaScriptを学習する場合の主なデメリットとして下記が挙げられます。
- 情報の入手に工夫が必要
- 更新頻度が高い
情報の入手に工夫が必要
情報量が多いことはメリットではありますが、デメリットにもなりえます。
様々な情報を本当に正しいのか、最適解かどうかを判断する必要があるからです。
情報を検索する工夫の一つとして、検索キーワードを増やして絞り込むことをおすすめします。
例えば「ボタン押下時の画面表示の変更」の項目で挙げたハンバーガーメニューのような動きのメニューを作成したい場合「webサイト ボタン クリック メニュー 上から」と細かくキーワードを設定して検索すると似たような動きのソースコードが見つけやすくなります。
更新頻度が高い
JavaScriptは更新頻度が高いため、新しい関数が出てきたり、以前まで使用できていた記法が非推奨になる場合があります。
そのため、常に最新の情報をキャッチアップしていくことが重要です。
JavaScriptについて
ここまでJavaScriptの紹介をしてきました。 JavaScriptの特徴としては下記があります。
- 動的型付け言語
- クライアントサーバとサーバサイドの実装が可能
JavaScriptを学習する場合のメリットとしては下記があります。
- スキルを活かしやすい
- 開発環境を整えやすい
- 情報が多い
JavaScriptを学習する場合のデメリットとしては下記があります。
- 情報の入手に工夫が必要
- 更新頻度が高い
JavaScriptは情報もたくさんあり、視覚的にプログラミングを学ぶことができるので、未経験者が一番初めに学ぶにはおすすめの言語です！
