JavaScriptdefinePropsにデフォルト値を与える方法【Vue3+TS】
Vue3とTypeScriptで、propsを受け取るには、下記コードのようにdefinePropsを使用します。 <script setup lang="ts"> interface Props { firstName: string; ...
JavaScript
JavaScript
JavaScriptdefinePropsの使い方【Vue3+TS】
definePropsの使い方 TypeScriptでは下記のコードのように、definePropsのジェネリクスに受け取りたいPropsを定義することができます。また、?をメンバの末尾に付け加えることで、任意のPropsを定義することがで...
AWSNuxt3(Vue)でCognito+Amplifyによる認証機能の導入
今回はNuxt3でAmazon CognitoとAWS Amplifyを使用して、ユーザーのログイン機能（認証機能）を導入する方法について紹介します。 また、今回はAmplifyで用意されているUIを使用するため、自分でUIを作成する必要は...
JavaScriptNuxt3へtailwind.cssのインストール
基本的に公式ドキュメントを参考にしていますので、困ったときは公式ドキュメントも参照してみると良いかもしれません！ STEP1：インストール 使用しているパッケージマネージャーでインストールを行なってください。 yarn add -D tai...
JavaScriptPiniaのインストール方法【Nuxt3】
STEP1：プロジェクトの準備 npx nuxi init <project-name> cd <project-name> yarn STEP2：Piniaのインストール yarn add pinia @pinia/nuxt STEP3：...
JavaScriptコピー可能なテキストにするには【react native】
テキストを長押しすると、コピーや共有といった選択肢が出てくるようにするには selectable を true にすると良い。 <Text selectable={true}> copyable Text! </Text>
JavaScriptreact nativeでQR画像の表示と保存
react-native-qrcode-svgを使用します。インストールにはreact-native-svgも必要なので忘れずに。 npm i react-native-qrcode-svg react-native-svg // npx ...
JavaScriptexpo sqliteでのSQLiteの保存先(iOS Simulator)
expo sqlite で保存したDBは以下のパスに保存されているはずです。 /Users/{ユーザー名}/Library/Developer/CoreSimulator/Devices/{ID1}/data/Containers/Data...
JavaScriptDataURLとデータの違いを意識すべし【react nativeハマりメモ】
先日、生成したQRコードをexpoのFileSystemを使って保存しようとしたら、なぜか保存できなかったのですが、DataURLと本体のデータを混同していたことが原因だったので、そのメモです。 DataURLはMDNによるとdata:,<...
JavaScriptReact Navigationのヘッダーをカスタマイズする方法
React Navigationのバージョン : 6.x 今回は Bottom Tab でやっていきます。 React Navigationのヘッダーをカスタマイズする方法として、 全てのページをカスタマイズ 個別にカスタマイズ の２通りを...