はじめに

いろんな言語をやっているとどうしても忘れてしまうのでよく忘れるものをメモ

以下の違いって何？って質問された時微妙な答えをしてしまったのでコレもメモ
フロントエンドとは？

HTMLの構築
バックエンドへAPIを呼び出す
データの返却を受け取る

バックエンドとは？

データベースとの接続
フロントエンドからの要求に対応するデータを返すAPIを用意
データをフロントエンドへ渡す

DOMとは

「Document Object Model」の略。HTMLとJavaScriptをつなぐ役割をもつ。
階層構造を取り、各要素を表すノードで表現されることが多い。

JavaScript初心者でもすぐわかる！DOMとは何か？

Node.jsとは

JavaScript アプリケーションのプラットフォームでサーバーサイドのJavaScript
ReactなどのJSフレームワークを導入する際にはNode.jsが必要となる。(Node.jsが支える側に)
Node.jsを使わずにReactを利用するには、CDN経由で読み込む。

node.jsのバージョン管理はnodebrewを使う。これはhomebrewでインストールする。
homebrew自体でもでもnodeは管理できるがおすすめされない。

macのhomebrewでnodebrew入れてからnode.jsを入れるまで

npmとは

「Node Package Manager」の略。Node.jsのパッケージを管理するツールである。
nodebrewからNode.jsをインストールすると付いてくる。

Node.js / npm をインストール (Mac環境)

yarnとは

npmと同様にJavaScriptのパッケージ管理ツール。
高速で、信頼性が高く、安全性も高い。
homebrewからインストールする。

Mac nodebrew で Node.js をインストールする手順

JavaScript

1個目の書き方(関数式)

関数を宣言する際に関数名を記述しなくても良いので、無名関数や匿名関数とも呼ばれる方法

関数式

const 定数名 = function(仮引数, 仮引数, ...) {
  処理;
  return 返り値;
};

関数式

let 変数名 = function(仮引数, 仮引数, ...) {
  処理;
  return 返り値;
};

呼び出し

定数名(実引数, 実引数, ...);

例

const name = function(x) {
  console.log(x) // 出力: 香風智乃
};
name("香風智乃")

2個目の書き方(関数宣言)

関数をそのまま宣言することでプログラム内で利用することができるようにする方法

関数宣言

function 関数名(仮引数, 仮引数, ...) {
  処理;
  return 返り値;
}

呼び出し

関数名(実引数, 実引数, ...);

例

function dispMsg(str){
  console.log(str); // 出力: 保登心愛
}

dispMsg("保登心愛");

3個目の書き方(アロー関数)

ES2015(ES6)から導入され、functionを使わない代わりに、=>で関数を表現することができる

アロー関数

const 定数名 = (仮引数, 仮引数, ...) => {
  処理;
  return 返り値;
}

アロー関数

let 変数名 = (仮引数, 仮引数, ...) => {
  処理;
  return 返り値;
}

呼び出し

定数名(実引数, 実引数, ...);

例

const name = (x) => {
    console.log(x)
}
name("香風智乃")

参考記事

JavaScriptのthisの理解

アロー関数式

非同期処理

テンプレートリテラル

JavaScript のテンプレートリテラルを極める！

React

Create React App

create-react-app

$ npx create-react-app アプリ名
$ cd アプリ名
$ yarn start

フォーム

フォーム(公式サイト)

なぜコールバック関数を使用する際はアロー関数を使わないとエラーになるのか

なぜReactではアロー関数を使うのか

React-Redux

非同期処理

reduxで非同期処理をするいくつかの方法

React Hooks