Reactでstateを定義する際にconstructor(引数){ super(引数); }を記述する理由
なぜsuper(props) を書くの? - React界のカリスマ「Dan Abramov」のブログ - Qiita
プロゲートのReactのスライドでも、youtubeにReactの解説をあげられている人も
state定義時に
constructor(props) {
super(props);
}
のように書いたとき、「これは定型文みたいなもんだからとりあえず覚えといて」みたいなことを言われたのですが、これって何やっとんねんっていうのが気になってしまったので調べてアウトプットしてみやす！！
前提として
・JavaScriptではsuperは親クラスのコンストラクタを参照する。
・下の例では、親クラスはReact.Componentクラス
・JavaScriptでは、コンストラクターで親のコンストラクターを呼ぶまでは、「this」は使わせてくれない
JavaScriptがthisを使用する前に親のコンストラクターの実行を強制させるのには、理由がある。
super(props)以前にthisの使用が許可されていた場合のことを考えると、以下のような表現が可能になる。
コンストラクタで、同一クラスにあるgreetColleaguesメソッドを呼び出している。
しかし数ヶ月経ったとき、以下のような処理をメソッド内に書き足すかもしれない。
しかしこれでは、this.greetColleagues() はsuper(props)以前に定義されている為、this.nameは定義されていないとエラーが出てしまう。
なのでこのようなミスを事前に防ぐために、javascriptではthisを使用したい場合に、superの呼び出しを強制している。
この制限はクラス定義されたReactのコンポーネントにも適用される。
javascriptの基礎知識
javascriptの変数と定数
変数の定義方法
1, let 変数名 = "代入する値";
※（変数名 = "再代入する値";）とすれば後から変数の中身を変更できる。
定数の定義方法
2, const 定数名 = "代入する値";
※ 後から中身を変更することはできない
javascriptの関数
javascriptにおける「関数」とは「いくつかの処理をまとめたもの」である。
関数の定義は、
const 関数名 = function() {
//まとめたい処理を記述
};
のように行う。
※関数を定数に代入することで関数を定義している
関数名();
のように書くことで、関数を呼び出すことができる。
アロー関数
関数の定義は、
const 関数名 = function() {
//まとめたい処理を記述
};
この方法以外に、
const 関数名 = () => {
//まとめたい処理を記述
};
とすることでも定義することができる。
これはjavascriptのバージョンES6から導入された新しい書き方で、「function」を用いて関数を定義するよりも、シンプルに書くことができる。
この書き方を「アロー関数」と呼ぶ。
呼び出し方はどちらも同じ。
javascriptの引数
javascriptにおける「引数」とは関数に与える追加情報のようなものである。
関数を呼び出すときに、一緒に値を渡すことで、関数の中でその値を利用することができる。
引数を受け取る関数の定義
const 関数名 = (引数名) => {
//処理
};
引数を受け取る関数の呼び出し
関数名(値);
関数内で引数を使用する
const introduce = (name) => {
console.log("こんにちは");
console.log(`私は${name}です`);
};
introduce("さかい");
→こんにちは
私は酒井です
introduce("ゆう");
→こんにちは
私はゆうです
関数を呼び出す際の引数によって出力結果が変わる。
複数の引数を受け取る関数
const 定数名 = (第一引数, 第二引数, ...) => {
//処理
};
複数の引数を受け取る関数の呼び出し
const introduce = (name, age) => {
console.log(`私は${name}です`);
console.log(`私は${age}歳です`);
};
introdece("さかいゆう", 18);
→私はさかいゆうです
私は18歳です
戻り値のある関数
呼び出し元で受け取る関数の処理結果を「戻り値」と呼ぶ
関数の中でreturnを記述すると、呼び出し元で値を受け取れるようになる
「return 値;」と書くことで、関数はその値を戻り値として返す。
const add = (a, b) => {
return a + b;
};
この場合、aとbを足した値が戻り値として呼び出し元に返る。
戻り値を受け取る
呼び出した関数に戻り値がある場合、関数の呼び出し部分がそのまま戻り値に置き換わる。
関数の呼び出し部分を定数に代入することもできる。
const add = (a, b) => {
return a + b;
};
const sum = add(1, 3);←関数呼び出し部分を定数sumに代入
console.log(sum);←戻り値が関数呼び出し部分に置きかわっているので4が出力される。
→4
さまざまな戻り値
戻り値も引数と同様に、さまざまな値を用いることができる。
例えば、条件式をreturnとすると、その条件式の結果として得られる真偽値（trueもしくはfalse）を返すことができる。
const check = (number) => {
return number % 2 === 0
};
console.log(check(6));
→true
console.log(check(7));
→false
returnによる処理の終了
returnは、戻り値を返すだけでなく、関数の処理を終了させる性質も持っている。
よって、returnの後にある関数内の処理は実行されないので注意する。
オブジェクト
オブジェクトは複数の値をプロパティという名前をつけて管理できるもの。
const user = { name: "さかいゆう", age: 18" };
プロパティ：name、値：さかいゆう
プロパティ：age、値：18
console.log(user.age);
→18
定数名.プロパティ名で値を取得できる。
オブジェクトと関数
オブジェクトの値の部分には関数を用いることもできる。
const 定数名 = {
プロパティ名: () => {
//処理
}
};
※値の部分に関数
定数名.プロパティ名()
※関数の呼び出し
オブジェクトと関数（具体例）
greetプロパティに対応する値に「こんにちは！」と出力する関数を定義。
const user = {
name:"さかいゆう",
greet: () => {
console.log("こんにちは！");
}
};
関数の呼び出し
user.greet();
→こんにちは！
javascriptにおけるクラスとは
効率よくオブジェクトを作成していくための方法として、最初に「設計図」を用意する方法がある。この「設計図」のことをjavascriptでは「クラス」と呼ぶ。
class User{
}
のようにすることでクラスを用意することができる。
インスタンスの生成
インスタンスとは、クラスから生成されたオブジェクトのこと。
クラスからインスタンスを生成するためには、以下のようにする。
class Animal{
}
const animal = new Animal();
※Animalインスタンスを定数animalに代入
インスタンスの確認
class Animal{
}
const animal = new Animal();
console.log(animal);
→Animal{}
※空のオブジェクト
コンストラクタとは
クラスには、コンストラクタと呼ばれる機能が用意されている。コンストラクタはインスタンスを生成するときに実行したい処理や設定を追加するための機能である。
class Animal{
constructor(){
}
}
のように記述する。
コンストラクタの処理
class Animal {
constructor () {
console.log("こんにちは");
}
}
const animal1 = new Animal();
→こんにちは
const animal2 = new Animal();
→こんにちは
プロパティと値を追加する
コンストラクタの中で、「this.プロパティ名 ＝ 値」とすることで、生成されたインスタンスにプロパティと値を追加することができる。
class Animal {
constructor () {
this.name = "レオ";
}
}
インスタンスとプロパティ
インスタンスはオブジェクトなので、コンストラクタの中で追加した値は、オブジェクトと同様に、「インスタンス.プロパティ」とすることで、クラスの外で使用することができる。
class Animal {
constructor () {
this.name = "レオ";
}
}
const animal = new Animal();
console.log(animal.name);
→レオ
Reactを学び始める。【JSXの記法について】
この記事は、YoutubeやTwitterで、プログラミング学習に関する発信をされている、「トラハック」さんのYoutubeチャンネルにある「新・日本一わかりやすいReact入門【基礎編】JSXの記法」という動画の自分なりのまとめになっています！
トラハックさんのYoutubeチャンネル↓
【とらゼミ】トラハックのエンジニア学習講座 - YouTube
トラハックさんのTwitterアカウント↓
トラハック＠React芸人ᓚᘏᗢ (@torahack_) | Twitter
今回参考にさせて頂いた動画↓
新・日本一わかりやすいReact入門【基礎編】JSXの記法 - YouTube
JSXとは
・javascriptの拡張言語
・HTMLライクな記述 ＋ javascriptの構文が使える。
・JSXは最終的にReact要素を生成する。
なぜJSXを使う？
・JSXを使うとHTMLライクにコードが書ける（簡単に書ける）から。
JSXを使わない場合は、React .createElementでReact要素を生成しなければならないが、JSXの場合この記述がいらない。
上記の二つの構文は等価 ＝ 同じ結果となる。
JSXは何をしているのか
・コンパイル時
1, JSX→React ,createElementの式に変換
2, React要素を生成
（※コンパイルとは、ある言語で書かれたものを別の言語に置き換える、変換するという意味）
・React.createElementを使った構文は直感的でない
→JSXを使うことで楽に記述できる。（強い）
JSXの基礎文法①
1, Reactライブラリをimportする
2, return文の中がJSXの構文で、記法は基本的にはHTMLと同じ（classはclassNameと書く）
（※JSXを記述するファイルの拡張子は「.js」もしくは「.jsx」と表すことができるが、ファイルの中身をわかりやすくする為に「.jsx」とすると良い）
JSXの基礎文法②
1, キャメルケースで記述する（image_pathのような書き方ではなく、imagePathのような書き方）
2, {}内で変数を扱える（{}の中はjavascriptの世界てこと！）
3, 閉じタグが必要（ないとエラー吐くで！）
特殊なJSXの構文
1, JSXは必ず階層構造
最上位の要素は並列にできない
2, React.Fragmentで囲む（<React.Fragment></React.Fragment>みたいな感じ！）
→この記述はHTMLタグとして出力されない、ないものとして扱われる。
3, React.Fragmentは省略形で書ける（<></>でおけ！）
以上！トラハックさんのチャンネルにある「新・日本一わかりやすいReact入門【基礎編】ReactのJSXの記法」という動画の自分なりのまとめでした！
最高にわかりやすい動画でした！トラハックさんありがとうございます！
新・日本一わかりやすいReact入門【基礎編】JSXの記法 - YouTube
トラハックさんのYoutubeチャンネル↓
【とらゼミ】トラハックのエンジニア学習講座 - YouTube
トラハックさんのTwitterアカウント↓
Reactを学び始める。【Reactの基礎知識】
この記事は、YoutubeやTwitterで、プログラミング学習に関する発信をされている、「トラハック」さんのYoutubeチャンネルにある「新・日本一わかりやすいReact入門【基礎編】Reactの基礎知識」という動画の自分なりのまとめになっています！
トラハックさんのYoutubeチャンネル↓
【とらゼミ】トラハックのエンジニア学習講座 - YouTube
トラハックさんのTwitterアカウント↓
トラハック＠React芸人ᓚᘏᗢ (@torahack_) | Twitter
今回参考にさせて頂いた動画↓
新・日本一わかりやすいReact入門【基礎編】Reactの基礎知識 - YouTube
Reactとは？
・javascriptのライブラリ
・facebookが開発したUI（ユーザーインターフェース）ライブラリ
・UIを作るためのコンポーネントという概念が特徴的
（コンポーネント＝見た目＋機能）
Reactではコンポーネントを組み合わせてwebの画面を作っていく
Reactを使わない画面描画（従来のwebサイトの画面描画）
前提として…
Q) webブラウザ（Google Chromeとか、Safariとか）ってそもそも何をしとん？
A) HTMLというドキュメント（文章）を画面に表示している。
→どういうものが書いてあって、どのように表示すればいいのかを、自動的に判断・処理して、僕たちに画面を見せてくれている！（ナイスゥ⤴︎）
それでは本題！
従来のjavascriptを用いたwebサイトの画面描画ってどうなってんの？
HTMLはツリー構造になっている。
↓↓↓ 引用：日本一わかりやすいReact入門（トラハックさんのチャンネル）
HTMLは色々なタグが組み合わさって1つの木になっている！
なので「1つの木＝1つのwebページ」ということ。
このツリー構造のどこか1部を変更したい場合、DOM（Document Object Model）というものが使われる。
DOMとは、javascriptでHTMLの要素を操作するための仕組みのこと。要は、javascriptでHTMLにアクセスする為の窓口のようなもの。
なので、divタグを書き換えたい時は「divタグのDOM要素」を取得して、javascriptで変更処理を行う！
しかし！！
DOMを直接変更してHTMLを再描画するのはコストが高い！
なぜなら…
ブラウザが変更された所を画面に反映する為に、裏側で複雑な処理を行なってしまうから！（ページを全部再読み込みする等）
そこを解決するべく生まれたのが、「React」である！！（でデーン）
仮想DOMという解決策（Reactで用いられる技術）
・変更したDOMをプラウザに再描画させるのではなく、javascriptで再描画する！
これによって、ブラウザに負荷をかけずにすむので、効率のいい画面の再描画（レンダリング）を行うことができる！
・仮想DOMを用いれば、DOMの状態をjavascriptで管理することができる！
これこそが、「コンポーネント（コンポーネント＝見た目＋機能）」つまり、「見た目だけじゃなくて、機能も持っている部品」である！！（きもTぃ）
この仮想DOMという技術を用いて、「差分描画」つまり、一部が変わったらブラウザに全てを再読み込みさせるのではなく、変わった所に影響されて変更がある部分「差分」だけをjavascript（React）で「描画」することで、無駄のない、めちゃんこ効率のいい画面描画を実現することができる！
以上！トラハックさんのチャンネルにある「新・日本一わかりやすいReact入門【基礎編】Reactの基礎知識」という動画の自分なりのまとめでした！
最高にわかりやすい動画でした！トラハックさんありがとうございます！
トラハックさんのYoutubeチャンネル↓
【とらゼミ】トラハックのエンジニア学習講座 - YouTube
トラハックさんのTwitterアカウント↓
トラハック＠React芸人ᓚᘏᗢ (@torahack_) | Twitter
今回参考にさせて頂いた動画↓
新・日本一わかりやすいReact入門【基礎編】Reactの基礎知識 - YouTube
テックキャンプの最終課題を終えて。
先週の金曜日、テックキャンプの最終課題（フリマアプリ作成）が終わった。
テックキャンプでプログラミング学習を始めて、もうすぐで二ヶ月が経とうとしている。
最初は意味のわからなかったテックキャンプの基礎カリキュラムも今見ると、「あ〜あの部分のあそこのことね」というふうに大体がわかるようになっていて、この二ヶ月で自分は確かに成長できているんだなと実感することができた。
「ものづくりがしたい」そんな思いから始めたプログラミングだが、簡単なwebサイトなら、Ruby on railsを使ってなんとか自分1人で作れるくらいにはなったと思う。
最終課題が予定よりも早めに終わったので、これからオリジナルアプリケーション作成に入る。
これまで学んできたことのそう復讐だと思って、要件定義からデーターベース設計、コーディングからデプロイまでを自分1人で全ておこなう。
当然うまくいかないこともあるともうが、不思議とワクワクしている。
せっかくの機会だから、楽しんで、没頭してオリジナルアプリケーションが作れたら良いなと思う。
form_withについて。
orm_withは、インスタンスの中身によって、アクションを自動的に判断する。
インスタンスがからなら、crate。
インスタンスに中身が入っているなら、update。のようにだ。
なので、基本的にurlを指定する必要はないのだが、urlを指定することで、行うアクションを限定することができるので、エラーが起こる確率を減らすことができる。
しかも、urlを指定していれば、newアクションにインスタンスを生成しなくても、入力した値が自動的にcreateアクションへと送られるので、createアクションでインスタンスを生成することで、値を保存できるようになり、入力した値はインスタンスに入っておらず、二重ハッシュ構造ではないので、requireでモデルを指定しなくても良くなる。
しかし、newアクションにインスタンスを設定しないまま、urlを指定していると、インスタンスは「飾り」だと認識されるので、エラーメッセージを表示することができなくなる。なので、一番硬い手としては、newアクションでインスタンスを生成し、さらにform_withでurlも指定するということ。
