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

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

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の理解

###アロー関数式

###prototype

プロトタイプ(prototype)の使い方と継承まとめ！

###Object

JavaScriptでObjectを使う！プロパティ・メソッドの活用術

###method

JavaScriptでメソッドを使う方法

###コールバック関数

JavaScriptの「コールバック関数」とは一体なんなのか

###非同期処理

###テンプレートリテラル

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

#React
Create React App

create-react-app

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

###フォーム

フォーム(公式サイト)

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

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

###React-Redux

###非同期処理

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

###React Hooks