• トップページ
• TypeScript

JavaScriptのmap()で直前のアイテムを参照したい場合

JSのmap関数で今参照しているアイテムの直前のアイテムを参照したい場合についてです。

array.map((item,index,array)=>{
    ...
})

map関数で第3引数にオリジナルの配列を渡せるのでそれを使って参照すればOKです。

const array = ['test','code','hoge'];

array.map((item,index,array)=>{
  return index>0 ? console.log(item,array[index-1]) : console.log(item);
})

上の例を実行すると

"test"
"code" "test"
"hoge" "code"

と出力されます。

codepenでの実行例はこちらです。

Emotion + Reactでcssプロップがないというエラーが出たときの対策

import {jsx,css} from '@emotion/core';

emotion11で破壊的変更が入ったのでimportするライブラリ名を以下の通りに変更します

import {jsx,css} from '@emotion/react'

create-react-app を使っている場合

tsconfig.jsonのcompilerOptionsでtypesを追加

"jsx": "react-jsx",
"types": ["@emotion/react/types/css-prop"],

またファイルの冒頭に以下のコメントアウトを入れます。GitHubに書いてありました。

/** @jsxRuntime classic */
/** @jsx jsx */

React Nativeで絶対パス指定がうまくいってないないと実機で動作しなくなる現象に対する対策

絶対パス設定がうまくいっていないと実機で立ち上がらなくなります

Error: Unable to resolve module `components/ImageViewer` from `src/App.tsx`: components/ImageViewer could not be found within the project.

iOSデバイス実機でのエラー

上記のようなエラーが発生して main.jsbundleがビルドされなくなります。

以下の設定でクリアできました。

"baseUrl": "./"

またbabel.configでaliasを設定すると解決しました。

module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
  plugins: [
    [
      'module-resolver',
      {
        extensions: ['.js', '.jsx', '.ts', '.tsx', '.android.js', '.android.tsx', '.ios.js', '.ios.tsx'],
        root: ['./'],
        alias: {
          src: './src',
        },
      },
    ],
  ],
};

上記設置を適用することで 以下のようにsrcからimportできるようになります。

import { ColorButton } from 'src/components/ControlPanel/UI/ColorButton';

emotionでplaceholderのスタイルを変更する

const inputStyle = css`
&::placeholder{
font-family: serif;
}`

Emotionでエラーが出る場合に確認すべき点

CSS-in-JSのライブラリEmotionでエラーが出る場合に確認すべき点をメモしておきます

冒頭のコメントがない

/** @jsx jsx */ を忘れていませんか？

jsxコンポーネントの明示的配置

creat-react-appでEmotionとTypeScriptを後から導入した場合にエラー( jsx is not defined )が出る場合があります。

jsx; を各種importの下に追加して明示的に配置することで解決する場合があります。

詳細はこちらの記事にも書いています。

React + Emotion + TypeScriptでReferenceError: jsx is not definedのエラーが出る場合の対策

create-react-appで作ったReactのプロジェクトにCSS-in-JSのライブラリEmotionとTypeScriptを導入した際にエラーが出る場合の対策方法です。