この2023年10月13日のQiita記事が大変優秀なwebフロント開発をする時のスキル習得ロードマップになり得ると思いました！右脳派のわれわれも、知識として知っておくと開発現場でのリレーションがばっちりになるはずです。

上記の記事ではDOM(htmlとcss)の解説までで、その後に以下の項目を順を追って解説していくそうです。次回が待ちきれないのでGPT-4ちゃんに次回予想を書いていただきました！

Javascript

javascriptの大部分はオブジェクトで出来ている

JavaScriptはオブジェクト指向プログラミング言語であり、その多くの機能やデータ構造はオブジェクトで構成されています。オブジェクトとは、プロパティ（属性や値）とメソッド（関数）をまとめたものです。例えば、犬を表すオブジェクトがあれば、そのプロパティには「名前」や「種類」、メソッドには「吠える()」などがあります。

想像してみてください、JavaScriptの世界は一つの大きな町です。この町には様々な建物（オブジェクト）があります。例えば、"カフェ"（Arrayオブジェクト）ではコーヒー（要素）を提供し、"図書館"（Objectオブジェクト）では本（プロパティ）と読書サービス（メソッド）があります。建物のオーナー（プログラマー）は、どんなサービスを提供するのか（メソッド）、何を置くのか（プロパティ）を自由に決められます。

let dog = {
  name: "Pochi",
  breed: "Shiba Inu",
  bark: function() {
    console.log("Woof! Woof!");
  }
};

このようにして、オブジェクトを使うことでデータと処理を一つにまとめることができ、コードが読みやすく、管理しやすくなります。

APIの理解とJSONの処理

API（Application Programming Interface）は、ソフトウェア同士が互いに通信するための接点や規約です。例えば、天気予報のデータを提供するWebサービスがあれば、そのAPIを使ってデータを取得できます。

JSON（JavaScript Object Notation）は、データ交換のフォーマットの一つです。APIを通じてデータを取得する際、多くの場合このJSON形式でデータが送られてきます。

APIはまるで町の情報センターのようなものです。外の町（他のサービスやデータベース）から最新の情報（データ）を持ってくる役割があります。そしてその情報は通常、手紙（JSON）の形で送られてきます。

// 町の情報センター（API）から手紙（JSON）を受け取る
fetch('https://town-info-center.com/news')
  .then(response => response.json())
  .then(data => {
    console.log(data);
  });

Promise, async/awaitの理解

JavaScriptでは非同期処理を行うための手法として、Promiseとasync/awaitがあります。Promiseは未来に発生するであろう値（またはエラー）を表現します。

Promiseとは、まるで「約束の手形」です。例えば、"カフェ"で注文をすると、店員（Promiseオブジェクト）は「すぐに用意しますから少々お待ちを（約束）」と言います。その後、コーヒーが出来上がったら（resolve）、お客さんに渡されます。

let coffeeOrder = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve("Your coffee is ready!");
  }, 1000);
});

coffeeOrder.then(message => {
  console.log(message);
});

async/awaitは、Promiseをより直感的に書くための構文です。つまり、async/awaitはその約束をもっと分かりやすく、直感的に扱えるようにするための"特別な手続き"です。

async function fetchData() {
  let response = await fetch('https://api.example.com/data');
  let data = await response.json();
  console.log(data);
}

ファンクションはいつ動くのか、同期、非同期処理の理解

avaScriptの関数は通常、コードが上から下に実行される順に動きます（同期処理）。しかし、非同期処理（例：APIからのデータ取得、タイマーなど）では、特定の条件や時間が満たされた後に実行されます。
同期処理では、一つのタスクが完了するまで次のタスクは待たされます。非同期処理では、待つ間に他のタスクが実行できるため、効率的な操作が可能です。

続きはメンバーシップ会員になって読んでみてください！