react

useStateの型 useStateの状態管理関数をPropsで渡すとき、受け取る側は Dispatch<SetStateAction<T>>; という方で受け取ることになる。 ジェネリクスのメリットがいまいち 関係ないけどずっと気になっていた「ジェネリクスのメリットがいまいちピンとこない件」について、ついでに調べてみることにした。 例えば、 // 文字列を入力し、文字列を出力する関数 const returnText = (input: string): string => { return input; }; // 数値を入力し、数値を出力する関数 const returnNumber = (input: number): number => { return input; }; console.log(returnText("hello world"), "returnText"); console.log(returnNumber(0), "returnNumber"); という関数が存在した時、 const returnTextOrNumber = (input: string | number): string | number => { return input; }; console.log(returnTextOrNumber("hello world"), "returnTextOrNumber"); console.log(returnTextOrNumber(0), "returnTextOrNumber"); こんな感じにまとめたくなる。 これをジェネリック型にすると、 const returnTextOrNumberGeneric = <T extends string | number>(input: T): T => { return input; }; こんな感じになる。...

作成中のマストドンクライアントアプリの1つの機能が完成したので実機で活用したいという思いが生まれ、apkを作成することにした。 最初のビルドを作成するを参考にして進めていき、無事にapkを作成することに成功した。 EAS CLIをインストール ドキュメントが充実しているので、問題なくできるだろうと踏んでいたのだが、最初で壁にぶつかった。 npm install -g eas-cli というコマンドでEAS CLIをインストールするのだが、なぜうまくインストールされない。 なんかVoltaの権限でうまく入らなかったので、 "C:\\Program Files\\Volta\\npm.exe" install -g eas-cli を管理者権限で実行したら成功した。 C:\Windows\System32>eas --version eas-cli/14.2.0 win32-x64 node-v20.15.0 npm install -g eas-cli npm install -g eas-cliではシステムのPATHにあるデフォルトのnpmを使うけど、"C:\\Program Files\\Volta\\npm.exe" install -g eas-cliはVoltaで管理しているnpmを使用するという違いがあるらしい。 ログインする PS C:\dev\appname> eas login Log in to EAS with email or username (exit and run eas login --help to see other login options) √ Email or username ... email √ Password ... ******** Logged in プロジェクトを構成する AS Build 用に Android または iOS プロジェクトを構成するためにコマンドを実行する。...

Expoでreact nativeのアプリを作成する時、インストール時のディレクトリ構成で+not-found.tsxとかいう謎のファイルがあった。たぶんというか確実に404ページではあるんだろうけれど、+が付いている。 Expoアプリのファイルにある「+」の意味 Not found routesのように公式には、 Expo Router は、404 のルートを処理するために使用される特別なファイル+not-found.tsxを提供します。このルート ファイルは、ネストされたレベルからのすべての一致しないルートと一致します。 一致しないルートとは、アプリのルーティング構成で定義されていないURLやパスにユーザーがアクセスした場合、そのアクセスに対応するページが見つからない状態のことを言うらしい。 つまり+は404ページのためにあるようなものと言っても過言じゃない？ 過言かもしれないけれど、今はその理解で満足することにする。

毎回React Nativeの環境構築に苦労するので、2024年現時点でしっくりした環境構築の方法を残しておく。 立ち上げるアプリの環境 "expo": "~52.0.11", "react-native": "0.76.3", "eslint": "^8.57.0", "eslint-config-expo": "~8.0.1", Expoでアプリを立ち上げる npx create-expo-app@latest でプロジェクトを作成すると、 Creating an Expo project using the default template. To choose from all available templates pass in the --template arg: $ npx create-expo-app --template To choose from all available examples pass in the --example arg: $ npx create-expo-app --example √ What is your app named? ... my-app ✔ Downloaded and extracted project files. のようにデフォルトで作成される。 しばらくすると ✅ Your project is ready!...

Vite（読み方はヴィート）とは？ 次世代フロントエンドツール 最先端をいく開発環境を構築しましょう と謳うように下記のような特徴を持つ。 瞬時にスタートするサーバ 超高速な HMR 豊富な機能 最適化されたビルド ユニバーサルなプラグイン 完全に型定義がされている API これを読んでもピンとこないと思うので、まずは環境構築をしてみてほしい。 そのスピードに驚くこと、間違いない。 React & TypeScrpt の環境構築 $ npm create vite@latest MyApp -- --template react-ts というコマンドを叩くだけで、 Need to install the following packages: create-vite@4.2.0 Ok to proceed? (y) y √ Package name: ... MyApp Scaffolding project in C:\Project\MyApp... Done. Now run: cd MyApp npm install npm run dev 環境が構築される。 この時点でもうReactの開発環境が構築されている。 Tailwindを導入する reactにおけるcssの取り扱いは少し癖があり悩むところがあるので、何も考えずにtailwindを導入する。 npm install -D tailwindcss postcss autoprefixer npx tailwindcss init -p 上記コマンドでTailwindのインストールと設定ファイルを作成する。...