6時だョ!!全員集合!!

Rails・JavaScrictを中心にアウトプットします。

React

2022年5月17日 りあクト! 第8章 コンポーネントのメンタルモデル (p.126~)

Reactの差分検出処理エンジン Reactではstateの値とpropsの値に差分を検出すると、コンポーネントのレンダリング処理を再実行します。 stateとprops stateは、コンポーネントが持つ状態のことです。 stateでは、エラーがあるか、モーダルウィンドウが開いて…

2022年5月16日 りあクト! 第7章 他のフレームワークとの比較 (p.113~)

世代におけるフロントエンド技術の特徴 フロントエンド技術を世代分けすると、第1世代が prototype.jsやjQuery といった DOM 操作を中心に据えたユーティリティライブラリ、第2世代がAngularJSが挙げられます。 現在はReact、Vue.js、Angularが第3世代と呼…

2022年5月13日 りあクト! 第7章 単方向データフロー (p.108~)

単方向データフローとは Reactでは親コンポーネントから子コンポーネントにpropsという形でデータが流れ落ちます。子コンポーネントから親コンポーネントにデータが逆流することはありません。 双方向バインディング 親コンポーネントと子コンポーネント間で…

2022年5月9日 りあクト! 第7章 Reactをめぐるフロントエンドの歴史 (p.99~)

Component-Based(コンポーネントベース)、Just The UI(UIにしか関知しない) ReactにはRuby on RailsのようなMVCという概念はなく、model, controllerはアプリケーションを構築するのに必要ないと考えているのではないかと書籍では語られています。 コンポー…

2022年5月6日 りあクト! 第7章 Reactをめぐるフロントエンドの歴史 (p.86~)

フロントエンドの歴史 年 出来事 2005 Googleマップが登場 2006 jQueryが登場 2008 GoogleがChromeのJavaScriptエンジンであるV8をオープンソース化して公開 2009 V8エンジンを採用したJavaScriptの実行環境であるNode.jsがリリース 2009 ES5を発表 2010 Bac…

2022年5月3日 りあクト! 第6章 stylelint (p.74~)

stylelintとは stylelintはCSSのlinterです。 使用するには4つのパッケージをインストールします。 stylelint ... stylelint本体です。 stylelint-config-standard ... stylelint公式による標準の共有設定です。 stylelint-order ... stylelintの並び順に関…

2022年4月29日 りあクト! 第6章 特別なフォーマッタ 『Prettier』 (p.67~)

Prettier Prettierはフロントエンドのメジャーどころをほぼ網羅しているフォーマッタです。 TypeScript、HTML、CSS、Vue、Angular、GraphQL、CSS in JS の styled-components など コードフォーマッタとは インデントや改行などの記述スタイルのフォーマット…

2022年4月26日 りあクト! 第6章 ESLintの適用ルールをカスタマイズする (p.54~)

依存パッケージをリストアップする npm info パッケージ名 peerDependenciesを実行すると、依存しているパッケージをリストアップできます。 以下の例では、styled-componentsの依存パッケージをリストアップしています。 ➜ frontend git:(feature/add_#403)…

2022年4月25日 りあクト! 第6章 Linter とフォーマッタでコード美人に (p.45~)

RubyではRubocopなどを用いることでコードのバグの警告や自動整形を行うことが出来ます。対してJavaScriptではlinterやコードフォーマッタを使用します。 linterとは コードを静的解析してコンパイルではじかれない潜在的なバグを警告するものです。 放って…