プログラミング

スポンサーリンク
JavaScript

JavaScript | 非同期(fetch / async)でのエラーの落とし穴(良い書き方・悪い書き方)を具体コード比較で示す

ここでは、「非同期処理(fetch / async)」でよくあるエラーの落とし穴を、「悪い書き方 → なぜダメか → 良い書き方」に整理して解説します。初心者がつまずきやすいポイントを中心に、実際のコ...
JavaScript

JavaScript | 例外とエラーハンドリング

主な内容の要点JavaScriptではエラー(例外)がいくつかの種類に分かれていて、try...catchを使うと発生した例外をキャッチして処理できます。さらに、例外の種類ごとに処理を分けることができ...
JavaScript

JavaScript | 例外処理(try…catch) の練習問題セット(初心者向け)

目的try…catch の基本、例外の伝搬(同期)、非同期コールバックでの落とし穴、Promise / async–await での例外処理を確実に理解すること。各問題は「問題 → 予想 → 実行例(...
JavaScript

JavaScript | 非同期エラーの「良い書き方・悪い書き方」を比較するサンプル

ここでは、「非同期処理での例外(エラー)をどう扱うか」について、初心者がよくやってしまう「悪い書き方」と、実務的に安全な「良い書き方」を、コメント付きで比較解説します。テーマ:setTimeout な...
JavaScript

JavaScript | try…catch…finally 文による例外処理

主な内容の要点JavaScriptのtry...catch...finallyは、エラーが起きてもプログラムを安全に続けるための仕組みです。特にfinallyは「必ず最後に実行される処理」を書けるのが...
JavaScript

JavaScript | 非同期処理をブレークポイントで止める

初心者が 「非同期処理をブレークポイントで止める」 のは少し難しく感じますが、実はブラウザの開発ツール(DevTools)を使えば fetch や setTimeout の中の処理も止めて中身を確認 ...
JavaScript

JavaScript | 「例外+非同期」のデバッグ実践(Promise の中のエラー追跡)

ここからは、「例外 × 非同期処理(Promise・async/await)」で発生するエラーをデバッグする方法を、初心者向けにやさしく、具体例つきで解説します。(ブラウザ開発ツールを使った実践手順つ...
JavaScript

JavaScript | 非同期エラーの落とし穴(Promise を返さない async と catch の罠)

JavaScript の「非同期エラー」まわりは、初心者が一番つまずくところの1つです。ここでは、Promise・async/await・try/catch の関係と、「Promise を返さない a...
JavaScript

JavaScript | 例外のデバッグ方法

「例外(エラー)をデバッグする力」は、プログラミング初級から中級に進む大きなステップです。ここでは、「stack(スタックトレース)」の見方と活用方法を、初心者でもわかるようにかみ砕いて解説します。1...
JavaScript

JavaScript | 例外処理(try…catch文)

主な内容の要点JavaScriptでエラーが起きるとプログラムが途中で止まってしまいます。これを防ぐために try...catch文 を使うと、エラーをキャッチして安全に処理を続けられます。ポイント解...
JavaScript

JavaScript | デフォルト引数

JavaScriptのデフォルト引数「引数を渡し忘れても、賢く初期値が入る仕組み」がデフォルト引数です。関数のパラメータに「= 値」を書いておくと、その引数が未指定または undefined のときに...
JavaScript

JavaScript | 可変長引数(rest パラメータ)

プログラミングを始めたばかりだと「…(ドット3つ)」が何をしているのか戸惑いますよね。rest パラメータは「引数の数が決まっていなくても関数で受け取れる」便利な仕組みです。例を交えながら、直感的に理...
JavaScript

JavaScript | コールバック関数 と 高階関数

主な内容の要点JavaScriptでは「関数」を変数に入れたり、関数に渡したり、関数から返したりできます。こうした仕組みを使うと「コールバック関数」や「高階関数」が扱えるようになり、非同期処理やイベン...
JavaScript

JavaScript | 「メモ化」を使って再帰関数を高速化する方法

ここでは、「メモ化(memoization)」を使って再帰関数を高速化する方法を、ステップ実行(呼び出しの流れを1つずつ追う)つきでわかりやすく解説します。そもそも「メモ化」とは?メモ化(memoiz...
JavaScript

JavaScript | 「再帰関数」でツリー探索(Tree Traversal)

では今回は、再帰の「本領発揮」分野である ツリー探索(Tree Traversal) を、プログラミング初心者でも「実感して理解できる」ように、段階的にやさしく解説します。1. まず「ツリー構造」って...
JavaScript

JavaScript | 再帰関数

主な内容の要点再帰関数とは「関数の中で自分自身を呼び出す関数」のことです。無限ループにならないように「終了条件」を必ず書くのが大事です。代表的な使い方は「階乗の計算」など、同じ処理を繰り返しながら少し...
JavaScript

JavaScript | 関数関連の便利な仕組み・プロパティ

関数まわりの「ちょっと特殊な性質」を整理しておくと、JavaScript の理解がグッと深まります。初心者向けに、代表的なものをわかりやすくまとめますね。関数関連の便利な仕組み・プロパティ1. arg...
JavaScript

JavaScript | 関数で受け取る引数の数を取得する

主な内容の要点JavaScript の関数には .length プロパティがあり、「その関数が定義時に受け取る引数の数」を調べることができます。ただし、実際に呼び出したときに渡された引数の数ではない点...
JavaScript

JavaScript | 関数(関数定義)を 文字列として取得する方法

主な内容の要点JavaScript では、関数に対して .toString() を使うと、その関数の「中身(定義内容)」を文字列として取り出すことができます。つまり、関数がどんなコードで書かれているか...
JavaScript

JavaScript | arguments を Array に変換して …rest と同じように扱う方法

ここでは「arguments を Array に変換して、...rest と同じように扱う方法」を初心者向けに、図+実験つきでわかりやすく解説します。なぜ変換が必要なの?arguments は「配列の...
JavaScript

JavaScript | arguments の内部挙動

arguments の「内部でどう動いているか」は、見た目より少し複雑で、実装や ECMAScript(仕様)のルールに依存します。ここでは 初心者〜中級者が知っておくと役立つレベル に噛み砕いて、実...
JavaScript

JavaScript | arguments と strict mode の関係

arguments オブジェクトは 「通常モード」と「strict mode(厳格モード)」 で挙動が変わります。これは初心者がつまずきやすいポイントなので、やさしく整理して説明します。まず前提:st...
JavaScript

JavaScript | arguments オブジェクト と 可変長引数(rest パラメータ) を比較

では arguments オブジェクト と 可変長引数(rest パラメータ ...rest) を、初心者向けにわかりやすく比較してみましょう。基本的な違い項目arguments オブジェクト...r...
JavaScript

JavaScript | 関数で使う arguments オブジェクト の使い方

主な内容の要点JavaScript の arguments オブジェクトは、関数に渡された引数をまとめて扱える特別な仕組みです。引数の数が決まっていなくても、arguments を使えばすべての値を取...
JavaScript

JavaScript | クラスの継承・オーバーライド・super とアロー関数の関係

では、クラスの継承・オーバーライド・super とアロー関数の関係を具体例で詳しく解説します。ポイントは「プロトタイプメソッドとアロー関数ではオーバーライドの挙動が違う」ということです。1. 基本:プ...
JavaScript

JavaScript | クロージャ比較の図解

ここは Function コンストラクタで作った関数 と 通常の関数(関数リテラル/関数式) の「クロージャ(外側のローカル変数を覚えるかどうか)」を視覚的に比較する図解と説明ページです。目的なぜ n...
JavaScript

JavaScript | 初心者が JavaScript の関数を練習するなら?

初心者が JavaScript の関数を練習するなら、次の順番で学ぶのが一番わかりやすく、実践的です。ステップ1:関数宣言(function 宣言)function greet(name) { ret...
JavaScript

JavaScript | Function コンストラクタを使って関数を定義する

主な内容の要点JavaScript では function キーワード以外にも、Function コンストラクタを使って関数を作れる。ただし、実際の開発ではあまり使われない方法なので「こういう書き方も...
JavaScript

JavaScript | クラス継承でアロー関数を使うときの実務的な注意点

では、クラス継承でアロー関数を使うときの実務的な注意点を整理してみましょう。特に React のクラスコンポーネントや、イベント処理を含むクラス設計でよく出てくる落とし穴です。通常メソッド vs アロ...
JavaScript

JavaScript | クラスを継承して super 呼び出しの挙動を比較(アロー関数 vs 通常メソッド)

クラス継承における super 呼び出し は、アロー関数と通常メソッドで挙動が大きく変わります。基本ルール通常メソッドクラスのプロトタイプに登録される。super を使って親クラスのメソッドを呼び出せ...
JavaScript

JavaScript | クラス内でアロー関数とプロトタイプメソッドを大量に作った場合のメモリの違い

それでは クラス内でアロー関数(class-field)とプロトタイプメソッドを大量に作った場合のメモリの違い をわかりやすく見てみましょう。実際に JS でインスタンスを作って比較するイメージです。...
JavaScript

JavaScript | this の挙動を体系的に整理(グローバル・関数・メソッド・クラス・アロー関数)

それでは JavaScript における this の挙動を体系的に整理してみましょう。グローバル・関数・メソッド・クラス・アロー関数など、状況ごとにどう変わるかをマップのようにまとめます。1. グロ...
JavaScript

JavaScript | classの継承(extends)

では「classの継承(extends)」について見ていきましょう。これを理解すると、オブジェクト指向の「再利用」と「拡張」ができるようになります。継承とは?あるクラスをもとにして、新しいクラスを作る...
JavaScript

JavaScript | 関数リテラル(通常の function 式)とアロー関数の this の違い

JavaScriptにおける function式(関数リテラル) と アロー関数 の最大の違いのひとつが this の扱い です。初心者向けに整理してみますね。違いのまとめ種類this の決まり方特徴...
JavaScript

JavaScript | 「class構文」と「関数リテラル/アロー関数」の関係を整理

では「class構文」と「関数リテラル/アロー関数」の関係を整理してみましょう。ここを押さえると、オブジェクト指向の理解がぐっと深まります。class構文とは?JavaScriptでオブジェクトを作る...
JavaScript

JavaScript | 「アロー関数の使いどころと、あえて使わないほうがいい場面」を整理

では「アロー関数の使いどころ」と「あえて使わないほうがいい場面」を整理してみましょう。これを知っておくと、実際のコードで迷わなくなります。アロー関数を使うと便利な場面配列操作map, filter, ...
JavaScript

JavaScript | アロー関数の省略ルール

それでは「アロー関数の省略ルール」を整理してみましょう。これを覚えると、コードがさらにスッキリ書けるようになります。アロー関数の省略ルール1. 引数が1つのときはカッコを省略できる// 通常let s...
JavaScript

JavaScript | クラス内でアロー関数を使う理由

クラスの中でアロー関数を使う理由は、主に this の扱い にあります。初心者がよくつまずくポイントなので、例を交えて整理しますね。通常のメソッドとアロー関数の違い通常のメソッドclass Count...
JavaScript

JavaScript | アロー関数とbindの違い

アロー関数とbindの違いを初心者向けに解説JavaScriptで「thisが思った通りにならない!」というときによく出てくるのが アロー関数 と bind。どちらも「thisを固定する」ために使われ...
JavaScript

JavaScript | イベント処理での「普通の関数」と「アロー関数」の使い分け

イベント処理での「普通の関数」と「アロー関数」の使い分けイベント処理では「クリックされた要素をthisで参照したいのか」「外側のthisを保持したいのか」で、普通の関数とアロー関数を使い分けます。基本...
JavaScript

JavaScript | クラスのメソッドをアロー関数にするメリットとデメリット

クラスのメソッドをアロー関数にするメリットとデメリットクラスの中でメソッドを「通常の関数」として書くか「アロー関数」として書くかで、挙動や効率が変わります。初心者向けに整理してみましょう。メリット(ア...
JavaScript

JavaScript | クラスの中でアロー関数を使うとどうなるか

クラスの中でアロー関数を使うとどうなるかクラスの中でアロー関数を使うと、その関数のthisは「インスタンス」に固定されるという特徴が出てきます。これは普通のメソッド(通常の関数)との大きな違いです。基...
JavaScript

JavaScript | アロー関数のthis

アロー関数のthisを初心者向けにやさしく解説JavaScriptを学び始めると「thisってややこしい!」と感じる人が多いです。特にアロー関数は、普通の関数とthisの動きが違うので混乱しやすいポイ...
JavaScript

JavaScript | アロー関数 this のレキシカル束縛

アロー関数を理解するうえで最も重要なのが 「this のレキシカル束縛」(=定義された場所の this をそのまま使う)です。ここでは、1️⃣ 通常の関数との違い2️⃣ 図解での理解3️⃣ 実際のコー...
JavaScript

JavaScript | アロー関数

主な内容の要点JavaScriptの「アロー関数式」は、関数をよりシンプルに書ける新しい記法です。特に短い処理やコールバック関数を書くときに便利です。アロー関数の基本通常の関数式 let add = ...
JavaScript

JavaScript | 「関数リテラル(無名関数)」と「アロー関数」の比較

「関数リテラル(無名関数)」と「アロー関数」は見た目が似ていますが、いくつか大事な違いがあります。初心者向けに整理してみましょう。書き方の違い種類書き方例関数リテラル(無名関数)let f = fun...
JavaScript

JavaScript | 関数リテラル(無名関数)

主な内容の要点JavaScriptでは「関数リテラル」を使って、名前のない関数(無名関数)を変数に代入して利用できます。これにより、一度しか使わない処理や、関数を引数として渡す場面で便利です。ポイント...
JavaScript

JavaScript | 関数はオブジェクト

主な内容の要点JavaScriptでは「関数」も特別な存在ではなく、オブジェクトの一種として扱われます。そのため、関数は「変数に代入できる」「別の変数にコピーできる」「引数として渡せる」といった柔軟な...
JavaScript

JavaScript | 関数の定義と呼び出し位置

主な内容の要点JavaScriptの関数は「どこに書くか」「どの順番で呼び出すか」で動き方が変わります。基本は「関数を先に定義してから呼び出す」と覚えておくと安心です。ポイント整理関数定義と呼び出しの...
JavaScript

JavaScript | 配列→オブジェクトにリファクタリングする手順とAPI設計視点での戻り値設計のベストプラクティス

配列→オブジェクトにリファクタリングする手順例題:配列で返す統計関数function calcStats(values) { const sum = values.reduce((a, b) => a...
JavaScript

JavaScript | 「関数で複数の値を返す」というテクニックをAPI整形・フォーム検証など実務っぽい応用

ここからは、「関数で複数の値を返す」というテクニックを、実務で本当に使える APIデータ整形 や フォーム入力の検証 にどう活かすかを、初心者向けにわかりやすく紹介します。目的現実の開発では、関数は「...
JavaScript

JavaScript | 関数の戻り値をさらに別の関数に渡す

では「関数の戻り値をさらに別の関数に渡す」練習に進みましょう。これはプログラムを組み合わせて使うときにとても大事な考え方です。ステップアップ練習例題1:計算結果を別の関数に渡すまずはシンプルな例から。...
JavaScript

JavaScript | 関数から複数の値を返す方法

主な内容の要点JavaScriptで関数から複数の値を返す方法は「配列」と「分割代入」を使うことです。 初心者向けポイント関数の戻り値は1つだけJavaScriptの関数は return で返せる値は...
JavaScript

JavaScript | 関数から値を返す(return文)

主な内容の要点JavaScriptの関数で使うreturnは、関数の処理結果を呼び出し元に返すための仕組みです。値を返す場合もあれば、処理を途中で終了させるためだけに使うこともできます。1. retu...
JavaScript

JavaScript | 関数と参照渡しの注意点

主な内容の要点JavaScriptで関数に値を渡すとき、「数値や文字列」などの基本型はコピーが渡されるので元の変数は変わらない。一方で、「配列やオブジェクト」などの参照型は同じデータを共有するため、関...
JavaScript

JavaScript | 「引数」を使って関数にデータを渡す

主な内容の要点JavaScriptの関数に値を渡すときに使う「引数」について解説されています。引数は関数にデータを渡す仕組みで、数が合わなくてもエラーにならず、工夫次第で柔軟に使えます。1. 引数の基...
JavaScript

JavaScript | 関数の基本的な定義方法と使い方

主な内容の要点JavaScriptで関数を使うには、まず「定義」してから「呼び出す」必要があります。関数は「入力(引数)」を受け取り、「処理」を行い、「出力(戻り値)」を返す仕組みです。関数の基本定義...
JavaScript

JavaScript | reduce と map/filter を組み合わせた応用パターン

ここでは、reduce と map/filter を組み合わせた実践的な使い方+パフォーマンス面の注意を、初心者向けに かみ砕いて+コード例つき で解説します。目標単純な合計だけでなく、「条件でしぼる...
JavaScript

JavaScript | filter と reduce と組み合わせて集計処理を学ぶ

filter と reduce を組み合わせると、「条件で絞り込み → 集計」という流れをシンプルに書けます。実務でもよく使うパターンなので、例題を交えて説明します。基本の流れfilter: 配列から...
JavaScript

JavaScript | 配列のすべての要素を合計する方法(reduce メソッド)

主な内容の要点JavaScriptで配列の合計を出すときは、reduceメソッドを使うのが便利です。配列の要素を順番に処理して、最終的に1つの値(合計など)を返してくれます。reduceメソッドの基本...
スポンサーリンク