プログラミング学習 TypeScriptにおけるgetterとsetterとは？使う理由と実践例を解説
TypeScriptでクラスを書いていると、次のような構文を見かけます。get value() { return this._value;}set value(v: number) { this._value = v;}「関数みたいだけど、...
プログラミング学習 プログラミング学習 「!」と「?」は何を意味するのか？TypeScriptでよく見る記号の正体
TypeScriptのコードを読んでいると、突然こんな記号が出てきます。const btn = document.getElementById("add")!;user?.name「!って何？」「?は三項演算子じゃないの？」と混乱した人も多...
プログラミング学習 dataset・data-actionとは何か？data属性の正体を理解する
HTMLとJavaScriptを触っていると、次のような属性を見かけます。<button data-action="delete">削除</button>そしてJavaScript側では、element.dataset.actionという書...
プログラミング学習 indexOfは連想配列で使えない？理由と正しい対処法
JavaScriptやTypeScriptを学んでいると、配列の要素を探すときに「とりあえず indexOf を使えばいい」と考えがちです。しかし、実装を進めていると次のような疑問にぶつかります。オブジェクト（連想配列）に indexOf ...
プログラミング学習 trim()は文字検索で必須？一致しない原因と正しい使い方
「検索条件は合っているはずなのに、ヒットしない」「console.logで見ると同じ文字列に見えるのに、比較結果が false になる」JavaScriptやTypeScriptで文字検索を実装していると、このような経験をしたことがある人は...
プログラミング学習 クロージャとは何か？未経験者が混乱しやすい理由と理解のコツ
「クロージャは難しい」JavaScriptやTypeScriptを学んでいると、必ずと言っていいほど出てくる言葉です。関数の中で関数を定義する変数を保持し続けるスコープがどうこう説明を読んでも、正直ピンと来ない人は多いはずです。私自身、これ...
プログラミング学習 なぜReactはUIとロジックを分けて考えるのか？初心者が腑に落ちた理由
「ReactではUIとロジックを分けて考えましょう」学習を始めると、ほぼ確実に言われるこの言葉。しかし、JavaScriptでDOM操作を学んできた人ほど、「結局どこで何を書けばいいのか分からない」「JSだけで書いていた頃と何が違うのか理解...
プログラミング学習 TypeScriptのイベントデリゲーション完全入門｜DOM再描画で壊れない書き方
「ボタンを動的に追加したら、クリックイベントが効かなくなった」「配列を更新して再レンダリングしたら、イベントが消えた」TypeScriptやJavaScriptでDOM操作を学び始めると、誰もが一度はぶつかる壁です。私自身、これまで肉体労働...
プログラミング学習 JavaScriptで保守しやすいコードを書く分解設計の基本
JavaScriptでアプリを作り始めると、最初は「動けばOK」でコードを書いてしまいがちです。ボタンのクリック処理、配列の操作、DOMの更新をすべて1つの関数にまとめて書いていませんか。私自身も、ToDoリストを作り始めた頃は、クリックイ...
プログラミング学習 async/awaitが3分でわかる！Promiseとの違いと実践例
「Promiseはなんとなく理解できたけど、async/awaitになると急にわからなくなる」「awaitを付ける場所を間違えてエラーが出た」そんな悩みを抱えていませんか。私自身、TypeScriptでAPI通信や非同期処理を学び始めたとき...