はじめに
「プログラミングを始めてみたい！」
そう思って調べ始めると、最初にぶつかるのが開発環境の構築ではないでしょうか。
- Visual StudioとVS Codeの違いは？
- JavaやPythonってインストールしないといけないの？
- Node.jsって何？
- 環境変数って？
プログラムを書く前に知らない言葉がたくさん出てきて、「難しそう」と感じてしまうことも少なくありません。
そこで、このシリーズでは環境構築をできるだけシンプルにし、プログラミングそのものを体験することを目的に進めていきます。
この記事はシリーズの構想編です。
「なぜHTMLとJavaScriptを使うのか」「どんな流れで学ぶのか」を紹介します。
このシリーズの目的
このシリーズのゴールは、JavaScriptを完璧に覚えることではありません。
プログラミングに共通する考え方を体験し、
- プログラムを書く
- 実行する
- 思った通りに動かす
- エラーを確認して修正する
という一連の流れを経験することが目的です。
どのプログラミング言語でも、
- 変数
- 条件分岐（if）
- 繰り返し（for）
- 関数
といった基本的な考え方は共通しています。
まずはこれらを理解することで、今後ほかの言語を学ぶ際にも役立つ土台を作ることができます。
なぜHTMLとJavaScriptなの？
プログラミングを学ぶ方法はたくさんあります。
C#、Java、Pythonなど、どれも素晴らしい言語です。
ただし、多くの場合は開発環境のインストールや設定が必要になります。
一方でJavaScriptは、ブラウザが実行環境そのものです。
つまり、
- HTMLファイルを作る
- JavaScriptを書く
- ブラウザで開く
これだけでプログラムを動かすことができます。
コンパイルや特別な設定は必要ありません。
初心者にとっては、「書いたコードがすぐに動く」という体験が学習のモチベーションにつながります。
使用するもの
このシリーズで使用するものは、とてもシンプルです。
- ブラウザ（Google ChromeやMicrosoft Edgeなど）
- VS Code for Web（またはVS Code）
以上です。
今回は、インストール不要で利用できる VS Code for Web を利用します。
通常のVS Codeを利用しても問題ありませんが、「まずは始めてみる」ことを優先し、このシリーズではできるだけ環境構築を必要としない方法を採用します。
Developer Toolsを使ってみよう
ブラウザには、開発者向けの便利な機能が標準で搭載されています。
それがDeveloper Toolsです。
多くのブラウザでは F12キー を押すことで開くことができます。
その中にある Console は、JavaScriptを実行したり、プログラムの実行結果やエラーを確認したりするための画面です。
実際の開発現場でも頻繁に利用される機能なので、このシリーズでも積極的に活用していきます。
基礎編では、
-
console.log()で値を確認する方法 - エラーメッセージの見方
- Consoleを使ったデバッグ
についても紹介します。
このシリーズで学ぶこと
このシリーズでは、次の内容を順番に学んでいきます。
- Hello World
- 変数
- 四則演算
- 条件分岐（if）
- 繰り返し（for）
- 関数
- ボタンを押したときの処理
- 入力フォームの値を取得する方法
- Consoleを使ったデバッグ
最終的には、これらの知識を組み合わせて簡単なWebアプリを作れることを目標にします。
まずは楽しみながら学ぼう
プログラミングは、一度にすべて覚える必要はありません。
最初は、
「コードを書いたら画面が変わった！」
「ボタンを押したら動いた！」
そんな小さな成功体験を積み重ねることが大切です。
このシリーズでも、難しい理論から入るのではなく、「まず動かしてみる」ことを大切に進めていきます。
ロードマップ
このシリーズは、全3回を予定しています。
📖 環境構築なし！HTMLとJavaScriptで始めるプログラミング入門
第1回：構想編（この記事）
・シリーズの目的
・HTMLとJavaScriptを選んだ理由
・学習環境
・Developer Toolsの紹介
↓
第2回：基礎編
・Hello World
・変数
・四則演算
・if文
・for文
・関数
・ボタン操作
・入力フォーム
・Consoleを使ったデバッグ
↓
第3回：応用編
・基礎知識を組み合わせたWebアプリ作成
・実践的なサンプル
・プログラムを組み立てる考え方
次回予告
次回の基礎編では、実際にHTMLとJavaScriptを書きながら、プログラミングの基本を一つずつ学んでいきます。
コードを書いて、実行して、思い通りに動かしてみる。
その楽しさを一緒に体験していきましょう。