このチュートリアルでは、Reactアプリケーションの構築にTypeScriptを使用する方法を、Create-React-App （CRA）を利用して簡単に始められる手順とともに解説します。 また、TypeScriptを使用した独自のReact関数コンポーネントでのPropsの定義方法も紹介します。 前提として、あなたがNode.jsを既にインストールしていることを仮定しています。 また、このチュートリアルはTypeScriptの基本的な知識があることも前提としています。 ReactとTypeScriptの組み合わせについて学ぶことで、より堅牢なアプリケーションを開発するためのツールとしての利用価値を高めることができます。 この記事を参考にして、ReactとTypeScriptの基本をマスターしましょう。 TypeScriptとReactの利点 CRAのインストール TypeScriptで

JavaScriptのthisキーワードやpromise/async/await、スコープ、巻き上げなどの概念を学び始めると、JavaScriptの中級者レベルに到達したと言えます。 ただし、この段階は概念を理解するための難易度であり、技術的な中級者になるための一歩となります。 この中でも、Promiseの概念の理解は、thisキーワードと同じぐらい難易度が高く、学習者によっては急に難しく感じるかもしれません。 thisとはなんですか？ グローバル実行環境 単独のグローバルスコープ 関数内部のthis コンストラクターでの呼び出し クラスでのthis オブジェクトメソッドでの呼び出し thisのカスタム値 アロー関数でのthis DOMイベントハンドラー thisの優先順位 最後に thisとはなんですか？ JavaScriptにおける最も難しい概念の1つが、この「this」キーワードです

このチュートリアルでは、JavaScriptでSwitch...case文を使用して、式を評価する際に一致する結果に基づいて、異なる値を取り扱う方法を学ぶことができます。 この記事を読むことで、条件分岐とSwitch文の理解が深まり、プログラミングスキルが向上することでしょう。 Switch…case文とは Switch文の実行フロー 複数の値を1つのcaseでまとめる方法 関数の戻り値とreturn文の重要性 論理演算子を使用する if...else文とSwitch...case文の基本的な違い 最後に Switch…case文とは Switch文は、多くのプログラミング言語でサポートされている基本的な制御構造の1つです。 Switch文は、if...else文と同様の機能を提供し、指定された式または変数を一連の値と比較し、一致する値に対応するブロックを実行します。 JavaScript

本日はJavaScriptでローカルストレージを使用する方法について学習します。 localStoragとは？ localStorageの使用方法 ローカルストレージを使用する LocalStorageへのオブジェクトの保存 最後に Web StorageまたはlocalStorageとはなんなのか、メリットやデメリットそして安全性などに関する詳しい事は下記で解説しております。 dev-k.hatenablog.com このチュートリアルの前提条件は、JavaScriptに関する基本的な考え方を持っていることです。 事前準備 ・JSのある程度の知識 ・Web Storageのメリット・デメリット・安全性等 ・テキストエディタ(VS Codeなど) ・ブラウザはChromeを使用します それでは少しlocalStoragのおさらいだけしましょう。 必要ない方はスキップして頂いて構いません。

初学者様向けのJavaScriptでWebストレージを使用する上でのセキュリティ(安全性)などの基本的な知識を解説致します。 プロジェクト構築の過程で、権限認証のトークン、ユーザー情報、埋め込みポイントの数、スキン情報、顧客が構成した言語タイプなどの情報をローカルに保存する必要がある状況に遭遇することがよくあります。 一時的に保存して、不要なリクエストやブラウザの冗長な操作を避け、お客様の利便性を高めます。 その際に、データベースの複雑さを増すことなく、HTMLで何かを成し遂げたい場合があります。 クライアントによってローカルにデータを保存する新しい方法を提供します。 それはWebストレージとなります またWebストレージは、LocalStorageとSessionStorageに分けられJavaScriptでアクセス可能です。 サーバーではなくブラウザにキーと値のペアで保存できます。 ※

この記事では、ES6のasync/await、およびPromises.all()を使用して非同期プログラミングを容易にする方法を学習します。 前回でのPromiseチュートリアルは以下で学ぶことができますので参照ください。 dev-k.hatenablog.com async/awaitとは asyncキーワード awaitキーワード Promise並列処理 async/awaitでのループ エラー処理 async/awaitでFetchを使用する方法 使用に関する注意点(ルール) 最後に async/awaitとは async/awaitは技術的に言えば、Promisesのシンタックスシュガー(Syntax sugar)となります。 シンタックスシュガーとは簡単に言ってしまえば、構文を省略しプログラムを書いていく事をシンタックスシュガーと言います。 ですが、これはプログラミング言語によっ

すでに、IE11のサポートが終了して年月が経過していると思いますが、筆記時点では、2022年6月18日でり、IE11のサポート終了してばかりの時期なのでご了承下さい。 ※ 現在の最新情報については、読者の方がご自身で判断してください。 IE 11のサポートが終了したことにより、Web開発者に多大な影響が出ています。 個人ユーザーから企業まで、すべての人々に影響があるでしょう。 IE11デスクトップアプリは、Microsoftによって廃止され、Webブラウザとしてもサポートが終了しました。 このため、ユーザーはIE 11の使用を中止し、Microsoft Edgeに移行する必要があります。 Windows 11のユーザーは既にMicrosoft Edgeがデフォルトのブラウザとなっているため、この変更に心配する必要はありません。 ただし、多くのレガシーアプリやウェブサイトは、まだIE11に依

