generated at
abt 『HTML+CSS+JavaScriptでツールを作ってみよう』

短期間で色々突破してhotな状態なので「どこが痒いか」がある程度わかるかもしれない。(言語化されたら書く)

そもそもツールを作るとは何か、ということが最初は曖昧
一方「データ」なら誰でもわかる
私にとって「ツール」の入り口は「csvに書いたデータを元に、カード状のものを作る」
つまり「データを良い感じの見た目にできるよ」ということ
見た目を整えているだけでデータに手を加えてはいない
「ツール」と言ってしまうと(更にプログラミングの勉強の最初の方で計算を習うと)、「データ自体を加工するもの」という印象が(個人的には)ある
小さいツールを作るということ
乱数を使うとツール感が手っ取り早く得られる
おみくじを三通りの方法で作るとか(私がやった)
計算ドリルを作るとか(私がやった)
最初に作った「情報管理ツール」も乱数によるピックアップが核にあるものだった
乱数を使わないものというのは「こう変化させたい」という具体的な意識が必要な感じがする
「○○を△△してみよう」の類は、大切で必要なことなんだけど「○○を△△する」ということに別に興味がない場合その価値にピンとこない
乱数以外では抽出する系も楽しいかも
文字列を入力するとその文字列を含むデータだけピックアップするツール
あとは日付を使う系
特定の日の何日後が何日かがわかるツールとか
私が作ったのは年月日を入れるとその年の何日目の何曜日でその年は十二支と十干が何で閏年か否かオリンピックイヤーか否かがどうでというのをバーッと表示するツール

JavaScriptに慣れるならブックマークレットへの寄り道が楽しい
サイトから情報を取り出してScrapboxにページを作って書き込むブックマークレット
処理としては最終的に一つの文字列にすればいいだけなので考えるべきことがシンプルで簡単
DOMを理解するのに役立った
Web上で見えている文字列を取り出すとはどういうことか、ということ
「要素」は色々なものを含んでいるのであって、非プログラマーからすると要素の「本体」な感じのする「見えているテキスト」はinnerTextを使わないといけないよとか
取得したいものを取得できているかを確認するためにconsole.log()を使うんだぞとか

必要な具体的知識
DOM
既に存在している要素を取得する系
→ブックマークレットを作れるようになる
Document.querySelector()/Document.querySelectorAll()
Document.getElementById()
要素を作る系
→Webアプリっぽさがわかる
Document.createElement()
Node.appendChild()
条件分岐
if文
ループ
for(let i = 0; i < hoge.length; i++){}
オブジェクト
→最初は意味がよくわからないがcsvを使う時に理解できる
localStorage
→「情報管理ツール」が作れるようになる
「ビューワ」が「エディタ」にクラスチェンジする