[備忘録]map関数とuseState,条件(3項)演算子の復習

前書き

どうも皆さん！見習いエンジニアの佐野です！
最近はメガベンチャーの選考を受けつつインターンを頑張っているのですが、やはりメガベンチャーの選考は難しいですねw
コーディングテストがなかなか突破できません。
また、運よくコーディングテストを突破できた会社もあるのですが、面接の時にコーディングテストの内容について詰められたらどうしようかと戦々恐々です😭
まあ、未経験文系エンジニアなので落とされても文句は言えませんね
前書きはこのくらいにして、今回はmap関数とuseState、条件演算子の復習をしていきたいと思います！

本文

map関数

map関数の厳格な定義に関しては各自で調べていただきたいのですが、個人的には　シーケンスの構成要素に対してひとつずつ処理を行わせることができる関数だと思っています。もっと簡単にいうと、オブジェクトの中にあるデータを１つずつ取り出すことです！これを使うことで、繰り返しの処理などを簡潔に行えます。具体的には以下のようなコードが例です。

function Section({ id, title, children }) {
  return (
    <section id={id} className="box">
      <h1 className="title">{title}</h1>
      {children}
    </section>
  );
}

function DefinitionList({ items }) {
  return (
    <dl className="definition">
      {items.map(item => (
        <div key={item.title}>
          <dt className="definition-title">
            {item.title}
          </dt>
          <dd className="definition-content">
            {item.content}
          </dd>
        </div>
      ))}
    </dl>
  );
}





export default function App() {
  return (
    <>
      <Section id="react" title="React">
      <DefinitionList
        items={[
          { title: 'Initial release', content: '2013/5' },
          { title: 'Github stars', content: '147,940' }
        ]}
      />
    </Section>
    <Section id="vue" title="Vue.js">
      <DefinitionList
        items={[
          { title: 'Initial release', content: '2014/2' },
          { title: 'Github stars', content: '163,165' }
        ]}
      />
    </Section>
    <Section id="angular" title="Angular">
      <DefinitionList
        items={[
          { title: 'Initial release', content: '2016/9' },
          { title: 'Github stars', content: '60,571' }
        ]}
      />
    </Section>
    </>
  )
}

参考：https://www.hypertextcandy.com/react-tutorial-02-jsx

map関数を使うときは、関数の引数のところにまずオブジェクトを入れ、その後にmap関数を用いて一度取り出します。その後に、任意の処理を行なっていく感じです！上記のこの部分ですね

function DefinitionList({ items }) {
  return (
    <dl className="definition">
      {items.map(item => (
        <div key={item.title}>
          <dt className="definition-title">
            {item.title}
          </dt>
          <dd className="definition-content">
            {item.content}
          </dd>
        </div>
      ))}
    </dl>
  );
}

useState

つぎはuseStateです。reactを使う上では避けては通れないhooksの基本的な機能の一つですね。
基本的には、データを変化させたい時に使います。
具体的には、カウンターを作ったりする時に使うものです。以下のコードが例です。

export default function App() {
  const [num, setNum] = useState(0);

  const plus = () => setNum(num + 1);
  const reset =() => setNum(num=0);
  const minus = () => setNum(num-1);
  return (
    <>
      <div>今の値：{num}</div>
      <button onClick={plus}>+1</button>
      <button onClick={reset}>reset</button>
      <button onClick={minus}>-1</button>
    </>
  )
}

三つボタンがあり、それぞれを押すと、ボタン以下いてある処理が行われます。
自分はまだ未熟なのでこれぐらいしか例を出せませんが、こ応用していくと色々な機能が作れます

条件(3項)演算子

最後に条件演算子を紹介します。この演算子の使い方は、条件に基づいて　２つの値のうちの1つを選択します。

条件　?　値１：　値２

条件が真なら値１が、偽なら値２が採用されるものです。条件に当てはまるか否か、という処理を行う時に使います。

最後に

てことで今回はここまでにします！
やっぱプログラミングは難しいですね(小並感)
もし最後まで見てくれた方がいましたらLGTMをいただけると幸いです。
ではまた違う記事で！