JavaScript/Reactの見直し用記事

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

以下の違いって何？って質問された時微妙な答えをしてしまったのでコレもメモ
**フロントエンドとは？**
- HTMLの構築
- バックエンドへAPIを呼び出す
- データの返却を受け取る

**バックエンドとは？**
- データベースとの接続
- フロントエンドからの要求に対応するデータを返すAPIを用意
- データをフロントエンドへ渡す
# DOMとは
「Document Object Model」の略。HTMLとJavaScriptをつなぐ役割をもつ。
階層構造を取り、各要素を表すノードで表現されることが多い。

- [JavaScript初心者でもすぐわかる！DOMとは何か？](https://eng-entrance.com/what-is-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を入れるまで](https://qiita.com/Alex_mht_code/items/422f5ce10d9c9d5729b7)

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

- [Node.js / npm をインストール (Mac環境)](https://qiita.com/PolarBear/items/62c0416492810b7ecf7c)

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

- [Mac nodebrew で Node.js をインストールする手順](https://qiita.com/ucan-lab/items/517ee13a2f8769ab866c)

#JavaScript
####1個目の書き方(関数式)
関数を宣言する際に関数名を記述しなくても良いので、無名関数や匿名関数とも呼ばれる方法

```:関数式
const 定数名 = function(仮引数, 仮引数, ...) {
  処理;
  return 返り値;
};
```
```:関数式
let 変数名 = function(仮引数, 仮引数, ...) {
  処理;
  return 返り値;
};
```
```:呼び出し
定数名(実引数, 実引数, ...);
```
```javascript:例
const name = function(x) {
  console.log(x) // 出力: 香風智乃
};
name("香風智乃")
```
####2個目の書き方(関数宣言)
関数をそのまま宣言することでプログラム内で利用することができるようにする方法

```:関数宣言
function 関数名(仮引数, 仮引数, ...) {
  処理;
  return 返り値;
}
```
```:呼び出し
関数名(実引数, 実引数, ...);
```
```javascript:例
function dispMsg(str){
  console.log(str); // 出力: 保登心愛
}

dispMsg("保登心愛");
```
####3個目の書き方(アロー関数)
ES2015(ES6)から導入され、`function`を使わない代わりに、`=>`で関数を表現することができる

```:アロー関数
const 定数名 = (仮引数, 仮引数, ...) => {
  処理;
  return 返り値;
}
```
```:アロー関数
let 変数名 = (仮引数, 仮引数, ...) => {
  処理;
  return 返り値;
}
```
```:呼び出し
定数名(実引数, 実引数, ...);
```
```javascript:例
const name = (x) => {
    console.log(x)
}
name("香風智乃")
```
##参考記事
###JavaScriptのthisの理解
- [JavaScript の this を理解する多分一番分かりやすい説明](https://qiita.com/takkyun/items/c6e2f2cf25327299cf03)
- [JavaScriptの「this」は「4種類」？？](https://qiita.com/takeharu/items/9935ce476a17d6258e27)

###アロー関数式
- [アロー関数式を学ぶついでにthisも復習する話](https://qiita.com/mejileben/items/69e5facdb60781927929)
- [JavaScript アロー関数を説明するよ](https://qiita.com/may88seiji/items/4a49c7c78b55d75d693b)
- [アロー関数(MDN web docs)](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Functions/Arrow_functions)

###prototype
- [プロトタイプ(prototype)の使い方と継承まとめ！](https://www.sejuku.net/blog/47722)

###Object
- [JavaScriptでObjectを使う！プロパティ・メソッドの活用術](https://www.sejuku.net/blog/61326)

###method
- [JavaScriptでメソッドを使う方法](https://techacademy.jp/magazine/5562)

###コールバック関数
- [JavaScriptの「コールバック関数」とは一体なんなのか](https://sbfl.net/blog/2019/02/08/javascript-callback-func/)

###非同期処理
- [Promiseとasync/awaitでJavaScriptの非同期処理をシンプルに記述する](https://sbfl.net/blog/2016/07/13/simplifying-async-code-with-promise-and-async-await/#Promise-3)
- [Promiseが分かれば簡単！async, await](https://qiita.com/valley/items/dd37deb77f06eb6c451c) 

###テンプレートリテラル
- [JavaScript の テンプレートリテラル を極める！](https://qiita.com/kura07/items/c9fa858870ad56dfec12)

#React
[Create React App](https://github.com/facebook/create-react-app)

```shell:create-react-app
$ npx create-react-app アプリ名
$ cd アプリ名
$ yarn start 
```
- [Getting Started(公式サイト)](https://ja.reactjs.org/docs/getting-started.html)
- [覚えておきたいReactの実装でよく使う基本的な構文（書き方）](https://mae.chab.in/archives/2956)

###フォーム
- [フォーム(公式サイト)](https://ja.reactjs.org/docs/forms.html#controlled-components)

###なぜコールバック関数を使用する際はアロー関数を使わないとエラーになるのか
- [なぜReactではアロー関数を使うのか](https://qiita.com/nb_tomo/items/f0d9855e6b55b40b35b8)

###React-Redux
- [Quick Start(React Redux 公式サイト)](https://react-redux.js.org/introduction/quick-start)
- [React-Reduxの動きがよくわからなくなるのでまとめた](https://qiita.com/RitaChan/items/07f0cac59e70309571ff)
- [React + Reduxで作ったIsomorphic(Universal) JSなサービス開発](https://engineer.recruit-lifestyle.co.jp/techblog/2016-11-16-isomorphic-javascript/)

###非同期処理
- [reduxで非同期処理をするいくつかの方法](https://qiita.com/muijp/items/63386fd65c7e9f06f5d4)

###React Hooks
- [公式サイト フックの導入](https://ja.reactjs.org/docs/hooks-intro.html)
- [🎉React 16.8: 正式版となったReact Hooksを今さら総ざらいする](https://qiita.com/uhyo/items/246fb1f30acfeb7699da)
- [最近Reactを始めた人向けのReact Hooks入門](https://sbfl.net/blog/2019/11/12/react-hooks-introduction/)