JavaScript 【JavaScript】テンプレートリテラルで文字列を扱う
こんにちは、かつコーチです。前回はアロー関数についてわかりやすく解説しました。今回のテーマは「テンプレートリテラル」です。文字列と変数をくっつける処理は、どんなプログラムでも頻繁に出てきます。昔ながらの書き方だと地味に面倒なこの処理が、テン...
JavaScript
JavaScript JavaScript 【JavaScript】アロー関数をわかりやすく解説
こんにちは、かつコーチです。前回は関数の基本的な作り方と、引数・戻り値について解説しました。今回は、モダンなJavaScriptのコードで頻繁に登場する「アロー関数」を解説します。map や filter のコールバックとしてもすでに何度か...
JavaScript 【JavaScript】関数の作り方と引数・戻り値
こんにちは、かつコーチです。前回はオブジェクトの基本を解説しました。今回は、プログラミングの基礎の中でも特に重要な「関数」について解説します。関数を使いこなせるようになると、同じ処理を何度も書かずに済み、コード全体がぐっと整理されます。関数...
JavaScript 【JavaScript】オブジェクトの基本
こんにちは、かつコーチです。前回は map ・ filter ・ reduce を使った配列の加工方法を解説しました。その中でも何度か登場していた「オブジェクト」について、今回はあらためて基本からしっかり解説していきます。配列と並んで、Ja...
JavaScript 【JavaScript】配列メソッドmap・filter・reduceの使い方
こんにちは、かつコーチです。前回は配列の基本的な作成・追加・削除の方法を解説しました。今回は一歩進んで、配列を「加工する」ときによく使う map ・ filter ・ reduce の3つのメソッドを解説します。現場のコードでも頻出のメソッ...
JavaScript 【JavaScript】配列の基本：作成・追加・削除
こんにちは、かつコーチです。前回は for ・ while ・ forEach を使った繰り返し処理を解説しました。繰り返し処理とセットでよく登場するのが「配列」です。今回は、JavaScriptで複数のデータをまとめて扱うための「配列」に...
JavaScript 【JavaScript】for・while・forEachで繰り返し処理
こんにちは、かつコーチです。前回はif文・switch文による条件分岐を解説しました。今回は、プログラミングのもう一つの基本テクニックである「繰り返し処理」を扱います。「同じ処理を何度も書くのは面倒」という悩みを解決してくれるのがループ処理...
JavaScript 【JavaScript】if文・switch文で条件分岐
こんにちは、かつコーチです。前回は算術・比較・論理演算子について解説しました。今回は、その演算子を使って「条件によって処理を分ける」条件分岐を扱います。「もし〜だったら、こう処理する」という考え方は、どんなプログラムにも登場する基本のテクニ...
JavaScript 【JavaScript】演算子の基本（算術・比較・論理）
こんにちは、かつコーチです。前回はJavaScriptの主なデータ型について解説しました。今回は、その値を使って計算したり比較したりするための「演算子」を扱います。演算子は普段の生活で使う「＋」「－」のようなものから、プログラミング特有のも...
JavaScript 【JavaScript】JavaScriptの主なデータ型
こんにちは、かつコーチです。前回は let・const・var という変数宣言の違いについて解説しました。今回は、その変数の中に「どんな種類の値」を入れられるのか、データ型について整理していきます。データ型を理解しておくと、後々つまずきやす...
JavaScript 【JavaScript】変数の宣言：let・const・varの違い
こんにちは、かつコーチです。前回はエディタ設定の記事で、VSCodeを使った快適な開発環境の作り方を紹介しました。今回からは、いよいよJavaScriptの基本文法に入っていきます。最初のテーマは「変数の宣言」です。let・const・va...
JavaScript 【JavaScript】JavaScript開発に便利なエディタ設定（VSCode）
こんにちは、かつコーチです。前回はconsole.logを使ったデバッグの基本を解説しました。入門編の最後となる今回は、JavaScriptを書くうえで定番のエディタ「VSCode（Visual Studio Code）」の便利な設定を紹介...
JavaScript 【JavaScript】console.logでのデバッグ入門
こんにちは、かつコーチです。前回は<script>タグの書き方と、defer・asyncの違いを解説しました。今回は、JavaScriptを書くうえで一生付き合っていくことになる「デバッグ」について、console.logを使った基本のやり...
JavaScript 【JavaScript】scriptタグの書き方：headとbodyどちらに書く？defer/asyncの違い
こんにちは、かつコーチです。前回は、開発者ツールのコンソールを使ってJavaScriptを試す方法を紹介しました。今回は、実際のWebページにJavaScriptを読み込ませるための<script>タグについて解説します。「headに書くの...
JavaScript 【JavaScript】ブラウザの開発者ツールの使い方：コンソールを使ってみよう
こんにちは、かつコーチです。前回はJavaScriptがどんな言語なのか、全体像を解説しました。今回は、実際にJavaScriptを試しながら学ぶために欠かせない「開発者ツール」の使い方を紹介します。特別なソフトをインストールしなくても、ブ...
JavaScript 【JavaScript】JavaScriptとは？ブラウザで動くプログラミング言語を初心者向けに解説
こんにちは、かつコーチです。これまでJavaScriptについて100記事ほど書いて来ました。ここで一度立ち返って、もう一度JavaScriptの基礎からご紹介します。新しくアップデートされている内容もあるので、それも含めて随時解説します。...
JavaScript 【React】FormのTextareaをコンポーネント化する方法を解説
こんにちは、かつコーチです。Reactを扱っているとコンポーネントにすることがあると思います。今回はFormでよく扱われるTextareaについてコンポーネントにする方法を解説します。完成コード使い分けが必要かと思いますが、2種類作成しまし...
JavaScript 【React基礎学習2】ReactのComponentについて解説
こんにちは、かつコーチです。ReactはComponentベースで開発されています。Reactのコンポーネントは、UIを独立した再利用可能な部品（部品やパーツ）として構築する基本単位です。コンポーネントは、アプリケーションの特定の機能やUI...
JavaScript 【React基礎学習1】Reactとは？
こんにちは、かつコーチです。JavaScriptには多くのライブラリやフレームワークがあります。そんな中でも最も人気急上昇しているのがReact.jsです。React.js（単に React とも呼ばれます）は、Facebook（現在のMe...
JavaScript 【Laravel × Inertia.js】Inertia.jsを利用するときとは？
こんにちは、かつコーチです。前回はInertia.jsに基本について解説しましたが、実際にはどのようなときに使うのでしょうか？今回はInertia.jsを使うときについて解説します。Inertia.jsは、バックエンド（Laravelなど）...