React
Reactの差分検出処理エンジン Reactではstateの値とpropsの値に差分を検出すると、コンポーネントのレンダリング処理を再実行します。 stateとprops stateは、コンポーネントが持つ状態のことです。 stateでは、エラーがあるか、モーダルウィンドウが開いて…
世代におけるフロントエンド技術の特徴 フロントエンド技術を世代分けすると、第1世代が prototype.jsやjQuery といった DOM 操作を中心に据えたユーティリティライブラリ、第2世代がAngularJSが挙げられます。 現在はReact、Vue.js、Angularが第3世代と呼…
単方向データフローとは Reactでは親コンポーネントから子コンポーネントにpropsという形でデータが流れ落ちます。子コンポーネントから親コンポーネントにデータが逆流することはありません。 双方向バインディング 親コンポーネントと子コンポーネント間で…
Component-Based(コンポーネントベース)、Just The UI(UIにしか関知しない) ReactにはRuby on RailsのようなMVCという概念はなく、model, controllerはアプリケーションを構築するのに必要ないと考えているのではないかと書籍では語られています。 コンポー…
フロントエンドの歴史 年 出来事 2005 Googleマップが登場 2006 jQueryが登場 2008 GoogleがChromeのJavaScriptエンジンであるV8をオープンソース化して公開 2009 V8エンジンを採用したJavaScriptの実行環境であるNode.jsがリリース 2009 ES5を発表 2010 Bac…
stylelintとは stylelintはCSSのlinterです。 使用するには4つのパッケージをインストールします。 stylelint ... stylelint本体です。 stylelint-config-standard ... stylelint公式による標準の共有設定です。 stylelint-order ... stylelintの並び順に関…
Prettier Prettierはフロントエンドのメジャーどころをほぼ網羅しているフォーマッタです。 TypeScript、HTML、CSS、Vue、Angular、GraphQL、CSS in JS の styled-components など コードフォーマッタとは インデントや改行などの記述スタイルのフォーマット…
依存パッケージをリストアップする npm info パッケージ名 peerDependenciesを実行すると、依存しているパッケージをリストアップできます。 以下の例では、styled-componentsの依存パッケージをリストアップしています。 ➜ frontend git:(feature/add_#403)…
RubyではRubocopなどを用いることでコードのバグの警告や自動整形を行うことが出来ます。対してJavaScriptではlinterやコードフォーマッタを使用します。 linterとは コードを静的解析してコンパイルではじかれない潜在的なバグを警告するものです。 放って…