DAY6 JavaScriptの基本を復習する2
・同期処理
処理が終わったタイミングで、JSコードが上から順に実行
・非同期処理
functionsの前にasyncを書くと、JSコードがとばされず、上から順に実行される
(例)export default async function CardSample() {
awaitを書かないとエラーになる。
(例)const response = await fetch(“https://jsonplaceholder.typicode.com/todos/1”);
const json = await response.json();
・オプショナルチェーン
間に?を配置することで、エラーでもとめず、undefinedを返す
(例)console.log(json?.description?.text);
・NULL合体演算子
console.log(“” ?? “空の説明文です。”); →空欄が表示
console.log(0 ?? “空の説明文です。”); →0が表示
・OR演算子
console.log(“” || “空の説明文です。”); →空の説明文です。が表示
console.log(0 || “空の説明文です。”); →空の説明文です。が表示
・スプレッド構文＝展開
…numbers ※…は3つ必要
buttonタグの属性をまとめ展開出来る。
(例){text}
・レスト構文＝まとめる
指定した属性の残りをまとめて展開する
(例)
- pages.js
- ui＞ButtonSample.js
export default function ButtonSample({type, text, …restOfProps}) { //省略
{text}
DAY7 Vercelにデプロイしよう
・パスエイリアス：@/* = ./src/*
:x: エイリアスなし：階層が変わると全部壊れる
import Button from “../../../components/Button”;
⭕️エイリアスあり：ディレクトリ構成が変わっても壊れにくい
import Button from “@/components/Button”;
・package.json
プロジェクトの基本情報や依存パッケージ、使用するコマンドなどを一元的に管理するためのファイル
・node_modules
例えばpackage.jsonでeslintをインストールした時に、eslintに必要なパッケージもたくさんインストールされる。
・package-lock.json
インストールしたファイルの関連
・public配下のファイル
Next.jsで処理を通さずにそのまま出力される。
そのため静的なファイルや、画像を配置する事が多い。
・app配下のファイル
そのままURLに出力される
※ただし、page.jsという名前のみページが生成される
※例外：(home)という名前のフォルダを作ると、URLにはならず(home)フォルダ
内のpage.jsが1階層繰り上げで表示される。
→TOPの情報を1つのフォルダにまとめたい時に使用できる
