サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
パリ五輪
dev-k.hatenablog.com
Reactアプリケーションに適用されるリファクタリングに関する一般的な問題について解説します。 クラスコンポーネントから学習してしまい、フックに移行する前に少し混乱する可能性があります。 関数コンポーネントが好まれる理由と、クラスコンポーネントよりも関数コンポーネントを使用する利点があるかどうかを詳しく学んで下さい。 なぜクラスではなくフックなのか? 状態がない場合 状態を持つコンポーネント Props ライフサイクルの簡素化 これから 最後に なぜクラスではなくフックなのか? Reactでクラスを使用する利点は、状態がいつ変化したかを識別し、this.stateキーワードを使用してグローバル状態またはコンポーネント状態を更新するライフサイクルメソッドがクラスに含まれていることです。 対照的に、フックはReact 関数コンポーネントで使用され、クラスを必要とせずにコンポーネントの状態やその
GoogleはProgressive Web App(PWA)という新しいテクノロジーを提供しました。 PWAテクノロジーは市場に出回ってからしばらく経ちますが、その人気はここ数年で急上昇しております。 PWA開発の基本と定義を見ていきましょう。 PWAとは? PWAで構築する理由 ReactでPWA Webアプリ作成 Manifest.json アプリのビルド Service Workerの登録 最後に PWAとは? PWA(Progressive Web App)は、Webアプリケーションとネイティブアプリケーションの利点を組み合わせたアプリケーションであり、ハードウェア機能を含めたクロスプラットフォームアプリを提供します。 PWAは、ネイティブアプリよりも開発とサポートが迅速で、低コストであるため、注目されています。 この技術は、モバイルアプリとWebサイトの両方で最高のユーザーエク
Next.jsとは 前提条件 Next.jsプロジェクトを手動で作成 最後に Next.jsとは Next.jsは、サーバー側のレンダリング(SSR)、静的 Webサイトの生成(SSG)、優れたSEO最適化など、いくつかの追加機能を有効にするオープンソースのReactフレームワークです。 Reactアプリケーションを構築するために広く使用されています。 最近、Next.jsは自身を『The React Framework for Production』と呼んでおり、そのような主張とともに、ReactのWebサイトおよびWebアプリケーションをゼロから本番環境に移行するのに役立つ一連の機能が提供されております。 Next.jsは静的サイト向けに設計されており、その目的のために十分に設計されています。 本日は、手動セットアップのNext.jsアプリ作成を初心者様に解説致します。 前提条件 この
useRefフックを使用してrefを宣言するさまざまな方法が、現在のrefプロパティの不変性にどのような影響を与えるかを学びます。 当記事では、currentプロパティを不変にする方法、可変にする方法を紹介します。 useRefフックとは? useStateとuseRefの違い useRefでDOMノードの入力方法 useRefで可変値の入力方法 最後に useRefフックとは? useRefフックは他のフックでは解決できない、いくつかの問題を解決するために使用できる便利なReact フックの1つです。 Reactでは、レンダリングに使用するデータは不変です。 状態の一部の変更は、セッターまたはレデューサーを通じて反映されます。 const App = () => { const [name, setName] = useState<string>(''); return ( <input
遅延読み込み React.lazy React Suspenseとは? エラー境界 Suspenseの使い方 注意点 最後に 遅延読み込み 遅延読み込みは、最適化手法やデザインパターンの一つです。 それは画像、ビデオ、Webページ、音楽ファイル、ドキュメントなど、必要になるまで読み込みを遅らせて貴重なデータを節約する手法です。 通常、Reactのシングルページアプリケーション(SPA)は小さいため、問題なく動作します。しかし、コンテンツ管理システムなどの複雑なアプリケーションを扱う際には、プログラム全体を一度に読み込むことは理想的ではありません。 そこで、Reactアプリケーションを本番用にする前に、Webpackなどのプリインストールされたバンドラーを使用してプロジェクトをパッケージ化します。 しかし、このパッケージ化されたプロジェクトを読み込むと、ユーザーが滅多にアクセスしないページも
ウェブ開発とモバイルアプリ開発を専門とするプログラマとして、私たちはクライアントとそれぞれの目的について頻繁に話し合い、それらを区別する方法を説明してきています。 そのため、これら2つの主な違いを指摘するガイドを作成することを考えました。 いくつかのトリックを知っていれば、それらを区別するのは本当に簡単です。 本日は初心者様にこれらを解説致します。 Webサイト Webアプリケーション 類似点 違い デメリット 適切な選択は? まとめ 最後に 完全なデジタル時代に移行するにつれて、Webサイトの人気がますます高まっております。 2022年では世界的にも、中小企業の71%以上がWebサイトを保有しております。 保有していない場合、ワールド・ワイド・ウェブ(WWW)の時代において、現代の世界で生き残ることは困難となります。 ただし、Webサイトを必ず持っていなければならないというわけではござい
Reactで関数型コンポーネントを書く際に、最も基本的でよく使われるフックがuseStateです。 しかし、ReactとTypeScriptを組み合わせて使う場合、useStateフックで状態の型を宣言する方法に混乱することがあるかもしれません。 実際、ReactのフックはTypeScriptのジェネリック型を大いに利用しています。 そのため、まずはジェネリック型について理解していることが重要です。 この記事では、「ブール値」、「文字列」、「数値」、「配列」、「オブジェクト」の型の宣言方法について解説します。 これらの型について理解を深めることで、useStateフックで状態の型を宣言する方法についても理解を深めることができます。 ただし、この記事では、TypeScriptの基礎についてある程度の知識があることを前提としています。 それを踏まえた上で、以下に進んでいきましょう。 TypeS
ReactのJSXの中で、Reactの開発者が条件を設定する方法は複数あります。 if/else文やswitch文も使えますが、第三の方法として三項演算子がございます。 この記事では、Reactで三項演算子を使用する方法について学習します。 Vanilla.JSでの三項演算子の基礎は下記で解説しております。 dev-k.hatenablog.com 三項演算子 Reactでの三項演算子 JSX内に記述する Reactでのネストされた三項演算子 論理積演算子 インラインスタイルでの三項演算子 最後に 軽く三項演算子のおさらいをしときましょう。 三項演算子 条件付き三項演算子は、3つのオペランド(値や変数)を取る唯一のJavaScript演算子となります。 この演算子は、値を返すif文のショートカットつまり代替えとしてよく使用されます。 条件を設定し、trueまたはfalseに基づいて特定の値
Next.jsのアプリケーションで外部ページへのリンクを追加する方法について、疑問を持っている方もいるかもしれません。 実際には非常に簡単ですが、組み込みのLinkコンポーネントについて少し混乱するかもしれません。 この記事では、外部URLを指すリンクを追加する方法とリダイレクトの方法を紹介します。 Linkコンポーネント 外部リンク 外部URLへのリダイレクト 他の方法でリダイレクト 最後に Linkコンポーネント Next.jsは、アプリケーション内のページ間のナビゲーションを簡単に実現するために組み込みの「Link」コンポーネントを提供しています。 この強力なコンポーネントは、クライアント側のトランジションとプリロードルートを活用することで、スムーズで高速なユーザーエクスペリエンスを実現するのが特長です。 例えば、アプリ内の異なるページへの遷移は以下のように簡単に実現できます。 im
Reactでは、関数コンポーネントでさまざまなライフサイクルを実現するためのフックがたくさん組み込まれておりますが、その中にuseMemoというフックがあります。 Reactの初心者でなければ、useMemoおよびuseCallbackフックには既に馴染みがあるかと思います。 useMemoおよびuseCallbackフックの使い道はいくつかの非常に特殊で具体的なケースに限られます。 負荷の高い計算によってアプリのパフォーマンスが低下していることに気付く確率は10%も満たないでしょう。 これらフックに関係なく、実行されるすべてのコード行にはコストがかかります。 事前に最適化をしたいだけかもしれません。 しかし、ほとんどの場合は私たち(開発者)はそれらを使って不必要なものをラップしています。 useMemoとuseCallbackのこれらの実際の目的は何なのか、そしてそれらを適切に使用する方
本日はNext.jsでローカルのJSONファイルからデータを読み取って表示する方法を示します。 Next.jsの事前レンダリング ページ制限 セットアップ JSONデータの作成 データの取得 getStaticPropsを使用せずに静的JSONデータをローカルで取得 最後に サーバー側のレンダリングや静的Webサイトの生成などの追加機能に関して、Next.jsは非常に興味深いものです。 これは、バックエンドをコーディングしたり、データベースのセットアップや接続に時間を費やしたりすることなく、小さなWebアプリをすばやく構築したい場合に非常に役立ちます。 Next.jsの事前レンダリング Next.jsはいくつかの異なるデータ取得戦略を提供しています。 それらは下記の通りです。 ・クライアント側のレンダリング(CSR) ・サーバー側レンダリング(SSR) ・静的サイトレンダリング(SSG)
本日はNext.jsでウィンドウオブジェクトにアクセスするいくつかの方法を初心者向けに解説していきます。 NextJSでWindowが定義されていないのはなぜですか? Next.jsで"window is not defined"を回避するには? useEffectフックを使用する 型のチェック globalThisプロパティを使用する 組み込み関数でウィンドウオブジェクトにアクセスする 最後に Next.jsを使用するときに遭遇する可能性のある非常に一般的なエラーは、ウィンドウオブジェクトにアクセスした際に返されるエラーです。 Next.jsではWindowは定義されておりません。 Next.jsアプリで HTML DOMからウィンドウオブジェクトにアクセスしようとすると以下のエラーがスローされます。 Unhandled Rejection (ReferenceError): windo
データ構造はコンピュータサイエンスとソフトウェアエンジニアリングの分野全体で幅広く多様な用途があります。 プログラマにとって、アルゴリズムとデータ構造は最も重要なテーマです。 プログラミングの分野に足を踏み入れたい場合は、最も一般的なデータ構造を習得し、需要の高いスキルであなたの履歴書を強化する必要があります。 本日はデータ構造とアルゴリズムを解説いたします。 データ構造とアルゴリズム データ構造とは? 8つのデータ構造 アルゴリズムとは? 覚えておくべきアルゴリズム 検索アルゴリズム 二乗によるべき乗 ソートアルゴリズム ハッシング 文字列の照合と解析 動的計画法(DP) アルゴリズムは何に使用される? 最後に データ構造とアルゴリズム プログラミングはすべてデータ構造とアルゴリズムに関するものとなります。 コンピュータプログラミングでは、データ構造はコンピュータプログラムでデータを効率
Reactは、PropsまたはStateが更新されるたびに、コンポーネントを自動的に再レンダリングします。 どちらも変更されない場合は、再レンダリングは発生しません。 しかし、初心者はコンポーネントを再レンダリングするのが非常に難しいと感じることがよくあります。 まず、コンポーネントを再レンダリングするために使用できる方法を見て、本当に再レンダリングを強制するべきか、 Reactに処理させるべきかについて説明します。 Reactコンポーネントを再レンダリングさせる方法とタイミングを真に理解するには、Reactの内部動作を理解する必要があります。 つまり、コンポーネントを強制的に再レンダリングするべきかどうかを学習すれば、Reactの内部動作を理解するのに非常に役立ちます。 Reactコンポーネントを強制的に再レンダリングする必要はあるのか? Reactの状態が正しく更新されない 不
React.jsがReact v18をリリースしてから、CRAはこの最新バージョンのReactをインストールします。 つまり、create-react-appは最新のすべてのReactバージョンと依存関係バージョンを使用して、まったく新しいReactアプリケーションを作成するためのCLIツールです。 ですが、現時点ではすべてのパッケージがこの最新バージョンのReact 18をサポートしているわけではありません。 そのような場合、プロジェクトで依存関係エラーが発生します。 この問題は、React 18をまだ使用する準備ができていない依存関係に対してより広く存在します、React v18でまだ動作できない内部ライブラリがあるため、この問題が発生しています つまり、使用したい他の多くの依存関係がバージョン18に対して最新ではなくサポートがされていないので、ダウングレードをしたい場合です。 既存の
Reactの最新版(v18)において、イベントハンドラ関数に引数を渡す方法および基本的なイベント処理について説明します。 ボタンやリンクなど、あらゆる要素をクリックした後に何らかの処理を実行する場合は、常にonClickイベントハンドラを使用します。 これはReactで最も強力で、最も頻繁に使用される機能の一つです。 また、この記事ではonChangeイベント処理についても解説しますが、ほとんどはonClickイベントハンドラを重点的に学習していきます。 SyntheticEvent(合成イベント) Reactのイベントハンドラ イベントハンドラをインライン関数として呼び出す インライン関数にボタンの値を引数として渡す 複数の関数を呼び出す イベントハンドラ内の状態を更新 最後に SyntheticEvent(合成イベント) イベントは、ユーザーが行う操作やシステムが生成するトリガー動作に
React.jsプロジェクトのセットアップは初心者にとって非常に時間がかかる手順であり、特にReactエコシステムの初心者の場合はより困難となります。 しかし、一般的にはcreate-react-app(CRA)を使用してReact.jsアプリケーションを作成することが推奨されています。 CRAは、正確なnpmバージョンやReact関連ライブラリなどの心配をする必要がなく、npx create-react-appのようなコマンドを使用するだけでReactプロジェクトを構築することができます。 CRAはReactプロジェクトの構築に非常に便利なツールであり、事前に学習しなくても簡単に始めることができます。 ただし、初心者がCRAを使用してReactプロジェクトを構築する場合、npm startコマンドがエラーで実行されないなどの問題に遭遇することがあります。 このような問題は、package
このチュートリアルでは、ローカルストレージにアクセスし、それを使用してアプリケーションの状態を保存する方法を説明します。 ※前提条件として、Reactの概念およびReactフックの基本を理解していることを確認してください。 Webストレージとは フォームコンポーネントの作成 フォーム入力をlocalStorageに保存 localStorageに保存されたデータの削除 カスタムフックとしてカプセル化 データ検証とエラー処理 localStorageでuseEffectフックを使用 getItem()でデータの読み取り 最後に ユーザーからユーザー名とパスワードを受け取り、それをユーザーのコンピュータのlocalStorageにデータとして保存するReactアプリケーションを構築します。 Webストレージとは 2つの主要なWebストレージメカニズムがあります。 React localStor
このチュートリアルでは、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でwhileまたはdo…whileループを記述して使用する方法を説明します。 Whileループ Whileループの構文 whileループの実行フロー whileループのフローを制御 ループのスキップ whileで配列をループする do… whileループ 最後に Whileループ whileループは、JavaScript言語でサポートされている最も単純なループの1つとなっています。 ループは、特定の条件が満たされている限り、コードの一連の命令の繰り返し実行を容易にするプログラミング構造です。 つまり、特定の条件が真になるまでデータの処理を続行する必要がある場合に役立ちます。 また、常に真の条件を使用して、whileループを無限ループとして簡単に実行することもできます。 JavaScriptでforループの代わりにwhileループを使用すると、ルー
本日は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
次のページ
このページを最初にブックマークしてみませんか?
『deve.K's Programming Primer - プログラミング初心者のための入門ブログ』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く