Dockerに引き続き、今回はJavaScriptの本当に使うシリーズになります。
以前の記事はこちら。
先日、JavaScript（フレームワークなし！）でサムネイル作成アプリ「グラデーションサムネメーカー」を開発しました。
業務でもJSを書くことはしばしばあるのですが、ほとんどが既存コードの修正、01で書くと言ってもAjax通信のほんの一部とか、ECサイトのちょっとした処理なんですよね…。
アプリケーションのほぼすべてをJavaScriptで作ったことはなかったんです。
そんな初学者丸出しの筆者が、今回のアプリ開発でやたら使った命令文をまとめてみます。
せめてここに載せたものはスラスラ使えるようになりたいよ～～～～～～！（大声）
JavaScript頻出メソッド10選
さっそく、登場頻度の高いものからピックアップしてみますね。
このプロジェクトで「実際にどんな風に使われていたか？」もあわせてご紹介します。
1. document.getElementById
HTML要素をIDで取得します。
今回のアプリに限らず、どんなシステムでも一番出てくるメソッドなんじゃなかろうか。
const canvas = document.getElementById('previewCanvas')
const slider = document.getElementById('marginSlider')「この要素をJSでどうにかしたい！」と思ったら、まずこれで取得するところから始まります。
なのでだいたい function ○○() {} って括りの最初のほうにいる。気がする。
2. addEventListener
ボタンのクリックやスライダーの操作など、ユーザーのアクション起因で発火する処理です。
ここでも getElementById は出てきますね。
// スライダーを動かすたびに再描画
document.getElementById('marginSlider').addEventListener('input', e => {
state.margin = parseInt(e.target.value)
redraw(state, canvas)
})第1引数にイベントの種類（'click'、'input'など）、第2引数に実行したい処理を書きます。
業務でよく使ってたのは keydown（キーの押下）、change（入力完了後に発火）でしたね。
Enterキー押したら検索、とか、カートの中身の数量変更とか。
3. classList.add / remove / toggle
要素に付いているCSSクラスを追加・削除・切り替えます。
今どのボタンを押下しているか、わかりやすく表現するにはもってこいです。
// 全ボタンのactiveを外して、押されたボタンだけactiveにする
grid.querySelectorAll('.dir-btn').forEach(b => b.classList.remove('active'))
btn.classList.add('active')CSS上で .active のレイアウトを定義しておくことで、.active クラスのつけ外しだけで見栄えを切り替えることができます。
また、（今回は使ってないけど）toggle は「付いていれば外す、なければ付ける」を1回でできちゃいます。
4. createElement / appendChild
その名の通り、JSファイルで書いた内容を、HTML要素として追加してくれます。
グラデーション・フォント選択のボタンを動的に生成するのに使いました。
アプリだと、こんな感じで選択した色や読み込むフォントにあわせてボタンの中身も変わるんです。
画像はグラデーションの編集部分。
const btn = document.createElement('button')
btn.className = 'font-btn'
btn.textContent = 'Noto Sans JP'
grid.appendChild(btn)ユーザーの指示したデータによって見栄えを変えつつ、まとめて生成したいときに便利です。
5. element.style.display
要素の表示・非表示をJSから直接切り替えます。
「グラデーションがリニアだったら、方向ボタンを使える」という仕様だったので、条件に応じて設定欄をアクティブにするために使いました。
見づらいけど、左はウェーブ、右はリニアを選んでます。
document.getElementById('angleSection').style.display = 'flex'classList.toggle と似てますが、こちらはCSSクラスを定義せずにその場で制御したい！ってときに向いてます。
6. element.textContent
HTML要素のテキストを書き換えることができるメソッドです。
フォントサイズや行間調整など、スライダーを動かしたときにリアルタイムで値が変化します。
document.getElementById('marginVal').textContent = state.margin + 'px'
document.getElementById('fontSizeVal').textContent = state.fontSize + 'px'innerHTML と違って、HTMLタグをまんま文字列として扱うので、指示したテキストが意図せずタグとして処理されてしまった！ということがないんです。
<h1>Hello</h1> と表示されるか、Hello と表示されるかの違い
テキストだけを変えたいなら textContent が安心ですね。
7. canvas.getContext('2d')
<canvas> 要素に描画するため、「こっからお絵描きモードになるよ！」と命令するメソッドです。
Canvasそのものには何かを描く機能はありません。
まさに、白紙のキャンバス。
ここでいう ctx を通じて、図形を描いたり、色を塗ったり、テキストを打ち込んだりができるわけです。
const ctx = canvas.getContext('2d')
ctx.fillStyle = gradient
ctx.fillRect(0, 0, width, height)（今回のアプリも例に漏れず）Canvasを使う処理は、必ずこの1行から始まります。
8. canvas.toDataURL
Canvasに描いた内容を、画像データ（Base64形式）として取り出します。<canvas> 要素が出てこない限り使えないメソッドなので、使用する頻度としては高くないかも。
今回のアプリ開発では、画像ダウンロードボタンの押下時に使いました。
const link = document.createElement('a')
link.download = `thumbnail-${state.imgW}x${state.imgH}.png`
link.href = off.toDataURL('image/png')
link.click()<a> 要素を動的に作って .click() を呼んでます。
ここでは、off が事前に定義されたCanvasですね。
ブラウザは
<a
href="data:image/png;base64,..."
download="thumbnail-1280x720.png"
>をクリックしたと解釈するので、画像のダウンロードを開始してくれるのです。
9. document.fonts.load
実は開発中にちょっと詰まった部分がありまして。
フォント切り替えボタンを押下しているのに、Canvas内に変更後のフォントが反映されないっていうバグなんですけれども。
原因は、フォントファイルの読み込みが終わる前に描画処理が走っていたことでした（たしかに、二回クリックすることで反映されてた）。
読み込み中のフォントは描画に使えないじゃないですか。当たり前に。
そのせいで1回目は変更前のフォントのまま描画され、2回目でようやく反映される、という挙動になってたみたいです。
フォントファイルの読み込み完了を待ってから処理を続行する、という命令に変えると解決できました。
btn.addEventListener('click', async () => {
state.selectedFont = f.id
await document.fonts.load(`400 32px '${f.id}'`, state.textContent)
redraw(state, canvas)
})await で読み込みを待ってから redraw を呼んでます。
10. localStorage.getItem / setItem
サイト側にデータを保存し、また訪れたときにも設定が残るようにしてくれます。
私はダークモードの設定を保持するのに使いました。
これ、結構いろんなサイトで使われてるんじゃないかな？
// 保存
localStorage.setItem('theme', 'dark')
// ページ読み込み時に前回の設定を復元
const saved = localStorage.getItem('theme')今回のようなツール系アプリだと、DB無しで動いているもの多いと思うので特に活躍してくれそうです。
まとめ
紹介した10個のメソッドを分類分けしてみます。
クライアントサイド言語なだけあって、見た目に直結する命令が多いな～と感じました。
これからも（Claudeを頼りに）WEBアプリは開発していくつもりなので、本記事で学んだメソッドではもうコケないようにするぞ…！
ではまた次回！
