はじめに
HI Engineer Collegeでは、実務未経験のエンジニアの方や、エンジニアに興味がある方を募集したおります、まずはお気軽にお問い合わせください。
※ (株)G&T（【内々定まで最短2週間】ゼロからしっかりじっくり研修☆20代活躍中！）
※ HI Engineer Collegeに興味あがある方はこちら（プログラミングを学習したい方）
JavaScript フロントエンド開発入門 - 簡単Todoアプリを作ろう (全5回)
第1回：開発の準備とJavaScriptの基本
フロントエンド開発の世界へようこそ！このチュートリアルでは、JavaScriptを使ってブラウザ上で動く簡単なTodoアプリを作りながら、フロントエンド開発の基本的な考え方やコーディングの楽しさを学んでいきます。
「プログラミングは初めて」「JavaScriptって聞いたことはあるけどよくわからない」という方も大丈夫。ひとつずつ丁寧に解説していきます。
フロントエンド開発とは？
WebサイトやWebアプリケーションは、大きく分けて「フロントエンド」と「バックエンド」から成り立っています。
- フロントエンド: 私たちが普段ブラウザで見ている部分です。ボタンをクリックしたり、文字を入力したりといった、ユーザーが直接触れるインターフェースを担当します。HTML、CSS、JavaScriptといった技術が使われます。
- バックエンド: サーバー側で動く部分です。データの保存や処理、フロントエンドからの要求に応じたデータの送信などを行います。Ruby, Python, PHP, Node.jsなど様々な言語が使われます。
このチュートリアルで学ぶのは、主にフロントエンドの中でも「JavaScript」を使った部分です。JavaScriptは、Webページに動きやインタラクティブな要素を追加するために不可欠な言語です。
開発環境を準備しよう
フロントエンド開発を始めるために必要なものは、ほとんどの場合、皆さんのコンピューターにすでに入っているものです。
- テキストエディタ: コードを書くためのソフトです。Windowsならメモ帳、Macならテキストエディットでも書けますが、コードを書くのに便利な機能（コードの色分け表示など）がついた専門のエディタを使うのがおすすめです。無料で高機能なものでは、VS Code (Visual Studio Code) が人気です。
- Webブラウザ: 作成したWebページを表示・確認するためのソフトです。Google Chrome, Firefox, Safari, Edgeなど、普段お使いのものでOKです。特にGoogle Chromeには、開発に役立つ強力な「開発者ツール」が備わっています。
- 開発者ツール: ブラウザに内蔵されている機能で、Webページの構造を見たり、JavaScriptの実行結果を確認したり、エラーを探したりするのに非常に便利です。このチュートリアルでも頻繁に使います。
今回は、これらのツールを使って開発を進めます。もしテキストエディタをお持ちでない場合は、VS Codeをインストールしておくと良いでしょう。
最初のWebページを作成する
まずは、開発の準備として基本的なHTMLファイルとJavaScriptファイルを作成し、ブラウザで表示させてみましょう。
以下の手順でファイルを作成してください。
- 作業用のフォルダをコンピューターの好きな場所に作成します。（例:
todo_app） - 作成したフォルダの中に、以下の2つのファイルを作成します。
index.htmlscript.js
index.html ファイルに以下のコードを記述します。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>はじめてのTodoアプリ</title>
</head>
<body>
<h1>私のTodoリスト</h1>
<script src="script.js"></script>
</body>
</html>
コードの解説:
-
<!DOCTYPE html>: このドキュメントがHTML5であることを宣言しています。 -
<html lang="ja">: HTMLドキュメントの開始を表します。lang="ja"は日本語のページであることを示します。 -
<head>: ドキュメントのメタ情報（ブラウザには直接表示されない情報）を記述する部分です。-
<meta charset="UTF-8">: 文字コードを指定しています。これで日本語が正しく表示されます。 -
<meta name="viewport" content="width=device-width, initial-scale=1.0">: スマートフォンなど様々なデバイスで適切に表示するための設定です。 -
<title>はじめてのTodoアプリ</title>: ブラウザのタブに表示されるページタイトルです。
-
-
<body>: ブラウザに実際に表示される内容を記述する部分です。-
<h1>私のTodoリスト</h1>: 見出しを表示します。 -
<script src="script.js"></script>: ここが重要です。作成したscript.jsファイルを読み込んでいます。これにより、このHTMLファイル上でJavaScriptのコードが実行できるようになります。通常、JavaScriptの読み込みは</body>タグの直前に行うことが多いです。
-
次に、script.js ファイルに以下の簡単なコードを記述します。
console.log("JavaScriptが読み込まれました！");
alert("こんにちは！");
コードの解説:
-
console.log("...");: これはJavaScriptのコードを実行した際に、ブラウザの開発者ツールの「Console（コンソール）」タブにメッセージを表示するための命令です。プログラミング学習において、変数の中身を確認したり、コードがどこまで実行されているかを確認したりするのに非常によく使います。 -
alert("...");: これはブラウザに小さな警告ダイアログを表示するための命令です。
これらのファイルが保存できたら、index.html ファイルをWebブラウザ（Google Chromeなど）で開いてみてください。
ブラウザに「こんにちは！」というダイアログが表示され、OKをクリックすると「私のTodoリスト」という見出しが表示されるはずです。
さらに、ブラウザの開発者ツールを開いてみましょう。（Google Chromeの場合、F12キーを押すか、右クリックメニューから「検証」や「要素を検証」を選びます。）そして、「Console（コンソール）」タブを見てみてください。
そこには「JavaScriptが読み込まれました！」というメッセージが表示されているはずです。これは、記述したJavaScriptのコードが正しく実行されたことを示しています。
まとめ
今回は、フロントエンド開発の概要と、開発に必要な最低限の環境準備、そしてHTMLファイルとJavaScriptファイルを連携させて簡単なコードを実行する方法を学びました。
- フロントエンドはユーザーが直接触れる部分を担当する
- コードを書くにはテキストエディタ、表示にはブラウザが必要
- ブラウザの開発者ツールは開発の強い味方
- HTMLから
<script>タグを使ってJavaScriptファイルを読み込む -
console.log()でコンソールにメッセージを表示できる -
alert()でダイアログを表示できる
これで、JavaScriptを使ってWebページに動きを加える準備ができました。次回は、Todoアプリの見た目（HTMLとCSS）と、JavaScriptから画面の要素を操作する方法について学んでいきます。
お疲れ様でした！
次回予告: 第2回では、TodoアプリのHTML構造を作成し、CSSで見た目を整えます。そして、JavaScriptからこれらのHTML要素を取得・操作する方法について解説します。