本日はJavaScriptのPromiseの操作とその概念について初学者様に解説致します。 非同期関数 Promise Promiseの状態 Promiseの作成 Promiseをチェーンする方法 Promiseを返す promiseのthenとfinallyの違い より高度な複数のPromise処理 最後に 前提の知識とスキルとして、少なくともES6の関数・高階関数・コールバック関数およびJavaScriptオブジェクトに精通している必要があります。 上記を学び終えてない方は、以下で学習できますので参照ください。 dev-k.hatenablog.com dev-k.hatenablog.com dev-k.hatenablog.com 非同期関数 JavaScriptにおいて非同期処理を行う際には、従来はコールバック関数を利用していました。 しかし、JavaScriptにおいて関数が第

React Propsの使い方を初心者にわかりやすく解説します。 関数コンポーネントでは、Propsの取り扱いが非常に簡単です。 また、データの流れを理解するために、Reactコンポーネントのツリー構造を具体的な画像例とともに解説します。 この記事を読んで、Propsの基礎を完全にマスターしましょう。 ReactのProps(小道具)とは？ 関数コンポーネントでPropsを渡す方法 複数のProps オブジェクトをPropsとして渡す 関数をPropsとして渡す 子コンポーネントから親にデータを渡す プロップドリル(Prop Drilling) 最後に ReactのProps(小道具)とは？ コンポーネントを再利用すると、両方の時間で同じコンテンツが表示され続けます。 ですが、他のテキストや外部ソースからデータをフェッチしている間、事前に情報が分からない場合は非常に厄介です。 HTML要素

