う、うわああああああああああああああああああああぶりりりりいりりりりりり。
終わった。もうおしまいだ。問題の原因がわからず途方にくれるこの感覚。不味すぎる。
# メモアプリを開発中だよ
とりあえず簡単なメモアプリを作っていたわけですよ。
途中までは良かった。とりあえずこいつを見ておくれ。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin="anonymous"
/>
<style>
html,
body {
height: 100%;
}
@font-face {
font-family: "dot";
src: url("DotGothic16-Regular.ttf") format("truetype");
}
body {
font-size: 24px;
font-family: "dot", sans-serif;
}
</style>
<title>１からメモ帳作成</title>
</head>
<body>
<div class="container-fluid h-100">
<div class="row h-100">
<div class="col-2 d-flex flex-column border">
<h1>ファイル</h1>
<div class="align-items-start">
<button type="button" class="btn btn-primary" id="add-file">
追加
</button>
<button type="button" class="btn btn-secondary">削除</button>
</div>
<div class="list-group" id="file-list"></div>
</div>
<div class="col-10 border">
<h1>テキスト</h1>
</div>
</div>
</div>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin="anonymous"
></script>
<script defer src="main.js"></script>
</body>
</html>
document.addEventListener("DOMContentLoaded", () => {
const files = JSON.parse(localStorage.getItem("files")) || [];
const fileList = document.getElementById("file-list");
//ファイルの表示
if (files.length > 0) {
//ファイルデータの入れ物を生成し挿入
files.forEach((file) => {
//Bootstrapを用いてボタン型のリストを生成する。
const button = document.createElement("button");
button.className = "list-group-item list-group-item-action";
button.type = "button";
//ファイル名を挿入、表示させる。
button.textContent = file.name;
fileList.appendChild(button);
});
} else {
const h2 = document.createElement("h2");
h2.textContent = "ファイルは無いぜ💩";
h2.style.fontSize = "16px";
fileList.appendChild(h2);
}
// ファイルの追加ボタンが押下されたとき、入力フォームが表示され必要に応じて適切な値を受け取る必要がある。
const addFileButton = document.getElementById("add-file");
addFileButton.addEventListener("click", () => {
console.log("ボタン押下");
//とりあえず入力フォームを作成しよう
const form = document.createElement("form");
const input = document.createElement("input");
const submit = document.createElement("button");
input.type = "text";
input.placeholder = "ファイル名を入力";
submit.type = "submit";
submit.textContent = "追加";
form.appendChild(input);
form.appendChild(submit);
const container = document.querySelector(".container-fluid");
container.appendChild(form);
// document.body.appendChild(form);
});
});
Google fontsさんからドット調のフォントを拝借したおかげで好みの雰囲気になりました。
フォントって偉大だなぁ。一気にサイト全体がゲームの世界になった感じある！
今までやったことのないことを試し、思ってた以上の収穫がありはしゃいでいた次の瞬間、事件は起こった。
# 入力フォームが表示されない！
ボタンが機能していないわけではないんですよ。AI君に尋ねたりGoogle先生を頼ったりしたものの結果は変わらず。
レイアウトが被ってるとかそんなんなのかなぁと思いつつも臭いので蓋をすることにします。
「おいおいこんな些細な問題にいちいち蓋をしていたらエンジニア業なんてやっていけないぜ」
わかります。僕もそう思うんです。
しかし...焦ってしまうんだ！
このコードを書いていた際も内心では「バニラのJavascriptで書くの面倒だな...まあ知っておくに越したことないけど以前軽く齧ったReact君ならもっと美しく簡潔に記述できるんだろうなぁ。経過を端折れるんだろうなぁ」
なんて思いながら書いていたわけですよ。
エンジニアとして道具や用役を組み立てる役割を志すものとして「どこで何がどのように作用し、機能が動作しているか」を把握することは大事です。
が...いいじゃないですか後回しにしたって...いやいつかは理解しておかねばならぬため向き合う必要があるわけですが...
今回このメモアプリをフロントのみで組み立てている理由は2つ。
「頭の中にあるイメージをどれだけ簡素でも良いので実際に組み立て、自信をつけたかった」
「データの流れを雰囲気だけでも感じてみたかった」
これです。
「引き金を引いた際、想定通りに処理が実行され画面が想定通りに推移されること」
これを実現できないのは大問題です。
が、それでもやる気の鎮火の方が問題だ！もういいよ！あんたなんか知らない！
入力フォームなんて常時表示にしてやる！今回得たいのは「データの流れを自分で組み立てて眺めるだけ」なんだ！
てなわけで更にハードルを下げてチビチビ開発に勤しみたいと思います。
では。