見出し画像
Photo by noouchi

HTMLとJavaScriptだけで「メモアプリ」を作る！！

マック屋

こんにちは！個人開発家のマックです！


今日は「HTMLとJavaScriptだけでメモアプリ」を作ったのでご紹介します！

できるだけわかりやすいように、プログラムにコメントも書いてありますので、ぜひ最後まで見て下さい！


プログラムの動き方を一つひとつ確認していけば、初心者さんでも理解できると難易度だと思います。


「HTMLはわかってきたけど、JavaScriptがとっつきにくい」という初心者さんは、ぜひご覧ください。


まずは作ったアプリです↓


「新規メモボタン」を押すと、入力画面が現れて、ユーザーが入力した文字を画面に表示できるアプリです。


JavaScriptでメモアプリとは

通常、Webブラウザに文字を表示するためには、HTMLタグでマークアップをする必要があります。

例えば、リスト形式で文字を表示するには、<li>タグで文字を囲みます。


一方、JavaScriptを使うと、新しくタグを作ってそれをHTMLに追加することができます。

すでに作っておいたHTMLの後ろに「新しく<p>タグを作って文字を表示する」というような事ができるのです。


また「イベントが発生した時に、プログラムを実行する」というような設定をしておくこともできます。


イベントとは、「画面をクリックした時」とか「読み込みが完了した時」のようなことです。


イベントについての詳細はこちらの記事をどうぞ。


このように、JavaScriptの機能を使うことで「メモアプリ」を作ることができるわけです。



メモアプリのプログラム紹介

今回は作ったメモアプリのプログラムを紹介します。


このアプリは、大きくわけて、2つのプログラムから成り立ちます。

  1. 文字を表示するためのプログラム

  2. 「新規メモボタン」がクリックされた時に、1のプログラムが動くように設定しておくプログラム


プログラムを作る時は、やりたい処理を分けて考えると作りやすくなります。


プログラムを別々に説明していきます！


文字を表示するためのプログラム

文字を表示する手順を考えると以下のようになります。

  1. ユーザーが入力した文字を保存しておく。

  2. 文字を表示するためにHTMLの要素を作る。（今回は<li>タグ）

  3. 保存しておいた文字を表示する。（どこに表示するか指定する）


サンプルコードはこんな感じです。

// 入力ウィンドウを表示して、入力された値を変数memoに保存しておく。
var memo = prompt("入力してください");

// 文字を表示するための要素を作成する。
var newElement = document.createElement("li");

// 作成した要素に、memoの値を入れる。
newElement.textContent = memo;

// 表示したい場所（要素）を取得する。
var memo_list = document.getElementById("memo_list");

// 作った要素を表示する場所を指定する。
memo_list.appendChild(newElement);



次に、ボタンがクリックされたら上のプログラムが実行されるように、関数としてまとめておきます。


関数の作り方は、プログラムを function(){} で囲み、名前をつけておきます。（今回はmemo）にしました。

function memo() {
    // 入力ウィンドウを表示して、入力された値をmemoに保存しておく。
    var memo = prompt("入力してください");

    // 文字を表示するための要素を作成する。
    var newElement = document.createElement("li");

    // 作成した要素の文字列に、保存しておいたmemoの値を入れる。
    newElement.textContent = memo;

    // 表示したい場所（要素）を取得する。
    var memo_list = document.getElementById("memo_list");

    // 作った要素を表示する場所を指定する。
    memo_list.appendChild(newElement);
}



「新規メモボタン」が押された時に、文字表示のプログラムが動くように設定する

「新規メモボタン」がクリックされた時に、先ほど作った関数が実行されるように設定していきます。

// ボタンが押された時に、関数memoが実行されるように設定する

var btn = document.querySelector("button");
btn.addEventListener("click", memo);


まず、どのボタンがクリックされた時に動作させるのかを指定するために、HTML要素を取得します。

var btn = document.querySelector("button");

これで、buttonタグの要素が取得できます。


次に、「btnがクリックされた時にどうするか」を指定します。

btn.addEventListener("click", memo);

これで「btnがクリック（click）された時に、関数（memo）を実行する」というイベントを設定できます。


これで、メモアプリの完成です。


JavaScriptが使えるようになると、動的なアプリが作れるようになります。

「HTML、CSSだけでなく、もっと本格的なプログラミングをやりたい。」
「ゲームやWebツールを作りたい。」

という人は、ぜひJavaScriptを学んでみてください。


以下の記事で、JavaScript学習におすすめの本を紹介しています。ぜひご覧ください。


この記事が気に入ったらサポートをしてみませんか？