前提
React（正確にはNext.js）を使用してのWebアプリ開発を目標に学習を取り組むことにした。Webサイト制作の学習経験があり多少のJSの知識はあるがReactを学習するにあたって必要なJSの知識を学びなおした。
学習方法
主にChatGPTとの対話形式で学習した。説明→問題→解答添削→質問のような形で進めていった。
- ES6による記述について
- 真偽値・演算子
- map
- filter
- スプレット構文
- 分割代入
- 非同期処理
ES6による記述について
以下で紹介されるメソッドはES6から追加されたものもあるが、個人的にJSを触り始めた時にはある程度浸透していた。ES6で追加されたアロー関数など以前はそのまま記述していたが、今回の学習を機に短縮系の記述も意識して取り組んでみた。個人的に忘れがちな注意点などをここにまとめておく。
//アロー関数
const func = () => {
console.log("北斗神拳");
}
//↑短縮系、{}の中が1行の場合
const func = () => console.log("北斗神拳");
//return文
const func = () => {
return "北斗神拳";
}
//↑短縮系、{}の中がreturn文1行の場合
const func = () => "北斗神拳";
//コールバック関数
const arr = ["お前はもう", "もう", "死んでいる"];
arr.map((str) => {
console.log(str);
});
//↑短縮系、引数が1つの場合
arr.map(str => console.log(str));
真偽値・演算子
真偽値
tureかfalseかReact（正確にはNext.js）を使用してのWebアプリ開発を目標に学習を取り組むことにした。Webサイト制作の学習経験があり多少のJSの知識はあるがReactを学習するにあたって必要なJSの知識を学びなおした。
学習方法
主にChatGPTとの対話形式で学習した。説明→問題→解答添削→質問のような形で進めていった。
- ES6による記述について
- 真偽値・演算子
- map
- filter
- スプレット構文
- 分割代入
- 非同期処理
ES6による記述について
以下で紹介されるメソッドはES6から追加されたものもあるが、個人的にJSを触り始めた時にはある程度浸透していた。ES6で追加されたアロー関数など以前はそのまま記述していたが、今回の学習を機に短縮系の記述も意識して取り組んでみた。個人的に忘れがちな注意点などをここにまとめておく。
//アロー関数
const func = () => {
console.log("北斗神拳");
}
//↑短縮系、{}の中が1行の場合
const func = () => console.log("北斗神拳");
//return文
const func = () => {
return "北斗神拳";
}
//↑短縮系、{}の中がreturn文1行の場合
const func = () => "北斗神拳";
//コールバック関数
const arr = ["お前はもう", "もう", "死んでいる"];
arr.map((str) => {
console.log(str);
});
//↑短縮系、引数が1つの場合
arr.map(str => console.log(str));
真偽値・演算子
&& ... 両方ともtrueの時、結果を返す
|| ... 片方または両方ともtureの時、結果を返す
!= ... 真偽値を反転させる
三項演算子 ... if文の簡易版
const bool = true;
const inversion = (booler) => !=booler;
//結果はfalseとなる
inversion(bool);
//?がtureの時の処理、:がfalseの時の処理
const answer (booler) => {
booler ? "trueです" : "falseです";
}
//結果はtrueですとなる
answer(bool);
map
配列全体にアクセスして新しい配列を返す（非破壊的）
const arr = ["You", "は", "Shock!"];
arr.map(str => console.log(str));
/*
You
は
Shock!
↑と出力される
*/
filter
配列全体にアクセスし該当するものだけ抽出し、新しい配列を返す（非破壊的）
const arr = ["青", "碧", "蒼井そら"];
const arr.map(target => console.log(target === "蒼井そら"));
//蒼井そらが出力される
スプレット構文
配列やオブジェクトをコピーして新たに作成し、特定のプロパティを変更したり追加できる。
const duelist = [
{
name: "Yu-gi", wife: "Black Magician";
},
{
name: "Kaiba", wife: "Blue Eyes White Dragon";
},
{
name: "Jounouchi", wife: "Red Eyes Black Dragon"
},
]
const updateDuelist = [...duelist, {name: "Bakura", wife: "Picachu"}];
分割代入
新しい変数名をつけて配列やオブジェクトから必要なプロパティだけを取り出す。
const arr = [1,2,3];
const [a,b,c] = arr;
非同期処理
Promise
順番にコードを実行させる記述
APIの接続に用いる
async/await
Promiseを簡単に記述できるようにしたもの
苦労した部分
- 配列やオブジェクトがネストしてくると分割代入とスプレット構文がごちゃ混ぜになる
- AIはやはり全能ではない。知識はあるがおバカ。指摘した間違えを何回も繰り返すこともある。メイン教材の補佐として使うのが良さそう。