結局コードはどこに書いたらいい？？自分のパソコンに簡単追加解説講座！！

2026年9月2日 21:10

☆はじめに

プログラミング専用のソフトがなくても、Windowsに標準で入っている「メモ帳」やMacの「テキストエディット」にHTMLコードを貼り付けて保存するだけで、自作のWebアプリをブラウザ上で起動させることができます。特別な環境構築やインストール作業は一切不要です。

これまでの記事で紹介したアプリたちのようなHTML、CSS、JavaScriptで書かれたプログラムは、この方法ですぐに手元で動かすことができます。今回は、プログラミング未経験の方でも絶対に失敗しない「メモ帳アプリ起動法」をステップ・バイ・ステップで解説します。

1. 動かしたいコードをコピーする

まずは、動かしたいプログラムのコード（文字の羅列）をすべてコピーします。今回は練習用として、以下の短いサンプルコードをコピーしてみてください。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>はじめてのアプリ</title>
  <style>
    body { background-color: #E0F7FA; text-align: center; padding-top: 50px; font-family: sans-serif; }
    button { font-size: 2rem; padding: 20px; background: #FF4757; color: white; border: none; border-radius: 10px; cursor: pointer; }
  </style>
</head>
<body>
  <h1>アプリ起動成功！</h1>
  <button onclick="alert('こんにちは！')">ここを押してね</button>
</body>
</html>

2. パソコン標準のテキストエディタに貼り付ける

※OSによって使う標準アプリが異なります。

Windowsの場合： スタートメニューから「メモ帳 (Notepad)」を開き、先ほどコピーしたコードをそのまま貼り付けます。
Macの場合： 「テキストエディット」を開き、コードを貼り付けます。※Macの重要ポイント： 画面上部のメニューバーから「フォーマット」＞「標準テキストにする」を必ず選択してください（これを行わないと、プログラムとして認識されない文字装飾データが含まれてしまいます）。

3. 拡張子を「.html」にして保存する

ここが最大のポイントです。通常、メモ帳で保存すると「.txt」というただの文字データになりますが、これをWebアプリとして認識させるために拡張子を変更します。

メニューの「ファイル」から「名前を付けて保存」を選びます。
ファイル名を app.html や index.html のように、最後を必ず .html（半角英数）にします。（すべての名前を必ず半角英数字に！！）
Windowsの重要ポイント： 保存画面の下部にある「文字コード」を「UTF-8」に変更してから保存してください（ここがShift-JISなどのままだと、日本語が文字化けしてしまいます）。
デスクトップなど、分かりやすい場所に保存します。

4. ダブルクリックしてブラウザで開く

デスクトップに保存されたファイルを見ると、普段使っているGoogle ChromeやEdge、Safariのアイコンに変わっているはずです。

そのアイコンをダブルクリックしてください。ブラウザが立ち上がり、先ほどメモ帳に貼り付けたコードが立派なWebアプリとして画面いっぱいに表示されます。ボタンを押して「こんにちは！」というポップアップが出れば大成功です。前回の『究極ポップコーン・ファクトリー＆おみせやさん』の長いコードも、全く同じ手順で自分だけのアプリとして起動します。

現在担任している3年生の教室でも、私はこの手法を多用しています。GIGAスクール構想で導入された学校の端末は、セキュリティ上勝手にソフトをインストールできない制限がかかっていることがほとんどです。しかし、この「HTMLファイルとして保存してブラウザで開く」という手法なら、一切の制限に引っかかることなく、オフラインの環境でもサクサクと自作教材を動かすことができます。

自分の手元で動くことが確認できたら、次のステップとしてKoyebやGitHub Pagesのような無料のホスティングサービスを使ってインターネット上に公開（デプロイ）すれば、URL一つでいつでもどこでも、iPadやスマホからでも子どもたちがアクセスできるようになります。まずは手元のメモ帳から、アプリ開発の第一歩を踏み出してみてください。

完成するとこのように表示されます。