KDE BLOG

バイブス

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

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の勉強を始めました。 サーバーサイドプログラミングの経験はほとんどないので、まずは入門書から始めているのですが、そのサンプルアプリケーション(掲示板)の中で問題が発生しました。 その内容は…

【JavaScript】オブジェクト指向を意識したカルーセルスライダーの実装

これまでオブジェクト指向という言葉は知っていましたが、ほとんどその詳細について考えたり、勉強したりしたことがありませんでした。 しかしそれではいかんと思いいくつか入門記事を読んでみて、なんとなくオブジェクト指向がどういったものなのか、少し掴…

【ハマログ】親要素に設定したmouseover / mouseoutのイベントリスナーが子要素で発生する件

表題の件でハマってしまい、解決に苦労したのでハマログとして残しておきます。 事象 原因 最初のコード html css js 怪しいところを探る 親要素に設定したmouseover / mouseoutのイベントリスナーが子要素で発生しないようにする マウスイベントを扱う場合…

gistを使ってJSONを返す超簡易的なAPIサーバを作る

APIモックサーバというと、json-server や swagger などが有名ですが、ただ fetch をしたいということであれば、gist を使うのが一番お手軽かもしれないのでメモしておきます。 作り方 とても簡単です。 Githubアカウントがなければ作成して、https://gist.g…

【ES2017】async/await の基礎(後編)

前回に続き、Async Function(async/await)の使い方について学びます。 今回はおもにAsync Functionを使う上での注意点にフォーカスを当てていきたいと思います。 Async Functionとコールバック関数の問題 Promiseだけ使ったケース Async Functionとコール…

【ES2017】async/await の基礎(前編)

Promiseの理解はできたので async/await について基礎から学んでいきたいと思います。 async/await とは 簡単なサンプル Promiseを使った例 Async Functionを使った例 Async Functionの定義方法 Async Function の役割 Async Functionは常にPromiseインスタ…

【JavaScript 小ネタ】JSXなどのテンプレート上でクラス名に入る無駄な空白(スペース)をよしなに削除する方法

ちょっとした小ネタを思いついたので書いておきたいと思います。 JSX上などで、クラス名の出し分けとかによくある下記のような記述をすると、場合によっては無駄な空白(スペース)が開発者ツール上で見えたりして気になったりしないでしょうか? <a href="#" className={`foo ${isActive ? "is-active" : ""} ${isHidden ? "is-hidden" : ""}`}>test</a> ▼ Chr…

【JavaScript】ちゃんと理解しておきたいPromiseの勘所など

以前下記の記事でPromiseについて調べたことをまとめましたが、どうもすっきりと腹落ちしていませんでした。 kde.hateblo.jp ようやく最近になってふと腹落ちして理解できたと思うので、改めて自分の頭の整理のためにまとめておきたいと思います。 Promiseと…

【JavaScript基礎】Fetch APIの基礎

これまでFetch APIをなんとなくで使っていてちゃんと理解できていなかったので、改めて調べ直して使い方を理解していこうと思います。 Fetch API概要 対応ブラウザ 構文 第一引数(input) 第二引数(init) 戻り値 基本的なリクエスト&レスポンスの取得 fe…

【ES2015】スプレッド演算子の基礎まとめ

ES2015から使えるスプレッド演算子(Spread Operator)について理解がまとまっていないので、きちんとまとめておきたいと思います。 構文 関数呼び出しでの例 配列リテラルでの例 配列のコピー Objectリテラルでの例 レスト構文 分割代入でプロパティをまと…

【JavaScript基礎】Array.prototype.reduce() をしっかり理解する&サンプル集

配列のメソッドの中でも個人的にとっつきにくくて苦手意識のあった Array.prototype.reduce() 。 しかしAPIから取得したデータを扱いやすいように整形できたりと、使いこなせればとても強力なツールになることは間違いなく、この苦手意識を克服するために理…

【ES2015】テンプレートリテラルのタグについての基礎

今更ながらES2015のテンプレートリテラルに、タグ という機能があることを知ったので、それについて調べてみようと思います。 テンプレートリテラルとは タグとは タグを使ってテンプレートリテラル内の変数を大文字にする例 生の文字列にアクセスする Strin…

CSS Grid Layout の基礎について社内勉強会で発表した

CSS

先日、社内で定期的に開催されているフロントエンジニア向けの勉強会で発表する機会があり、CSS Grid Layoutについて興味があったので、基本的な使い方などを調べて発表しました。 スライドは下記になります。 CSS Grid Layout の基礎 from KojiKobayashi14 …