#はじめに
いろんな言語をやっているとどうしても忘れてしまうのでよく忘れるものをメモ
以下の違いって何？って質問された時微妙な答えをしてしまったのでコレもメモ
フロントエンドとは？
- HTMLの構築
- バックエンドへAPIを呼び出す
- データの返却を受け取る
バックエンドとは？
- データベースとの接続
- フロントエンドからの要求に対応するデータを返すAPIを用意
- データをフロントエンドへ渡す
DOMとは
「Document Object Model」の略。HTMLとJavaScriptをつなぐ役割をもつ。
階層構造を取り、各要素を表すノードで表現されることが多い。
#Node.jsとは
JavaScript アプリケーションのプラットフォームでサーバーサイドのJavaScript
ReactなどのJSフレームワークを導入する際にはNode.jsが必要となる。(Node.jsが支える側に)
Node.jsを使わずにReactを利用するには、CDN経由で読み込む。
node.jsのバージョン管理はnodebrewを使う。これはhomebrewでインストールする。
homebrew自体でもでもnodeは管理できるがおすすめされない。
#npmとは
「Node Package Manager」の略。Node.jsのパッケージを管理するツールである。
nodebrewからNode.jsをインストールすると付いてくる。
#yarnとは
npmと同様にJavaScriptのパッケージ管理ツール。
高速で、信頼性が高く、安全性も高い。
homebrewからインストールする。
#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
###Object
###method
###コールバック関数
###非同期処理
###テンプレートリテラル
#React
Create React App
$ npx create-react-app アプリ名
$ cd アプリ名
$ yarn start
###フォーム
###なぜコールバック関数を使用する際はアロー関数を使わないとエラーになるのか
###React-Redux
- Quick Start(React Redux 公式サイト)
- React-Reduxの動きがよくわからなくなるのでまとめた
- React + Reduxで作ったIsomorphic(Universal) JSなサービス開発
###非同期処理
###React Hooks