インストール ESLint まずはESLintを導入する npm install --save-dev eslint React Nativeには基本的に入っているという情報があったが、検索しても引っかからなかったので、上記コマンドでインストールした。 + "eslint": "^8.49.0", package.jsonを確認し、追加されたことを確認した。 Setting ESLint 次にESLintの設定をしていく。 npx eslint --init 上記コマンドで設定をスタートする。 You can also run this command directly using 'npm init @eslint/config'. Need to install the following packages: @eslint/create-config@0.4.6 Ok to proceed? (y) y まず、なんか追加でインストールしろと言われたのでインストールする。 その後、設定が始まる。 ? How would you like to use ESLint? (Use arrow keys) // ESLintをどのように利用しますか？ To check syntax only // 構文のみをチェック To check syntax and find problems // 構文をチェックし問題を見つける > To check syntax, find problems, and enforce code style // 構文をチェックし問題を見つけ、コードスタイルを強制します 文法をチェックするだけではなく、自動で修正までを行ってもらうことにした。...

React NativeでTailwind CSSを使用したいということで調べてみると下記２つが該当した。 tailwind-rnとnativewindの比較 tailwind-rn ☆4.1k nativewind ☆3k スターはtailwind-rnが上回っているけど、活動の多さではnativewindが上回っているようなので、nativewindを採用した。 nativewindの導入 ドキュメントも丁寧なのでなぞって行っていく。 npm i nativewind npm i --dev tailwindcss 上記コマンドで該当パッケージをインストールする。 npx tailwindcss init 次に上記コマンドでtailwind.config.jsを作成し、下記のように記載する。 // tailwind.config.js module.exports = { - content: [], + content: ["./App.{js,jsx,ts,tsx}", "./<custom directory>/**/*.{js,jsx,ts,tsx}"], theme: { extend: {}, }, plugins: [], } <custom directory>は自身のディレクトリに編集する。 次にbabel.config.jsを下記のように編集していく。 // babel.config.js module.exports = function (api) { api.cache(true); return { presets: ["babel-preset-expo"], + plugins: ["nativewind/babel"], }; }; 以上とのことなので、起動してみる。 無事に開発環境は動いている。 次にnativewindの記述を反映することができるか確認してみる。 <View style={styles.container}> <Text>Hello World!...

Index Signatureを使用することでプロパティの型を指定することができる。 例えば、 interface BodyType { [key: number]: { min: number, max: number } } const body:BodyType = { String: { min: 0, max: 230 }, 1: { min:0, max:300 } } console.log(body.String.min)} ] 上記のようにnumber型という風に明示的に宣言することで、Stringという文字列をkeyに指定したことでエラーを吐かせることが可能である。 type '{ hello: { min: number; max: number; }; 1: { min: number; max: number; }; }' is not assignable to type 'BodyType'. Object literal may only specify known properties, and 'hello' does not exist in type 'BodyType'....

前回の記事で書いたように、隙間時間で英語の勉強をしたいということで、オンライン英会話のネイティブキャンプ（Native Camp）を始めてみた。 始めたきっかけ その無料期間が終わったので、無料期間を終え思うことを書いておく。そもそもなぜ、オンライン英会話を始めたいと思ったのか。数あるオンライン英会話サービスからネイティブキャンプを選んだのかというのはざっくり前記事に書いたのだが、一応本記事にもまとめておく。 なぜ、英会話を始めようと思ったのか？ 転職の気になる企業の公用語が英語だった 職場で海外のデザイナーとやり取りしている人がかっこいい プログラミングのドキュメントなどの資源は英語での情報が多い 子どもができ、海外旅行とか行く際に少しでも危険を避けたい（過去にハワイでかもられた経験有） なぜオンライン英会話を始めようと思ったのか？ 双子似非育児中のため、決まって確保できる時間がない 通勤時の車で英語でフリートークするのが最も効率的だと思ったから なぜ、ネイティブキャンプを選んだのか？ 時間を指定しない即時レッスンが可能だった レッスン回数無制限だった 無料お試し期間が7日間ついていた 初回登録でAmazonギフト券5000円分がもらえた 特に、時間指定なしの即時レッスン、回数無制限はネイティブキャンプのみだったので、正直迷うことなく、ネイティブキャンプに決めた。 無料期間終了後の感想 そして無料期間を終えた今、思うことを書いていく。 そもそも車の中で英語でフリートークして楽しくめきめき英語力向上という前提が著しく間違えていた。初回だしお手並み拝見で最初のレッスンを受けてみたが、何を言っているかわからない。相手は当然英語しか話さないので、何とか食らいつく。これまで習ってきた英語で何とか聞き取り、何とかついていく。それだけで精一杯なのである。 こんなんじゃフリートークなんて夢のまた夢である。想像していたレッスン方法ではないけど、英語しか話せない相手に食い下がりつつ、レッスンを受けるというのもそれはそれで英語力の向上が見込める気がする。というのも複数回レッスンを受けているとなんとなく会話が通じるようになってきたのである。これはきっと続けていれば、30年間無理だった英語がマスターできるかもしれないという光が少し見えた無料期間だった。 そういうわけでポジティブな感情を抱き、無料期間を終えた。当然、本会員登録もした。 無料期間終了後の情報まとめ ネイティブキャンプの情報をまとめてみる。 ポジティブなところ 先生が英語しか話さない（甘えることができない環境に身を置ける） 音声のみでOK キャラクター先生がいる（パンダのFanFan先生最高、緊張せずに会話できる） 時間に縛られない即時レッスン（実力的に車の中は無理だけど、子どもたちが寝た深夜にレッスン可能） ネガティブなところ 今のところ見つけられていない 今回の無料期間で5回のレッスンを受けた。7日間で5回だったので、思ったより受けられていない。ただこれは時期的な問題で、来週引っ越しを控えており、荷造りに時間を取られているのである。間違いなく、始めるタイミングを間違えた。そこだけは後悔しているが、ネガティブキャンプに出会えたことは幸運だった。時間のない人には特におすすめできる。次は一か月後の感想を書く、その時はもしかすると英語で記事を書いているかもしれないし、書いていないかもしれない。 、

TypeScript 関係をインストールする。 npm install -D @tsconfig/react-native @types/jest @types/react @types/react-test-renderer typescript 上記コマンドでTypeScriptの依存パッケージをインストールする。 完了するとPackage.jsonが "devDependencies": { "@babel/core": "^7.20.0" }, から "devDependencies": { "@babel/core": "^7.20.0", "@tsconfig/react-native": "^3.0.2", "@types/jest": "^29.5.4", "@types/react": "^18.2.21", "@types/react-test-renderer": "^18.0.1", "typescript": "^5.2.2" }, に更新される。 tsconfig.jsonを作成する Appのルートにtsconfig.jsonを作成し、 { "extends": "@tsconfig/react-native/tsconfig.json" } を記述する。 Tsxファイルの作成と動作確認 最後にJavascriptファイルを*.tsxに変換する。 You should leave the ./index.js entrypoint file as it is otherwise you may run into an issue when it comes to bundling a production build. と公式に書かれていたが、そもそもindex.jsを見つけることができなかったからドキュメントが古い？ App.tsxに型のない関数を書くとtsエラーが出たので、うまく機能していると思われる。...