本日はReact 18で新たに導入された「useId」フックの使い方について、初心者の方に解説していきます。 「useId」は、React 18以降で利用できる組み込みのフックです。 React 18に関する新機能について、以下で詳しく説明しています。 dev-k.hatenablog.com useIdフックとは 抑えておくべきポイント 一意のID生成 最後に useIdフックとは useId()フックは、React18でクライアント側とサーバー側の両方で安定した一意のIDを生成する新しい方法のフックとなっています。 以前では、HTMLのIDを使用して2つのHTML要素を結合させます。 つまり、Reactコンポーネント内で一意のIDを必要とする場合、通常は手動でIDを生成する必要があります。 今までの例を簡単なフォームで見てみましょう。 const App = () => { const

本日はJavaScriptでDOMの要素にアクセスし、それらを操作していく方法を解説致します。 JavaScript オブジェクトメソッド IDによる要素へのアクセス クラス名の要素へアクセス タグ名の要素にアクセス クエリセレクタによる要素へのアクセス スタイルの変更 要素の追加と削除 初心者がメソッドを使用する際の注意点 JavaScript Documentオブジェクトは、ドキュメントのすべてのHTML要素へのアクセスを提供するオブジェクトとなります。 ドキュメントオブジェクトは、HTML、head、body、その他のHTMLタグなどのHTMLドキュメントの要素をオブジェクトとして格納します。 ドキュメントオブジェクトモデルまたはDOMが分からない方は下記で解説しております。 dev-k.hatenablog.com dev-k.hatenablog.com ドキュメントオブジェクト

本日は、JavaScriptのオブジェクトを使う方法について、初心者向けに基本的な操作を解説します。 この記事では、JavaScriptのオブジェクトについての基礎知識を身につけ、実際にコードを書いて操作する方法を学ぶことができます。 オブジェクトは、データをまとめて管理するための便利な手段であり、プログラムの構造をより明確にすることができます。 JavaScriptオブジェクトは、プログラマーが作成、追加、削除、アクセス、プロパティとメソッドを操作するための重要な概念です。 Array「配列」の基礎は以下で詳しく解説しておりますので参照ください。 dev-k.hatenablog.com JavaScript オブジェクト オブジェクト宣言 プロパティの属性 オブジェクトプロパティの操作 計算されたプロパティ名 プロパティの値を省略 プロパティ名の制限 定数宣言したオブジェクトのプロパテ

今回は、JavaScriptにおけるコールバック関数と高階関数について学習していきます。 コールバック関数は、JavaScriptで最も一般的に使用される関数型プログラミングの手法の一つです。 初心者の方でも、知らず知らずのうちに使用していることがあるかもしれません。 JavaScriptには、高階関数が組み込まれており、これらを使うことで、より柔軟で効率的なコーディングが可能となります。 例えば、map()、reduce()、filter()メソッドなどが挙げられますが、これらが高階関数であることに気付かずに使用している方もいるかもしれません。 もしかしたら、すでに高階関数を書いたり使ったりしている方もいるかもしれませんが、その重要性に気付いていないこともあるでしょう。 この記事では、JavaScriptのコールバック・高階関数の概念を理解し、それらを使いこなすための基礎知識を身につける

本日はJavaScriptの巻き上げについて学習します。 巻き上げとは？ 変数の可変巻き上げ 関数の巻き上げ 関数式(無名関数)の巻き上げ クラスでの巻き上げ まとめ JSのスコープについては下記入門で解説しております。 dev-k.hatenablog.com 巻き上げとは？ JavaScriptでの巻き上げ(hoisting)は、宣言の前に関数または変数を使用できる動作です。 JavaScriptコンパイラは、エラーが発生しないように、変数と関数のすべての宣言を一番上に移動します。 これは巻き上げと呼ばれます。 なぜこの巻き上げを１つの記事として取り上げるのか それは巻き上げは、多くの開発者にとってJavaScriptの未知のまたは見落とされた概念でもある為です。 中級者ですら巻き上げについてあまり理解されていない方が稀にいらっしゃいます。 しかし、開発者が巻き上げを理解していない場合

この記事では、初心者向けにJavaScriptの関数・関数式およびアロー関数の基礎構文について学習します。 JavaScriptで利用できる関数にはさまざまな種類があります。 全てをここで紹介は難しいですが、ほとんどの関数動作を学んでいきましょう。 関数の利点 関数の宣言と呼び出し 関数リターン(戻り値) 関数式(無名関数) ES6 アロー関数 関数オブジェクト 即時関数 関数配列 最後に 関数は、特定のタスクを実行するコードのブロックとなります。 何かしらの図などの機能を作成して色を付けたりするプログラムを作成する必要があるとします。 まず問題を解決するために2つの関数を作成できます。 図を描く関数と図に色を付ける関数 １つの複雑な問題を小さな機能によって分割すると、プログラムが理解しやすくなり、再利用しやすくなります。 メイン機能プログラムとは別に保持および保守できます。 関数はより移

配列は、プログラミングにおいて非常に便利なデータ構造であり、初心者にとっても重要な概念です。 配列を理解することで、より複雑なプログラムを作成することができます。 データ構造とは、データを効率的に管理するための方法のことです。 配列は、複数の値を一度に扱うことができ、データの整理や処理に非常に役立ちます。例えば、配列を使用して、数値の平均値を算することができます。 本日は、基本的なデータ構造の一つである、JavaScript配列の作成および操作についての初心者向け解説となっております。 JavaScript配列 配列リテラル 配列コンストラクター JavaScript 連想配列 JavaScript 多次元配列 最後に JavaScript配列 JavaScriptでは、変数には1つの値しか割り当てることができません。 しかし、配列を使用することで、1つの変数に複数の値を格納することができ

当ブログでは、将来的にReactプログラマーを目指す方に向けて、JavaScriptの基礎を解説します。 今回は、JavaScriptの変数と定数について学習します。 また、スコープについても解説致しますが、詳しくは当ブログの別の記事で説明しています。 以下のリンクを参照してください。 dev-k.hatenablog.com JavaScript 変数 変数の宣言 変数の命名規則 変数の割り当て(代入) 変数の値を変更(再代入) 値の型操作 再宣言 JavaScriptグローバル変数 JavaScriptローカルスコープ 関数スコープ ブロックスコープ 定数 JavaScriptの定数とオブジェクト 最後に JavaScript 変数 変数はJavaScript固有のものではございません。 実際、ほとんどすべてのプログラミング言語には変数の概念があります。 データを非常に簡単に処理および

はじめに ReactでのJS必須級のスキル 学んでおくと尚良い 最後に はじめに Reactの開発者として学びたい初学者の方々にとって、以下の疑問が生じるかもしれません。 Reactを学ぶ前にどれくらいのJavaScriptを学ぶべきか？」「どの程度のJavaScriptの知識があれば、Reactを始められるのか？」。 このような疑問は非常に一般的であり、バニラJavaScriptの基礎を学ぶ必要があります。 また、最新の構文や機能を持つES6も理解する必要があります。 Reactの名前は聞いたことがあるけれど、詳しく知らないという方には、以下にReactについての説明を用意しています。 dev-k.hatenablog.com さらに、Reactを始める前に知っておくべきJavaScriptのスキル、ライブラリ、ツールなどもリストアップしています。これらをマスターすることで、より効果的な

React.jsは、モバイルアプリとウェブアプリのビューレイヤーを担当するJavaScriptライブラリです。 Reactには多くの利点がありますが、考慮すべきいくつかの欠点があります。 React.jsの使用を開始する前に、Reactの全体像を把握するために簡単に触れておきましょう。 ※メリットに関しては別途記事に致します。 本日はReact.jsでの欠点を重点的に解説していきます。 ドキュメントに関する欠如 プラットフォーム関連 開発ペース 複雑なJSX構文 学習における問題 まとめ ドキュメントに関する欠如 教育に関する文書とリソースは、最新の更新と変更をカバーするのにまばらになる可能性があったりします。 これはアップデートや新しいリリースの数が多いため、完全なドキュメントを作成するのに十分な時間がありません。 開発者はドキュメントをReact.js/React Nativeの欠点と