ki-hi-ro.com

DAILY JOURNAL

React

10記事の記録。

2026年7月

  1. Django × React ToDoアプリの開発記録

    フェーズ1：基盤構築とAPI連携 投稿日記事タイトル開発過程における位置・役割2025.03.01WEBエンジニアとして今の自分に足りないスキルとギャップを埋めるための行動計画開発の起点：自身のスキル不足を補い、実力を証明するためのポートフォリオ作成を計画する。2025.03.02タスク管理アプリを作っていくバックエンド構築（初期）：DjangoとDRFを使用し、モデルやシリアライザー、APIエンドポイントの基本実装を行う。2025.03.02現状のデータのレコードを確認する動作検証：Djangoのシェル機能を活用し、データベース（Taskクラス）へのレコード保存・取得を検証する。2025.03.02Django製のタスク管理アプリをGitHubでホス…

2026年6月

  1. 今、経営を管理するアプリはどうなっているか？

    人生を経営するアプリ その進捗を共有しよう Django https://github.com/ki-hi-ro/django_todo React https://github.com/ki-hi-ro/react_todo 経営とは このアプリにおける経営とは、なんだろうか？ 4つの概念を経営と表現している 健康 営業 健康 開発 過去記事 過去に自分が積み上げたこのアプリについての記事を掲載する 思考の軌跡ページから探し出す https://ki-hi-ro.com/?trail=thoughts 投稿日記事タイトルURL2025.03.01WEBエンジニアとして今の自分に足りないスキルとギャップを埋めるための行動計画https://ki-hi-…

  2. マイルストーン①達成 ― Django REST FrameworkのデータをReactへ表示する

    https://github.com/ki-hi-ro/react_todo#%E9%96%8B%E7%99%BA%E7%8A%B6%E6%B3%81 人生を経営するための行動管理システムの開発を進めている。 今回のマイルストーン①の目標は、 Django REST FrameworkのAPIからタスクを取得し、React画面へ表示する ことである。 表示項目は以下。 タスク名 カテゴリ 完了状態 期限 最終的にReact画面へ表示することを目標に進めた。 マイルストーン① まずは現在地を確認した。 React画面にはタスク一覧が表示されている。 しかし表示されているのはタスク名のみ。 READMEで定義したマイルストーン①では、 カテゴリ 完了状態…

  3. Django × React ToDoアプリを再始動したら、仮想環境・Vite・Djangoサーバーで詰まった話

    ブログベースで進める これが自分の真実 Django × ReactのTODOリストを進めよう Django側の現状確認 ↓ GitHubのリポジトリ ローカルサーバーを起動する ローカルで、以下のコマンドを叩く（ローカルサーバーを起動するため） python manage.py runserver Djangoが読み込めないエラーが発生 djangoがないというエラー ImportError: Couldn't import Django. Are you sure it's installed and available on your PYTHONPATH environment variable? Did you forget to activ…

2025年3月

  1. ReactでDjango REST frameworkのバックエンドAPIと連携してタスク一覧を表示させる

    【フロントエンドとの連携】CORS設定でフロントエンドからAPIを呼び出せるようにするでフロントエンドとの連携に必要なCORS設定を行った。 今回はReactを使用して、DRFとの連携を行い、最終的にはタスク一覧をReactの開発環境で表示させる。 viteを使ってReactプロジェクトを作成 vite（ヴィート）は、ReactやVueのフロントエンド開発で使われる高速なビルドツール。 ビルドツールとは、プログラムの開発において、ソースコードを変換・最適化して実行可能な形式にするためのツール。 新規Reactプロジェクトを使用するので、gitでリポジトリを作成した。 ローカルにもフォルダを作成する。 リポジトリの初期化を行なった。 Mac:react_…

    「The JSX syntax extension is not currently enabled」を解決していく

    npn run devを叩いたら、以下のエラーが発生した。 こちらを解決していこう。 エラーの詳細 npm run devを行うと、TaskList.jsの20行目でエラーになっていることが確認できた。このファイルのビルドローダーがjsに設定されているが、jsxに設定する必要があるとのこと。"loader: { '.js': 'jsx' }"で設定できる。 Mac:react_todo shibatahiroshitaka$ npm run dev > react_todo@0.0.0 dev > vite VITE v6.2.2 ready in 586 ms ➜ Local: http://localhost:5173/ ➜ Netwo…

    【エラー解決】TypeError: crypto$2.getRandomValues is not a function

    作成中のreact_todoでnpm run devを行うと以下のエラーが発生した。 Mac:react_todo shibatahiroshitaka$ npm run dev > react_todo@0.0.0 dev > vite error when starting dev server: TypeError: crypto$2.getRandomValues is not a function at resolveConfig (file:///Users/shibatahiroshitaka/Downloads/react/react_todo/node_modules/vite/dist/node/chunks/dep-g…

2022年11月

  1. コンポーネントの繰り返しに使用する「map関数」

    しまぶーさんが、「コンポーネントを、mapで繰り返そう」という動画を上げてくれていたので、学習ブログを書いていきます。 この記事では、主な内容のみを書いていきます（動画内では、詳細についても解説されています）。 今回使用した開発環境 http://localhost:3000/ 以前の記事で作成した、ローカル環境を使用しました。 言語は、TypeScriptを設定しましたが、今回の内容では、JavaScriptのみを使用しています。 現状のコード 現状では、カード部分の繰り返し部分で、以下のように、aタグ、h2タグ、pタグを4セットそのまま書いています。 <a href="https://nextjs.org/docs" className={s…

  2. Next.jsのセットアップを行いました

    テスト環境を起動して、http://localhost:3000をcommandを押しながらクリックすると、Welcome to Next.js！という最初の画面に到達することができました。 Welcome画面が表示されるまで node.jsのバージョン確認を行い、yarn create next-appをコマンドで打ち込むとmy-reactという名前でプロジェクトが作成されました。 yarn devを入力すると、url: http://localhost:3000が表示されました。 node.jsのバージョン確認 しまぶーさんの動画と自分がこれからNext.jsを学んでいく理由 https://www.youtube.com/watch?v=15WL…

  3. Next.jsで学ぶReact講座 #1 Next.jsで重要な部分

    しまぶーさんが、以下のような動画を出してくれていました。 今後WEBエンジニアとして活躍していくのに、Next.jsを学んでおいておいた方がいいと思うので、まずは、この動画に沿って学んでいきます。 Next.jsで重要な部分 太字の部分は、最初のうちから特に重要な部分です。 Zero Config Hybrid: SSG and SSR, Incremental Static Regeneration TypeScript Support File-system Routing API Routes Built-in CSS Support Zero Config https://nextjs.org/ 素のReactだと自分で設定ファイルをいじらなけ…