学んだこと（復習も含める）’pnpm store prune’コマンド pnpmが使わなくなったパッケージを削除して、容量を節約するコマンド。 ポートフォリオの進行状況ライブラリを使用して、グラフを配置（ReChars） Xシェアボタンを配置 レイアウト修正 Xのシェアボタンcomponentを作成していた時、 「モジュール './ShareButton' またはそれに対応する型宣言が見つかりません。」 というエラーがずっと出ていました。 ファイル名とインポート文が
学んだこと（復習も含める）git reset --hard origin/main：ローカルのmainブランチを、リモートリポジトリのorigin/mainの状態に強制的に戻すコマンド。ローカルのブランチをクリーンな状態に戻したいときに便利。 ローカルで行った変更はすべて完全に消去される。 リモートリポジトリのmainブランチの状態が、ローカルブランチに反映される。 このコマンドを実行する前に、ローカルの別のブランチに保存するか、コミットをしておく必要がある。 実行す
学んだこと（復習も含める）スプレッド構文：配列やオブジェクトの要素を展開する記法。配列やオブジェクトのコピーや結合が簡単にできる。 配列の場合 …numbersで、numberの配列要素の[1, 2, 3]が展開されている。 新しい配列のnewNumbersには、展開された要素と、新しい要素の[0, 4, 5]が順番に格納されている。 const numbers = [1, 2, 3];const newNumbers = [0, ...numbers, 4, 5];
学んだこと（復習も含める）async と await：非同期処理。時間のかかる処理を後回しにして、他の処理を先に進めることができる。 async 関数を定義するときに、asyncキーワードを使うと、その関数が非同期処理であると示すことができる。 await awaitキーワードを使用することで、非同期処理の結果を同期処理のように受け取ることができる。 interface：TypeScriptでオブジェクトの型を定義するために使われる オブジェクトが持つべきプロパテ
学んだこと（復習も含める）TailwindCSS flexクラス：要素をフレキシブルボックスレイアウトのコンテナとして設定する 子要素を自動的に調節して、利用可能なスペースを効率的に使用する。 子要素を簡単に並べられる。 画面サイズに合わせて自動調節をしてくれる。 子要素の縦や横の配置を簡単に制御できる。 flex-lox：子要素を縦方向（列）に配置するためのクラス 親要素を縦型のコンテナにする。 子要素を上から下の順に並べる。 モバイル画面など、縦長のレイアウトを作るの
学んだこと（復習も含める）TypeScript・ReactでSVGを使用する場合： SVG属性名をキャメルケースに変更する必要がある。 stroke-width → strokeWidth fill-opacity → fillOpacity view-box → viewBox x-link:href → xlinkHref など class属性の代わりに、classNameを使用する。 Reactコンポーネントは単一のルート要素を返す： Reactコンポーネントは
TailwindCSSを学習中のため、情報収集をしていると私が求めていた動画を見つけました✨️ 初心者の私がわかるように、アプトプットも含めてなるべく簡単にまとめてみました💡 1.クラス名を動的に組み立てる場合の問題クラス名を動的に組み立てるとTailwind CSSが正しくスタイルを適用できなくなる理由を説明します。 私はこれを聞いて、そもそも「クラス名を動的に組み立てないとはどういう意味？」とまず疑問に思いました。 「クラス名を動的に組み立てない」とは？： プロ
学んだことアウトプット<></>（フラグメント） Reactでは、複数の要素を囲む場合、<>< />を使用する。 余分なDOMノードを減らせるため、シンプルなコード・シンプルなページ構造・ページの読み込みが早くなってパフォーマンスが向上する。 レイアウトコンポーネントなど、複数の子要素をもつコンポーネントに使用することが多い。 <Outlet />コンポーネント 親ルートの中に子ルートをレンダリングするために使う。 ネストされたUIを実現して、URLに応じて子コン
「React Compiler」のBeta版をリリース 今回「React Compailer」という新しいツールがBeta版でリリースされました✨️ 自分自身が理解できるように、とても簡単にまとめてみます。 React Compiler Beta Release 「React Compiler」のBeta版とは？ Reactアプリのパフォーマンスを自動で最適化してくれる新しいツールで、Reactの速度や効率を高めている。 具体的には、開発者が手動で行っていた処理（例：
ようやく、SPAのフロントエンド開発環境の構築が完了しました。 今回の開発では、以下のようなコンポーネントやライブラリなどを使用します！ 技術スタック React TypeScript TailwindCSS ビルドツール Vite バックエンド Firebase 認証機能 Zod react-hook-form tailwind UI グラフ Recharts Datepicker flatpick カレンダー FullCalendar アイコン hero
少しずつ、開発環境の構築の要領をつかめてきました。 今日の午前は、開発環境の構築。 特に一番悩んだのが、Tailwind CSSのインストールです。 どのコマンドでインストールすればよいか迷いましたが、公式サイトを見たり、AIに聞いたりして焦らずに進めました。 TailwindCSSの公式サイトを参考にViteでTailwind CSSをインストールしたので、学習の記録用にインストール手順を残しておきます。 先日プロジェクトを構築したため、「手順2」から進めます。 V
今日は朝から頭痛があったんですが、いつものように朝の散歩をして、その後パソコンに向かっているうちに、いつの間にか頭痛が落ち着きました。 作業に集中できてよかったです。 さて、今日も環境構築を始めました！ 今回のWebアプリには、React、TypeScript、TailwindCSS、そしてMUIを使います。 なぜMUIを選んだかというと、実はUdemyの教材で使っていたからです… はい、それだけの理由です。 今回作ろうとしているアプリは、その教材のチュートリアルに少
Firebase Authenticationの設定 開発環境の構築 本格的に認証機能の実装に入れるかと思いましたが、まさかの開発環境の構築でエラーが… AIに聞きながらライブラリをインストールしていましたが、そのコマンドは一度に複数のライブラリをインストールするコマンドでした。 ライブラリ同士の互換性？が合わないため、先に進められず、フォルダを作成することしかできませんでした。 開発環境の構築ってこんなに大変で難しいんだなと痛感しています… 今回学んだことは、開
要件定義を３回書き直して、やっと本格的に開発の段階に入れそうです。 昨日は、主に開発環境を中心に進めました。 Node.jsとnpmのインストール create-react-appを使って、Reactプロジェクトの作成 Firebase, zod, shadcn/ui, recharts, @mui/material など、必要なライブラリをインストール ESLintとPrettierの設定 Firebaseの初期設定（Firebase CLI をインストール、プ
少し遅くなってしまいましたが、6月の振り返りをしていきます！ ー達成と挑戦先月の目標 LT登壇を1回する。 本を4冊読む。 Reactの応用をハンズオンで習得する。 TypeScriptとReactを組み合わせたアプリをハンズオンで習得する。 簡単なオリジナルアプリを1つ自作する。 今月達成したことは何ですか？ 本1冊完読 軽い筋トレとストレッチ、朝散歩を毎日続けた 始めて人前でLT登壇を2回した Reactの応用をハンズオンで学ぶ。 今月の最大の挑戦は何でし
「今日はTodoアプリをつくるぞー！」 と気合いをいれて、復習がてらGitHubから始めることに。 前に必死になって勉強をしたので、教材を観ながら進めればすぐに終わると思い始めましたが… 「あれ？ このコマンドってどういう意味だっけ？」 前回GitHubを使ってからだいぶ期間があいてしまい、完全にど忘れしてしまいました(汗) リポジトリの整理をする リポジトリを新規作成 新しいディレクトリを作成して、ターミナルを立ち上げる ディレクトリの階層が深くなってしまった
