プログラミング基礎「プログラム実行環境の準備」

プログラミング基礎「プログラム実行環境の準備」

概要

学べること

• HTML + JavaScript の開発環境構築（ローカル環境）

• Cursorエディターの使い方

• ブラウザでの動作確認方法

• JavaScriptの基本的な記述とDOM操作

• サンプル電卓アプリの表示・動作確認

実務活用例

• Web制作の学習初期ステップ

• 自作ツール（電卓、ToDoリストなど）の開発

• ポートフォリオへの掲載用ミニアプリ作成

開発環境構築手順

1. Cursorエディターのインストール

• 公式サイト（https://cursor.sh/）にアクセスしてダウンロード

• インストーラーを起動し、画面に従ってセットアップ

• 起動してフォルダを開く準備をします

2. プロジェクトフォルダの準備

• デスクトップなどに任意の名前でフォルダを作成（例：js-html-project）

• Cursorを開いて「フォルダを開く」からそのプロジェクトフォルダを選択

3. HTML・JavaScriptファイルの作成

• index.htmlという名前でHTMLファイルを新規作成

• script.jsという名前でJavaScriptファイルを新規作成

ファイル内容の入力（AIで生成）

🔧 HTMLファイル（index.html）

🔧 JavaScriptファイル（script.js）

動作確認

1. index.html をダブルクリックまたはブラウザへドラッグ＆ドロップ

2. 表示されたページで「テスト実行」ボタンをクリック

3. 時刻とメッセージが表示されれば成功

4. F12キーで開発者ツールを開き、コンソールログの出力も確認してみましょう

電卓サンプルの実装

💡 電卓全体のHTMLファイル生成用プロンプト

チャレンジしてみよう

• 電卓の「%（パーセント）」や「負の数切替」ボタンを追加してみましょう

• 背景色やフォントサイズを自分好みにカスタマイズしてみましょう

• 入力履歴を記録して一覧表示する機能を追加してみましょう

この記事は以下のプロンプトでAI生成されています

次のステップ

• CSSファイルを分離してスタイルを管理する方法

• モジュール化されたJavaScript（ES Modules）の学習

• GitHub Pagesなどへの公開方法を学ぶ