JavaScriptの基礎を初心者向けに徹底解説！元ぼっち大学生のフリーランスエンジニアがおすすめの本を紹介しつつ詳しく説明します
今回はプログラミング初心者のぼっち大学生のみなさんに向けて、大学ぼっち時代にプログラミングを学び始め、在学中にフリーランスエンジニアとして独立した経歴を持つ僕が、JavaScriptの基礎知識について、できるだけ分かりやすく解説していきます。JavaScript初心者におすすめの本も何冊か紹介しますので、興味のあるぼっち大学生はぜひ一度読んでいってください。
たっちゃん
ぼっちユニバーシティの運営者です。
大学ぼっち時代にプログラミングを学び始め、在学中にフリーランスのWebエンジニアとして独立。
本業はWebアプリケーションやWebサイトの受託開発がメインですが、最近はFlutterにハマっています。
趣味はバックパッカー旅行と立ち飲み屋さん巡り。
現在は都内でひとり法人を経営しながら、現役のぼっち大学生のみなさんへお役立ち情報を発信しています。
0. はじめに
ぼっち大学生のみなさんこんにちは！
今回は、プログラミング初心者のぼっち大学生の皆さんと一緒に、JavaScriptの基礎知識について学んでいきたいと思います。
1. JavaScriptって何？
プログラミング言語は、コンピュータに指示を出すために使う言葉のこと。
JavaScriptはその中のひとつで、ぼっち大学生のみなさんもよく使っているSafariやChromeなどの、Webブラウザで主に動作するプログラミング言語です。
1-1. プログラミング言語の世界
1-1-1. プログラミング言語って何？
先述したようにプログラミング言語は、人間がコンピュータに命令を出すために使う特別な言葉のことです。
例えば、ぼっち大学生のみなさんが、「眠い。」と言う場合、日本語では「眠い。」となりますが、英語では「I’m sleepy.」となりますよね？
同じように、プログラミング言語にも様々な種類があり、それぞれ違う言い方でコンピュータに命令を出すのです。
1-1-2. プログラミング言語の種類はたくさんあります
プログラミング言語には、本当にたくさんの種類が存在します。
JavaScriptのほかにも、PythonやRuby、Javaなどいろんな言語があって、それぞれ違う特徴を持っています。
例えば、Pythonは初心者にも比較的優しい言語ですが、データ解析やAI（人工知能）の分野でよく使われる人気の言語だったりします。
1-2. JavaScriptの特徴と役割
1-2-1. JavaScriptはどこで使われる？
JavaScriptは、ぼっち大学生のみなさんがよく利用するであろう、Webブラウザで動くプログラミング言語。
主にWebページに動きをつけたり、ボタンを押すと何かが変わるような仕組みを作ったりするために使われることが多いです。
例えば、下記のようにボタンを押すと、「こんにちは！」というアラートが表示されるようにすることができます。
<button onclick="alert('こんにちは！')">
ボタンを押してね
</button>1-2-2. JavaScriptは他の言語とどう違う？
JavaScriptは、Webブラウザ上で動くというのが大きな特徴です。
他のプログラミング言語は、コンピュータやスマホのアプリなどで動くことが多いのですが、JavaScriptはWebページに直接埋め込むことができます。
2. JavaScriptの基本
この章では、ぼっち大学生のみなさんに、JavaScriptの基本的な文法について簡単に学んでいただきます！
JavaScriptに限らず、プログラミング言語を使うときには、変数やデータの型、関数といった言葉を覚えることが大切ですので、この機会に覚えていってくださいね。
2-1. JavaScriptの変数と型、関数について知ろう
2-1-1. 変数って何？
変数は、プログラムの中で値を保持するための箱のようなものに相当します。
例えば、りんごが3個ある場合、りんごの数を「3」という値を変数に入れておくことができるんだ。
let appleCount = 3;2-1-2. データの型とは？
データの型は、変数に入れることができる値の種類のこと。
JavaScriptには、文字列（String）、数値（Number）、真偽値（Boolean）など、様々なデータの型が用意されています。
let message = "こんにちは！"; // 文字列let age = 10; // 数値let isStudent = true; // 真偽値2-1-3. 関数って何をするの？
関数は、プログラムの中で特定の処理を行う部品のようなものになります。
例えば、挨拶をするときに、ぼっち大学生のみなさんは、基本的には何度も同じ言葉を使いますよね？
それを関数にしておくと、何度も同じ処理を繰り返すときに便利になります。
function sayHello() { console.log("こんにちは！");}2-2. JavaScriptで計算をしよう（四則演算）
2-2-1. 足し算と引き算
JavaScriptで足し算や引き算をするには、普通の計算と同じように「+」や「-」を使います。
let a = 5;let b = 3;let sum = a + b; // 足し算let difference = a - b; // 引き算console.log(sum); // 8console.log(difference); // 22-2-2. 掛け算と割り算
掛け算と割り算も、足し算や引き算と同じように「*」や「/」を使うよ。
let a = 6;let b = 2;let product = a * b; // 掛け算let quotient = a / b; // 割り算console.log(product); // 12console.log(quotient); // 3JavaScriptの基本的な文法はご理解いただけましたか？
次は、条件分岐や繰り返しといった、プログラムの基本的な構造を説明していきますね！
3. JavaScriptの基本構造（条件分岐・繰り返し）
3-1. 条件分岐（if文）
3-1-1. if文って何？
if文は、ある条件が成立するときだけ、特定の処理を実行するために使用する構文のこと。
例えば、ある数が10より大きいかどうかを調べるときなどに使えます。
let number = 12;if (number > 10) { console.log("この数は10より大きいです。");}3-1-2. if-else文で条件を分岐させよう
if-else文を使うと、ある条件が成立しなかったときにも、別の処理を実行できるようになります。
let number = 8;if (number > 10) { console.log("この数は10より大きいです。");} else { console.log("この数は10以下です。");}3-2. 繰り返し（for文）
3-2-1. for文で繰り返し処理をしよう
for文を使うと、同じ処理を繰り返すことができます。
例えば、1から5までの数字を順番に表示することができるよ。
for (let i = 1; i <= 5; i++) { console.log(i);}3-2-2. whileループの仕組み
whileループも、forループと同じように繰り返し処理ができます。
条件が成り立っている間、繰り返し処理を実行されます。
let i = 1;while (i <= 5) { console.log(i); i++;}これで、もっとJavaScriptの面白さを知ることができたね！
4. JavaScriptとブラウザ
JavaScriptを学ぶということは、Webブラウザを学ぶことと同義と言っても過言ではありません。
この章では、JavaScriptを使用してWebページをいじったり、ボタンを押すと何かが起こるような仕組みを試しに作ってみましょう。
4-1. Webページをいじってみよう（DOM操作）
4-1-1. DOMって何？
プログラミングを学ぶぼっち大学生のみなさんは、DOMという言葉を聞いたことがあるでしょうか？
DOM（Document Object Model）とは、Webページを構成する要素を直接操作できる仕組みのこと。
JavaScriptを使って、Webページにある文字や画像を変更したり、新しい要素を追加したりすることができます。
4-1-2. 要素を取得する方法
Webページの要素を操作するためには、まずJavaScriptで要素を取得しないといけませんね。
例えば、id属性が message の要素を取得するには、以下のように書くことができます。
let messageElement = document.getElementById('message');4-1-3. 要素を変更する方法
JavaScriptで要素を取得したら、次は内容を変更したり、スタイルを変えたりしてみましょう。
例えば、要素の中のテキストを変更するには、以下のように書くことができます。
messageElement.textContent = 'こんにちは、JavaScript！';4-2. ボタンを押したらなにかおこる？（イベント処理）
4-2-1. イベントとは？
イベントは、ボタンがクリックされたり、キーボードが押されたりすると発生するアクションのことです。
JavaScriptを使って、イベントが起こったときに、任意の処理を実行させることができます。
4-2-2. イベントリスナーの設定方法
イベントリスナーを設定すると、特定のイベントが発生したときに、指定した処理が実行されます。
例えば、ボタンがクリックされたときにメッセージを表示するには、以下のように書くことができます。
let buttonElement = document.getElementById('myButton');buttonElement.addEventListener('click', function() { alert('ボタンがクリックされました！');});JavaScriptとブラウザの関係が少し分かってきたところで、次の章ではJavaScriptについてもう少し深掘りしていきましょう。
5. JavaScriptの関数と配列、オブジェクトを使ってみよう
この章では、ぼっち大学生のみなさんに、JavaScriptの関数や配列、オブジェクトなどの基本を学んでいただきます。
5-1. 関数を上手に使おう
5-1-1. 引数と戻り値について
関数には引数と戻り値というものが存在します。
引数は関数に渡す情報で、戻り値は関数の結果を返す値のこと。
例えば、足し算の関数を作るときに引数と戻り値を使うことができます。
function add(a, b) { return a + b;}let result = add(3, 5);console.log(result); // 85-1-2. 関数のスコープとは？
スコープとは、変数が使える範囲のことです。
実は、関数の中で定義された変数は、関数の中でしか使えないのです。
これをローカル変数と呼びます。
function showNumber() { let number = 42; console.log(number); // 42}showNumber();// console.log(number); これはエラーになるよ！numberは関数の中でしか使えないからね。5-2. 配列とオブジェクトを活用しよう
配列とオブジェクトは、データをまとめて扱うとても便利な方法。
ぼっち大学生のみなさんは、それぞれの特徴を理解して、これらを上手に活用していくことが、JavaScriptのスキルアップのコツになります。
5-2-1. 配列って何？
配列は、複数のデータを一つにまとめて扱える仕組みです。
例えば、ぼっち大学生のみなさんの名前をリストにして管理するようなことができます。
let friends = ['タロウ', 'ハナコ', 'ジロウ'];console.log(friends[0]); // タロウconsole.log(friends[1]); // ハナコconsole.log(friends[2]); // ジロウ5-2-2. オブジェクトって何？
オブジェクトは、キーと値のペアでデータを管理できる仕組みです。
例えば、ぼっち大学生のみなさんの名前や年齢を一緒に管理するようなことができます。
let friend = { name: 'タロウ', age: 10};console.log(friend.name); // タロウconsole.log(friend.age); // 106. プログラミング初心者のぼっち大学生におすすめしたいJavaScript本を紹介します
まとめに入る前に、JavaScript初心者のぼっち大学生のみなさんに、現役エンジニアの僕がおすすめしたい書籍を何冊か紹介しておきたいと思います。
6-1. 1冊ですべて身につくJavaScript入門講座
こちらで紹介するのは、「1冊ですべて身につくJavaScript入門講座」です！
著者のManaさんは、Web制作者の方々は必ずお世話になっているであろう人気Webサイト、Webクリエイターボックスの運営者としても有名なお方。
この「1冊ですべて身につくJavaScript入門講座」は、
- これからJavaScriptを学びはじめたい
- 以前にJavaScriptの学習を試みたが挫折してしまった
- Webサイトに動きやイベントをつけてみたい
- HTMLとCSSの基礎を終え、次の目標を探している人 ・最新のJavaScriptを学び直したい
学習者を対象とした書籍です。
さらに、本書は2023年に発刊されたということもあり、記事の執筆時点で最新のJavaScriptを学ぶことができます。
「1冊ですべて身につくJavaScript入門講座」は、JavaScript入門者のための分かりやすい技術書を探しているぼっち大学生に、ぜひ手に取っていただきたい1冊となっております。
7. まとめ
今回は、プログラミング初心者のぼっち大学生向けに、JavaScriptの基礎知識を解説させていただきました。
Web制作やWebアプリケーション開発において、JavaScriptの知識は大いに役立つというか、ほぼ必須の知識と言ってもいいかもしれません。
また、今回紹介したJavaScriptは、Node.jsの登場により、近年ではフロントエンドだけでなく、バックエンドでも利用される機会が増えてきています。
さらに、JavaScriptを拡張して静的型付け言語として利用できるTypeScriptのシェアも、数年前から急上昇しています。
このことから、これからプログラミングを始めようというぼっち大学生のみなさんが、JavaScriptをしっかり学んでおくことは、その将来性も含めてメリットが大きいと僕は思います。
JavaScriptは、あらゆる学習プラットフォームや書籍、Webサイトなどで、初心者向けの学習コンテンツが多数提供されているプログラミング言語の1つ。
例えば、ぼっち大学生のみなさんが独学でJavaScriptを学ぶような場合も、学習のためのリソースに困ることはまず無いでしょう。
しかし、ぼっち大学生のみなさんは、サブスク型プログラミングスクールのSAMURAI TERAKOYA（侍テラコヤ）であれば、飲み会1回分ほどの費用で、JavaScriptをより効率的かつ確実に学ぶことが可能です。
SAMURAI TERAKOYA（侍テラコヤ）の詳細については、こちらの記事で解説していますが、
- 40種類以上に及ぶ学び放題の教材
- 平均回答スピード30分以内のQ&A掲示板
- 月1回〜の現役エンジニアとのオンラインレッスン
- プログラミング学習を継続できる学習ログ
を、月額2,980円〜という破格の料金で利用することができます。
JavaScriptの学習に興味があり、プログラミングスクールで学ぶことも視野に入れていたが、費用面がネックとなり、なかなか学習に手を付けられなかったというぼっち大学生のみなさんは、ぜひ一度このSAMURAI TERAKOYA（侍テラコヤ）に無料で相談してみてはいかがでしょうか？
