JavaScript 【Reactフック】useRefでのDOM要素の参照と管理
Reactフックの一つであるuseRefは、DOM要素の参照や管理に非常に役立つツールです。
本記事では、useRefの基本的な使い方から、よくある使い方や実践的なサンプル、ベストプラクティスと注意点について詳しく解説します。
2025-02
JavaScript JavaScript 【Reactフック】useContextによるコンテキストの共有
Reactでは、コンポーネント間でデータを共有する際に、propsを使う方法だけでなく、より効率的で便利な方法としてコンテキストAPIを利用することができます。
この記事では、useContext フックを使ってコンテキストを共有する方法について詳しく解説します。
具体例を交えながら、useContext の使い方、利点、ベストプラクティスについて見ていきましょう。
JavaScript 【Reactフック】useEffectの使い方と活用法
React.jsは、そのシンプルさと強力な機能で、多くの開発者に愛されています。その中でも特に重要な要素の一つが「フック」です。フックは、関数コンポーネントで状態やライフサイクル機能を利用するための仕組みであり、Reactをより強力かつ柔軟に使いこなすために欠かせないものです。
以前の記事で、useStateフックについて学びましたが、Reactには他にも多くのフックが存在します。この記事ではuseState以外のReactフックの中から、まずはuseEffectを紹介し、使い方と効果的な利用方法について解説します。
JavaScript Reactのオリジナルアプリを開発するチュートリアル
前回までの記事で、React.jsの超入門的な内容を学習してきました。
ある程度の基礎用語や構文などを学習した後は、チュートリアルを実践することで、その言語やフレームワークの全体像を包括的に掴みたいですよね。
React.jsのチュートリアルは、公式サイトの三目並べやMDNのToDoアプリといった素晴らしいものが既にありますので、未実施の方はそちらに取り組んでいただくのも良いと思います。
今回の記事は、「もう少し趣向を変えたアプリを作ってみたい」という方に向けて、オリジナルアプリをチュートリアル形式でお届けします。
JavaScript React.jsのstateとuseState
前回の記事で解説したpropsと並び、React.jsを使う上で必須となる知識として、stateがあります。
propsよりも難易度が高いので、サンプルプログラムを多めに使いつつ、まずは基本的な内容についてじっくりと解説していきます。
JavaScript React.jsのprops
前回の投稿で予告しましたとおり、今回はReact.jsにおけるpropsの基本的な知識、注意点、使い方について解説していきます。
JavaScript 【React.js入門】JSXの基礎
React.jsでは、JSXと呼ばれる記法を使い、JavaScriptとHTMLを融合させたようなコードを組み合わせてプログラムを作成していきます。 前回作成したhello-appプロジェクトを使用しますので、実際に手を動かしながら学習され...
JavaScript React.js 初めの一歩
本投稿では、JavaScriptのフレームワークの一つ「React.js」を使用して、初めてのプロジェクト作成から、「Hello World」の作成と動作確認までを解説しています。
JavaScript React.jsの環境構築（Windows）
Windows11でのReact.jsの環境構築方法です。
サンプルプロジェクトの作成までをサポートしています。
なお、作成ツールにはCreate React AppではなくViteを、コンパイラーにはBabelではなくSWCを選択しています。