KDE BLOG

Webデザインやコーディングについて書いています

2019-01-01から1年間の記事一覧

【SVG 基礎 vol.1】SVGとは・viewPortとviewBox・基本の書き方・埋め込み方法

SVG

これまでSVGに関しては、アイコンやロゴをpngやgifなどのビットマップ画像の代わりに少し使う程度で、アニメーションに関してもCSSアニメーションやJavaScriptのDOMアニメーションで事足りていました。 しかしSVGのことをちゃんと知ってマイクロインタラクシ…

bindActionCreators を使うと何がいいのか実際コードを書いて理解する

前回の記事で触れた bindActionCreators ですが、今まで使ったことがないので簡単なカウンターアプリを作って、実際に使ってみて一体何がいいのかを確認してみました。 カウンターアプリ ver.1 コード(ファイル名押下でコード展開) redux container compon…

【React Redux】mapDispatchToProps の公式ドキュメント訳

前回の mapStateToProp に続いて mapDispatchToProps の公式ドキュメントについても google 翻訳の力を借りて目を通したので、残しておきます。 react-redux.js.org

【React Redux】mapStateToProps の公式ドキュメント訳

React-reduxの公式ドキュメントを久しぶりに見てみると、いろいろと更新されていたので、ちゃんと読みこむことをしています。 今回、connect を使って store とコンポーネントを接続する際に使用する mapStateToProps についての下記ドキュメントを google …

React Context APIを理解する

ここしばらくフロントの勉強が疎かになっており、会社での立場に危機感(?)を感じたので、現実から逃げずにちゃんと勉強していくことにしました。 今回は 下記公式ドキュメントを元に Context API について理解したいと思います。 ja.reactjs.org Context …

名前付け大全を読んだメモ

WEB+DB PRESS VOL.110 の特集「設計も、実装も、ここから始まる!名前付け大全」を読んだメモです。 第1章 「良い名前」とは何か なぜ名前付けが重要なのか 悪い名前の問題 理解が困難 勘違いが起こる 変更が難しい 読みにくい なぜ名前はあるのか 第2章 名…

【webpack速習】vol.13: Build Performance

下記ページのざっくりとした翻訳。 webpack.js.org General Stay Up to Date(最新に保つ) Loaders Bootstrap Resolving Dlls Smaller = Faster Worker Pool Persistent cache(永続キャッシュ) Development Incremental Builds Compile in Memory stats.t…

【webpack速習】vol.12: Environment Variables

下記ページをざっくりとまとめます。 webpack.js.org 概要 問題点 cross-envの使い方

【webpack速習】vol.11: TypeScript

下記ページをざっくりとまとめます。 webpack.js.org Basic Setup Loader Source Maps Using Third Party Libraries Importing Other Assets

【webpack速習】vol.10: Caching

下記ページをざっくりまとめます。 webpack.js.org Output Filenames Extracting Boilerplate Module Identifiers

【webpack速習】vol.9: Lazy Loading

下記ページをざっくりまとめます。 webpack.js.org Example Frameworks

【webpack速習】vol.8: Code Splitting

下記ページの要点をまとめていきます。 webpack.js.org Entry Points Prevent Duplication(重複を防ぐ) Dynamic Imports(動的インポート) async function を使う Prefetching/Preloading modules Bundle Analysis(バンドル分析)

【webpack速習】vol.7: Production

下記ページの要点をまとめていきます。 webpack.js.org 本番サイトまたはアプリケーションを構築するためのベストプラクティスとユーティリティについて説明。 セットアップ npm scripts webpack.common.js で設定済みのプロパティに、webpack.prod.js ある…

【webpack速習】vol.6: Tree Shaking

下記ページの要点をまとめます。 webpack.js.org また一部を下記ページより引用、大いに参考にさせていただいています。 www.kabuku.co.jp tree shakingとは 実際に試してみる tree shaking を有効にする 関数をexport するファイルを作る 関数を import す…

【webpack速習】vol.5: Hot Module Replacement

webpack.js.org 上記ページの要点をまとめていきます 概要 HMRはどのように機能するか 1. アプリケーションにおいて 2. コンパイラにおいて 3. モジュール内において 4. ランタイム(実行)時において はじめかた HMRの使い方 HMRを有効にする webpack.confi…

【webpack速習】vol.4: Development

下記ページの要点になります。 webpack.js.org 開発時に役立つ機能のガイドページになります。 コードを自動的にコンパイルし、簡単な開発サーバを実行する内容です。 development mode source maps を使う 開発ツールの選択 watch モードを使う webpack-dev…

【webpack速習】vol.3: Output Management

下記ページの要点をまとめていきます。 webpack.js.org ざっくりいうと、出力されたバンドルファイルの読み込みを自動で行うようにするためにhtmlの生成を動的にするガイドです。 概要 準備 エントリーポイントとアウトプットの設定を修正 HtmlWebpackPlugin…

【webpack速習】vol.2: Asset Management

今回は下記ページの要点をまとめていきたいと思います。 webpack.js.org CSSを読み込む 補足 画像の読み込み フォントファイルを読み込む csvやxmlなどのデータファイルを読み込む グローバルなアセット

【webpack速習】vol.1: 概要 & Getting Started

個人ではなんとなくコピペで使っていたwebpack。 会社業務で使っている webpack のビルドを早くしたいのだけれど、ちゃんと webpack について理解しておらず設定ファイルをうまくいじれないのが悔しいので、ちゃんと1から学ぼうと思います。 volいくつまで続…

Redux-thunkを使ったReduxの非同期処理

前回の記事では同期的なTODOアプリを例としてReact + Reduxの基本的な使い方を学びなおしました。 今回は非同期処理の扱い方を勉強してサンプルのアプリケーションを作ったので、要点などをメモしておきます。 Reduxでの非同期処理について 実際のアプリケー…

React + Redux の基本的な使い方

久しぶりにReduxを使ったら使い方をすっかり忘れていました。 改めて勉強しなおしたのでメモしておきたいと思います。 Reduxとは Reduxのメリット 3つの原則 1. 真実の出所は1つ(Single source of truth) 2. stateは読み込み専用(State is read-only) 3.…

【Node.js】cookieを使ったクライアント ~ サーバー間のデータのやりとりサンプル

ブラウザにデータを保存するという役割でいうと、localStorage と cookie が代表的かと思いますが、localStorage はクライアント側のみで使える機能で、サーバからは扱えません。 そのためクライアントとサーバ間のデータのやり取りではcookieを使うことで手…

【Node.js】POST後にページリロードすると再度POSTされる問題

2019年はプレイベートでサービスを作りたいので、Node.jsの勉強を始めました。 サーバーサイドプログラミングの経験はほとんどないので、まずは入門書から始めているのですが、そのサンプルアプリケーション(掲示板)の中で問題が発生しました。 その内容は…