JavaScript
JavaScript | 「ソースマップ」付きで TypeScript や Babel コードをデバッグする方法
@lifehacker
JavaScript JavaScript | 「Number() / parseInt() / parseFloat() / +」の変換結果をリアルタイムで比較できる学習用ミニアプリ
See the Pen Numerical Conversion Animation Comparison by MONO365 -Color your days- (@monoqlo365) on CodePen. 仕組みの説明入力欄に文...
JavaScript JavaScript | 「charAt・slice・substring・codePointAt」の動きを可視化するアニメ付き学習ツール
では次は、「charAt・slice・substring・codePointAt」の動きを可視化するアニメ付き学習ツールを作りましょう。CodePenなどブラウザ上でそのまま動く形式にします（HTML + CSS + JavaScript）...
JavaScript JavaScript | charAt() の動きを視覚的に理解するアニメーション
では、「charAt() の動きを視覚的に理解するアニメーション付き説明」を作りましょう。CodePen などでそのまま実行できる形（HTML + CSS + JS）で、インデックスがスライドして、選ばれた文字がハイライトされるアニメーショ...
Java Java | 論理演算子を使った「採点付きミニ演習プログラム」
では、Java の論理演算子を使った「採点付きミニ演習プログラム」を作りましょう。このプログラムは、ユーザーが入力した点数をもとに「合格／不合格」や「特待生」などを判定します。論理演算子 &&, ||, ! を全部使って練習できる内容になっ...
Java Java | インクリメント／デクリメント理解度チェックテスト
Java理解度チェックテスト（インクリメント／デクリメント）ではこの「インクリメント／デクリメント理解度チェックテスト」を、Java コンソールアプリ形式でつくりましょう。初心者でもそのまま コピペして動かせる完全版コード ＋ 丁寧な説明付...
Java Java | Java の型推論 var を使った実践例
ここでは、Java の型推論 var を使った実践例 5つを、初心者にも分かりやすく・実用的にまとめます。各サンプルはすぐ動かせるコード付きです。（Java 10以降対応）① ループ（for文）での varループ変数の型が明らかなときは、v...
Java Java | インクリメント/デクリメントを使わずに済ませる、よりモダンで安全な書き方
インクリメントを使わないモダンな書き方では「インクリメント/デクリメントを使わずに済ませる、よりモダンで安全な書き方」を紹介します。1. 拡張 for文（foreach）配列やリストを順番に処理するなら、インデックス管理すら不要。List<...
Java Java | レビューで「褒められる」インクリメントの使い方
レビューで褒められるインクリメントの使い方では「レビューで“褒められる”インクリメント/デクリメントの使い方（良い例集）」をまとめます。1. for文の基本形for (int i = 0; i < list.size(); i++) { S...
Java Java | 実際の現場でレビューで指摘されやすい「インクリメントのアンチパターン集」
インクリメント/デクリメントのアンチパターン集では「実務でレビューでよく指摘されるインクリメント/デクリメントのアンチパターン集」をまとめます。1. 条件式に直接書くwhile (i++ < arr.length) { System.out...
Java Java | インクリメント/デクリメントを安全に使うためのリファクタリング例（悪いコード → 良いコード）
インクリメント/デクリメントのリファクタリング例では「悪いコード → 良いコード」のリファクタリング例を紹介します。実務でありがちな“インクリメント/デクリメントの危険な使い方”を、安全で読みやすい形に直していきましょう。例1: 複雑な式に...
Java Java | 実務でよくあるインクリメント関連のバグパターン
実務でよくあるインクリメント関連のバグパターンでは「実務でありがちなインクリメント忘れや境界条件ミス」の典型例を整理してみましょう。1. インクリメント忘れによる無限ループint i = 0;while (i < 5) { System.o...
Java Java | 実務でよく使うインクリメントの具体的なパターン集
実務でよく使うインクリメントのパターン集では「実務でよく使うインクリメントの具体的なパターン集」を整理してみましょう。1. for文のカウンタ最も典型的な使い方。配列やリストを順番に処理する。for (int i = 0; i < arr....
Java Java | 実務で安全にインクリメント/デクリメントを使うための最善の方法
インクリメント/デクリメントのベストプラクティス集実務で安全にインクリメント/デクリメントを使うためのベストプラクティス集を整理しました。1. ループのカウンタは i++ に統一for (int i = 0; i < n; i++) が最も...
Java Java | オーバーフローを実験するJavaプログラム
では「オーバーフローを実験するJavaプログラム」を、初心者でも理解しやすいように作ってみましょう。（「オーバーフロー」とは、変数に入る最大の値を超えてしまったときに、値が反対側に回り込んでしまう現象です）まず知っておこう：オーバーフローと...
Java Java | 「オートボクシングでのパフォーマンス」や「キャッシュ範囲の仕組み（-128〜127）」をコードで実験
では ①キャッシュの仕組みの確認（-128〜127） と ②オートボクシングのパフォーマンス比較（プリミティブ vs ラッパー） を実験するための Java の実行可能なコード を用意します。手元のJVMでコンパイルして実行すれば、結果を観...
Java Java | 複数の入力をまとめて List に格納するサンプル
ここでは 複数の入力をまとめて List<Integer> に格納するサンプル を紹介します。「Scannerで文字列として入力 → 数値に変換 → Listに追加」という流れです。サンプルコード：複数の整数を入力してリストに格納impor...
Java Java | 実際の入力処理（Scannerで文字列を読み込んで数値に変換する例
実際に ユーザー入力（文字列）を Scanner で受け取り → 数値に変換 → オブジェクトとして扱う 流れをまとめます。入力処理の基本（Scannerを使う）例1: 整数入力 → int と Integerimport java.uti...
Java Java | 「NaN」「Infinity」など特殊値
Javaの特殊値とは？Javaでは、浮動小数点型（floatやdouble）に以下の特殊値が存在します：特殊値説明生成例Double.POSITIVE_INFINITY正の無限大1.0 / 0.0Double.NEGATIVE_INFINI...
Java Java | 全ラッパークラス（Integer, Double, Boolean, etc.）ごとの変換例まとめ表
Javaの 全ラッパークラス（基本型と対応するクラス）について、「文字列 ⇄ 数値 ⇄ オブジェクト」変換の代表例 を一覧表にまとめました。ラッパークラス変換パターン一覧基本型ラッパークラス文字列 → 基本型文字列 → オブジェクト基本型 ...
Java Java | 文字列 ⇄ 数値 ⇄ ラッパークラスのオブジェクト
Javaの 「文字列 ⇄ 数値 ⇄ ラッパークラスのオブジェクト」 の変換パターンを、初心者でも見やすいように表にまとめました。変換パターン一覧表変換方向サンプルコード説明文字列 → 数値（基本型）int n = Integer.parse...
Java Java | 小数の丸め誤差
では、Javaの 小数の丸め誤差（浮動小数点誤差） を、初心者でも理解できるように 簡単なコードと図イメージ で説明します。背景：丸め誤差とは？Javaの float / double は 二進数で小数を表現しています。そのため、10進数の...
Java Java | 桁区切りの正しい書き方と数値の意味を同時に学習できるツール
このツールを使えば、初心者でも 桁区切りの正しい書き方と数値の意味を同時に学習できます。import java.util.Scanner;public class UnderscoreLearningTool { public static...
VBA Excel VBA | フィールド定義表から自動でチェックを組み立てる仕組み（メタデータ駆動）
毎回コードに「必須」「数値」「日付」などのチェックを書き込むのは大変です。そこで 「フィールド定義表」＝各列のルールを表にまとめておき、マクロはその定義を読み取って自動的にチェックを実行する 仕組みを作ると、柔軟でメンテしやすくなります。フ...
JavaScript decimal.js を使った「誤差ゼロ金額電卓」
機能概要単価・数量・税率を入力「計算する」ボタンで合計金額を表示decimal.js を使うため誤差ゼロ（0.1 + 0.2 問題なし）ダークモード切り替えボタン付きスマホ対応レスポンシブデザイン See the Pen Zero-Erro...
JavaScript JavaScript |自分でクラスを書いて、プロトタイプチェーンを視覚的に見られる実験ツール
以下は HTML + JavaScript で動く、初心者向けの「クラス構造可視化アプリ」です。ブラウザに貼り付けて動かすだけで、class の仕組みと prototype チェーンがリアルタイムで見られます。 See the Pen Vi...
JavaScript JavaScript | 「オブジェクトの構造」と「thisの動き」
図解つきで「オブジェクトの構造」と「thisの動き」をわかりやすく説明します。テキストアート＋アニメーションイメージ風で解説します。JavaScript オブジェクトの構造1. オブジェクトの中身のイメージオブジェクトは「名前つきの箱の集ま...
JavaScript JavaScript | 実践：クラス継承 vs プロトタイプ継承の内部比較
ここでは、「クラス継承（class 構文）」と「プロトタイプ継承（prototype 直接操作）」の内部の違いを、初心者向けに「動作の中身」が見えるようにステップで比較していきます。まずは全体イメージ比較項目クラス継承（class）プロトタ...
JavaScript JavaScript | プロトタイプ継承」アニメーション
JavaScript の「プロトタイプ継承」は、初心者が「？」となりやすいけど、実際に“矢印でつながる”動きを見ると一気に理解できる部分なんです。プロトタイプ継承とは？🧠 一言で言うと…「オブジェクトが、親（＝プロトタイプ）のプロパティやメ...
JavaScript JavaScript | 「thisの仕組み」をアニメーション付きで図解
「thisの仕組み」は JavaScript 初心者が最初につまずく代表ポイント です。ここでは、🧭 直感的なアニメーション（矢印と動き）＋図解🧩 実際にブラウザで動くデモコード（HTML + JS）の両方で説明します。thisとは何か？t...
JavaScript JavaScript | プロトタイプと継承の「中の仕組み」や「落とし穴」
ここまで理解しているなら、プロトタイプと継承の「中の仕組み」や「落とし穴」を丁寧に掘り下げていける段階。初心者でも「仕組みを感覚でつかめる」ように、図解イメージ＋コード実験付きで説明していく。ステップ1：プロトタイプチェーンの「中身」を見て...