先に知っておきたいWebの基礎

まずは全部ではなく、使う部分から

HTMLでは見出し、リンク、ボタン、フォーム。CSSでは余白、ボックスモデル、FlexboxまたはGrid、画面幅への対応を学びます。見た目のために何でもdivにせず、意味に合ったタグを使う習慣をつけましょう。

Reactのコードを読むためのJavaScript

const、関数、オブジェクト、配列、分割代入、map・filter、import・exportが頻出です。条件分岐、テンプレート文字列、async/awaitも必要になります。TypeScriptは有用ですが、この教材はJavaScriptとJSXで進められます。

ブラウザーの外でもJavaScriptは動く

ブラウザーはHTTPリクエストを送り、サーバーはHTMLやJSONなどを返します。Node.jsはサーバー側でJavaScriptを動かす環境です。ブラウザーのwindowやlocalStorageがサーバーにもある、とは考えないでください。

• URL：場所を示す
• GET：情報を取得する用途
• POST：送信や更新の用途
• ステータスコード：成功や失敗を伝える

配列を絞り込み、表示する値を作る

const notes = [
  { id: 1, title: 'HTML', done: true },
  { id: 2, title: 'React', done: false },
]

const remaining = notes
  .filter((note) => !note.done)
  .map((note) => note.title)

console.log(remaining) // ['React']

ブラウザーのコンソールでも実行できる、Next.jsに依存しない例です。