謹んで新年のご挨拶を申し上げます。 本年も何卒よろしくお願い申し上げます。 いよいよ、2023年がスタートいたしました。 みなさまはどんなお正月をお過ごしでしょうか？ 皆様におかれましては、新春を清々しい気持ちでお迎えのこととお慶び申し上げます。 昨年は、多くのお力添えいただき誠にありがとうございました。 今年も更なる、更新や記事の質の向上に対して努めて参ります。 皆様のより一層のご支援を賜りますよう心よりお願い申し上げます。 ※ 当ブログの更新は、1月4日辺りを予定しておりますのでご了承下さい。

useEffectとは 暗黙のリターン useEffectでのasync/await 最後に React.jsでは副作用を処理するためのフックが２つございます。 ・ useEffect ・ useLayoutEffect これらの主な違いは、詳しくは解説致しませんが、全ては実行時のタイミングです。 簡単に言ってしまえば、非同期なのか同期処理なのかです。 以下で、解説しておりますので参照下さい。 dev-k.hatenablog.com useEffectとは useEffectフックは２つの引数を受け入れます。 useEffect(() => { // Mounting return () => { // Cleanup function unmount } }, [//Updating]) // 第2引数 デフォルトでは、すべての再レンダリングで実行しますが、オプションとして２番目の引数

いつも当ブログをご閲覧頂き、ありがとうございます。 少し遅れてしまいましたが、ブログ開設して11月4日に一年が経過しました。 いつもお越し頂いている読者様ならびに新規様には感謝申し上げます。 当ブログで学習される読者様に、今後のお知らせと注意点を説明させて頂きます。 当ブログでは、個人で管理しているブログのプログラミング初心者向け学習記事ですので、どうしても1ページ事の文字数が多くなってしまいます。 記事によっては、5000〜10000文字以上などございます。 したがって、誤字および脱字が多数存在する場合がございますのでご了承下さい。 なるべく気を付けてはおりますが、発見したその際は、ご指摘頂けますと幸いでございます。 ご協力の程よろしくお願い致します。 なお、当ブログで扱うプログラミングテクノロジーに関する相談またはリクエストは、お気軽にお問い合わせやコメントからお願い致します。 迅速に

前回では、onclickによるイベント処理の解説を致しました。 本日のチュートリアルでは、そのイベント処理の続きとしましてonchange属性およびaddEventListener()メソッドを使用し、入力テキスト、ラジオボタン、チェックボックス、および選択要素のJavaScriptイベントについて学習します。 前回のクリックイベントはこちらの JavaScriptのボタン作成とクリックイベント処理で解説しております。 JSのchangeイベントとは？ JSのonchangeイベントはどのように機能する？ テキスト入力要素のchangeイベント ドロップダウンでのchangeイベント ラジオボタンでのchangeイベント onchangeとaddEventListenerの違い 最後に JSのchangeイベントとは？ このイベントハンドラは、フォームフィールドが変更されたときにすぐに呼び

GoogleはProgressive Web App(PWA)という新しいテクノロジーを提供しました。 PWAテクノロジーは市場に出回ってからしばらく経ちますが、その人気はここ数年で急上昇しております。 PWA開発の基本と定義を見ていきましょう。 PWAとは？ PWAで構築する理由 ReactでPWA Webアプリ作成 Manifest.json アプリのビルド Service Workerの登録 最後に PWAとは？ PWA（Progressive Web App）は、Webアプリケーションとネイティブアプリケーションの利点を組み合わせたアプリケーションであり、ハードウェア機能を含めたクロスプラットフォームアプリを提供します。 PWAは、ネイティブアプリよりも開発とサポートが迅速で、低コストであるため、注目されています。 この技術は、モバイルアプリとWebサイトの両方で最高のユーザーエク

初学者様向けの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に依

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のオブジェクトを使う方法について、初心者向けに基本的な操作を解説します。 この記事では、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の未知のまたは見落とされた概念でもある為です。 中級者ですら巻き上げについてあまり理解されていない方が稀にいらっしゃいます。 しかし、開発者が巻き上げを理解していない場合

package.jsonとは？ React(CRA)package.jsonの中身 node_modules 最後に 以前は、Reactアプリケーションを作成するのには、webpackやBabelなど、多くの設定が必要でした。 しかし、Create-React-Appという優れたツールが登場し、Reactアプリケーションを簡単に構築できるようになりました。 Create-React-Appには、react-scriptsというスクリプトコマンドが付属しており、デフォルトで4つのメインスクリプトが用意されています。 これらのスクリプトを使うことで、Reactアプリケーションの構成に必要なすべての設定が提供されます。 具体的には、以下の4つのスクリプトがあります。 ・start ・test ・build ・eject これらのスクリプトを利用することで、開発者はターミナルから環境変数を設定する

React.js 関連用語 仮想DOM Reactノード 要素 JSX トランスパイル module bundler コンポーネント 制御されたコンポーネントと非制御コンポーネント ライフサイクル Props(小道具) props.children State(状態) React Hooks パフォーマンス SPA(シングルページアプリケーション) SSR(Server Side Rendering) SSG(Static Site Generator) 本日の記事ではReact.jsに関連するいくつかの一般的な用語をできるだけざっくりと簡単に定義していきます。 全ての関連用語をまとめるとあまりにも多いので記事を分割させて頂きます。 気になった箇所を選び飛んで読んで下さい。 React.js 関連用語 仮想DOM 『仮想』という表​​現がメモリに保持されReactDOMのライブラリによって

Tailwind CSSとはなんですか？ 事前準備 TailwindCSSの導入・インストール Tailwind拡張機能 最後に 前回の記事で、Reactでのスタイリング方法についていくつか紹介しました。 dev-k.hatenablog.com 本日は、初心者向けにReactのCRAで「Tailwind CSS」を設定し、スタイリングする方法についてチュートリアルを提供します。 Tailwind CSSは、Reactでのスタイリングに非常に便利なツールであり、この記事ではその設定方法について詳しく解説します。 Tailwind CSSとはなんですか？ Tailwind CSSは、ユーティリティファーストのCSSフレームワークであり、コンポーネントのスタイリングを容易にし、再利用可能なコンポーネントの作成に集中できるように設計されています。 簡単に言えば、Tailwind CSSは、独自の