Reactに挑戦した1年【一蘭アプリのポイントは半替え玉がコスパ最強】

挑戦するようになったキッカケ

弊社ポータルサイトのUI大幅リニューアルがキッカケ。
10年以上djangoテンプレート(makoテンプレートも少々)を使ってhtml, css, backbone.jsで頑張ってきたが、リニューアルの際にモダンフロントエンドを採用しよう！ということで思い切ってReactに挑戦（フレームワークはNext.js）。

Reactのつまずきポイント

①keyにindexを使うのは良くない
良くない例↓

let todos = [
    { id: 1, name: "shopping" },
    { id: 2, name: "working" },
    { id: 3, name: "talking" }
  ];
const todoItems = todos.map((todo, index) =>
  // keyにindexを指定しているが良くない
  <li key={index}>
    {todo.name}
  </li>
);

良い例↓

const todoItems = todos.map((todo) =>
  // keyには一意に決まるものを指定する
  <li key={todo.id}>
    {todo.name}
  </li>
);

公式ドキュメントにもあるが、配列の並び替えや要素の追加・削除をする可能性がある場合は期待した動作にならないので注意

②配列を更新したのに再レンダリングされない
良くない例↓

const [sampleArray, setSampleArray] = useState([0, 1, 2]);
copyArray = sampleArray; // stateの配列をコピー(参照コピー)
copyArray[0] = copyArray[0] + 1; // 配列を更新
setSampleArray(copyArray); // 再レンダリング

良い例↓

copyArray = sampleArray.slice(0, sampleArray.length); // stateの配列を値コピーする

公式ドキュメントにもあるが、参照コピーだとstateによる再レンダリングが行われないので注意

好きなラーメン

小腹が空き始め、夜中11時ごろ食べにいく一蘭のラーメンが至高の一杯。
多少の罪悪感を感じながらも、店に入れば替え玉をガッツリ頼んでしまう。
麺固め。ニンニク、秘伝のタレ多め。
ネギは白。たまに白と青のハーフ。
スープからいただきます。

---

ちなみに、一蘭公式アプリのポイントは半替え玉がコスパ良し。
替え玉(210円・60ポイント)と半替え玉(150円・30ポイント)を1ポイントあたり円で算出した。
替え玉→1ポイントあたり3.5円
半替え玉→1ポイントあたり5.0円