はじめに 1. 生産性系のアプリケーション 2. 個人・専門のブログ 3. SPA(シングルページアプリケーション) 4. クロスプラットフォームモバイルアプリ 5. チャットアプリケーション 6. 語学学習アプリケーション 7. クイズ系アプリケーション 8. お天気アプリ 9. 本・読書アプリケーション 10. オンラインストア 11. ポートフォリオ 12. 出会い系アプリ 13. 音楽アプリ ReactとReact Nativeで構築された有名なアプリの数々 はじめに 初めてReact.jsやReact Nativeを学ぼうとしている初心者の方々にとって、どのようなアプリケーションを作成できるのかについて疑問を抱くことはよくあります。 Webアプリケーションおよびネイティブアプリケーションを構築する際に最も困難なのは、アプリのアイデアを考え出すことかもしれません。 優れたアイデアを

事前準備 Vercelとは Git Hubと連携 Vercel アカウントの作成 まとめと機能 今回は、Next.jsプロジェクトをデプロイする方法について解説します。 デプロイ先には多くの選択肢がありますが、代表的なものに「Cloudflare Pages」や「Netlify」があります。 この記事では、「Vercel」と「GitHub」を組み合わせてサイトを公開する方法を紹介します。 GitHubはコードのホスティングに使用されます。 一方、ビルドやサイトの公開にはVercelが活用されます。 幸いにも、この方法は複雑な操作を必要としませんので、安心して取り組むことができます。 事前準備 ・ Next.jsプロジェクト ・ Git Hubアカウント ・ VS Code(Visual Studio Code) デプロイするにあたり、Git HubアカウントとVS Code(Visual

Next.jsとは プロジェクト作成 フォルダ構成 ルーティングシステム・別ページ作成 最後に ReactのフレームワークであるNext.jsの入門を初心者の方に向けて解説します。 本日の記事と合わせて、静的サイトについても触れています。 こちらの記事も参考にしてみてください：dev-k.hatenablog.com 必要な条件 ・ JavaScriptに精通していることや豊富な経験があることが求められます。 クラス、スプレッド演算子、Promiseなどの概念の知識は必須です。 ・ ローカルの開発環境にNode.jsがインストールされていること。 Node.jsのインストールは、Download | Node.jsから行ってください。 ・ React.jsの基礎知識をある程度持っていること。 ※ なお、この記事はNext.js 13以前に投稿された記事となっておりますのでご了承下さい。 N

スクロールイベント 現在のウィンドウ位置を取得 ページ上のDOM要素にアクセス 最後に スクロールイベント スクロールイベントは、Webページで最もよく使用されるイベントの1つです。 ほとんどの場合では必要なのは『一番上までスクロール』することだけです。 長いコンテンツページがありそこに移動すると、下にスクロールされたままになり、一番上に戻るのが非常に面倒になるためです。 ですが、その前にReactのコンポーネントを作成しスクロールイベントリスナーで現在のウィンドウ位置を取得する方法を学ばなければいけません。 本日はその取得方法を解説していきます。 Reactフックでカスタムフックを作成し、再利用可能なコンポーネントにします。 それでは簡単な例で学んでいきましょう。 現在のウィンドウ位置を取得 // useScroll.js import { useEffect, useState } f

はじめに プロジェクトの作成 状態管理とリアルタイム表示の実装 数字ボタン処理 四則演算子ボタン処理 小数点ボタン処理と重複防止の実装 バックスペースボタン処理と入力値の編集機能の実装 クリアボタン処理とリセット機能の実装 計算ボタン処理とエラーハンドリング 安全な四則演算の評価 表示部分の実装 初心者向けのスタイリング例 コード保守性向上のリファクタリング 最後に はじめに この記事では、Reactを使用してシンプルな計算機アプリを構築する手法を紹介します。 このアプリは、iOSのiPhone電卓アプリに似たデザインを持っており、特に初心者に向けたプロジェクトです。 今回作成するReactベースの計算機アプリは、使いやすさを重視し、iOSの電卓アプリに見られるような操作感を提供します。コードはシンプルで分かりやすく保守性が高くなるように設計しています。 以下のデモを通じて、この記事で紹介

2022年の新年、React.jsの初心者向けの講座を始めます。 まずはじめに、明けましておめでとうございます！皆さんはお正月をどのようにお過ごしでしょうか？自宅でのんびり過ごす方もいれば、勉強に励む方もいるかもしれませんね。 React.jsを学習している初心者の方々に、私は応援の気持ちを込めて、今日もReact.jsの学習方法をブログで提供していきたいと思います。 React開発者として、制御可能なコンポーネントを作成することは、非常に重要なスキルの1つです。 このブログでは、Reactフックを使って、制御されたコンポーネントを作成する方法を初心者向けにご紹介します。 ぜひ、参考にしてください。 制御されたコンポーネントとは？ 制御されていないコンポーネントとは？ なぜ制御されたコンポーネントを使用する？ 制御されたコンポーネントの作成 制御されていないコンポーネントの作成 最後に 制