Reactでよく使うメソッドまとめ

nao

最近Reactを学び始めたんだけどよく使う関数について教えてほしい。

こんな疑問にお答えします。

ReactはJavaScriptのフレームワークで、近年はJavaScriptのフレームワークの中で

最も人気のあるフレームワークです。

今回はその中で、僕がよく使う関数についてまとめました。

map

map関数はJavaScriptでもよく使うメソッドではないでしょうか。

map() メソッドは、与えられた関数を配列のすべての要素に対して呼び出し、その結果からなる新しい配列を生成します。

引用：MDM

 App.js
import "./styles.css";
export default function App() {
 // map
 // 与えられた関数を配列の全ての要素に対して呼び出し
 // その結果からなる新しい配列を生成する
 const list = [1, 2, 3, 4];
 const dataList = [
   {
     name: "taro",
     age: 21
   },
   {
     name: "ziro",
     age: 32
   }
 ];
 return (
   <div className="App">
     <h1>map-practice</h1>
     {list.map((number) => (
       <div>{number * 2}</div>
       // 2 4 6 8
     ))}
     {dataList.map((data) => (
       <div>
         {data.name}
         <span>{data.age}</span>
         {/* taro 21 ziro 32 */}
       </div>
     ))}
   </div>
 );
}
 

filter

filterメソッドをJavaScriptでよく使うメソッドですよね。

与えられた関数によって実装されたテストに合格した全ての配列からなる新しい配列を生成する

引用：MDM

 App.js
import "./styles.css";
 
export default function App() {
 // filter
 // 与えられた関数によって実装されたテストに合格した全ての配列からなる新しい配列を生成する
 const words = [
   "spray",
   "limit",
   "elite",
   "exuberant",
   "destruction",
   "present"
 ];
 const result = words.filter((word) => word.length < 6);
 console.log(result);
 // ["spray", "limit", "elite"]
 return (
   <div className="App">
     <h1>filter</h1>
     {/* 条件を満たさない要素は削除される */}
   </div>
 );
}

splice

splice() メソッドは、その場で既存の要素を取り除いたり、置き換えたり、新しい要素を追加したりすることで、配列の内容を変更します。

引用：MDM

 
import "./styles.css";
 
export default function App() {
 // splice
 // 既存の要素を取り除いたり、置き換えたり、新しい要素を追加したりすることで、配列の内容を変更する
 const items = ["item1", "item2", "item3"];
 
 const remove = items.splice(0, 1);
 items.splice(1, 0, remove[0]);
 //  ["item2", "item1", "item3"]
 return (
   <div className="App">
     <h1>splice</h1>
   </div>
 );
}

三項演算子

条件 (三項) 演算子は JavaScript では唯一の、3 つのオペランドをとる演算子です。条件に続いて疑問符 (?)、そして条件が真値であった場合に実行する式、コロン (:) が続き、条件が偽値であった場合に実行する式が最後に来ます。この演算子は、 if 文の代替としてよく用いられます。

引用：MDN

 App.js
import "./styles.css";
 
export default function App() {
 // 三項演算子
 //
 return (
   <div className="App">
     <h1>三項演算子</h1>
     {true ? <h1>true</h1> : <h1>false</h1>}
   </div>
 );
}

まとめ

今回はReactでよく使うメソッドについてまとめました。

Reactだからといってメソッドに関してはJavaScriptとさほど大差はないです。

今後も勉強していく中でよく使うメソッドが出てきたらこの記事にまとめるので

もし他にもあるよという方はコメントしてください！