Redux Toolkitをさわってみる | CYOKODOG
Redux Toolkit とは Redux を使いやすく簡素なものにするために作られた公式のヘルパーライブラリ Redux Style Guideでも利用を推奨している TypeScript 製のためコード補完が効き TypeScript との相性がよい reducer と state をまとめて書けて action creator を書く必要がない immer が組み込まれてるため、状態変更ロジックを簡素にできる（immutable な状態を維持してくれる） Redux Thunk が標準 middleware として組み込まれている（非同期処理を書きたい時に使用する） Redux DevTools Extension 用の設定が不要 reducer と state をまとめて書ける xxxSilce.ts というファイル名が推奨されている type State = { tasks:
Code Splitting と非同期コンポーネント | CYOKODOG
Code Splitting と非同期コンポーネントを案件（と趣味プロで少々）で使用したのでメモっておく(webpack + TS + Vue3 / React で使用) Code Splitting とは Webpack 等のバンドラーでバンドル処理時に、コードをチャンクファイルに分割すること Webpack の場合 Dynamic Import で非同期でモジュールを読み込もうとすると、Webpack がファイルを分割してくれる モジュールを読み込む時用の URL 設定が必要になる (バンドルファイルの出力先をルート URL の物理パスとしてる場合は不要) 複数エントリパス毎にバンドルする場合、共通で利用しているモジュールを別ファイルに切り出してくれる 明示的な設定が必要 メリット バンドルファイルが巨大化しがちな SPA において、ファイルを分割することで初期表示を早くできる 非同期
Redux Toolkit の AsyncThunk をさわってみる | CYOKODOG
Redux Toolkit をさわってみる のつづき。createAsyncThunk とは Redux Toolkit の機能の 1 つで、Redux Toolkit v1.3.0 から使える 非同期処理に対応した ActionCreator を生成する関数 createAsyncThunk を使用しない場合との違い createAsyncThunk を使用しない こちらでサンプルを紹介 createAsyncThunk を使用しない場合は、非同期処理が完了した後にdispatch(sliceに定義されたaction)のようにしてdispatch()する構成になるため、storeに依存した実装となる export const loadTasks = (): AppThunk => { return async (dispatch, getState): Promise<void> =>
Redux Toolkit の EntityAdapter をさわってみる | CYOKODOG
Redux Toolkit の AsyncThunk をさわってみる のつづき。 EntityAdapter とは createEntityAdapter | Redux Toolkit NgRx メンテナによって作成された@ngrx/entity ライブラリから、Redux Toolkit に移植された API Redux Toolkit v1.3.0 で追加された https://github.com/reduxjs/redux-toolkit/pull/374 エンティティ操作用のアダプターを生成してくれ、CRUD(create, read, update, delete)操作の機能を提供してくれる エンティティとは アプリケーション内の一意のタイプのデータオブジェクトを指すために使用される用語 以下のよう一意の ID 値を持っているオブジェクトを格納したコレクションに対し、CRUD
ツールバーをスクロール位置に応じ画面の上下にピタっと固定表示する jQuery プラグイン | CYOKODOG
管理者向け画面などで、画面下部にコマンドボタンを配置した際、画面に表示するデータ量が多いとコマンドボタンが画面の表示枠内に収まらず不便に・・・かと言って position:fixed で固定表示すると、データ量が少ない場合に不格好に見えてしまう・・・そんな経験は無いでしょうか？ Fitbar は、ツールバーやナビゲーションメニューを画面のスクロール位置に応じ上部又は下部に固定表示させることができる jQuery プラグインです。 jQuery Sitekit の一機能として、もしくは単独の jQuery プラグインとして使用することができます。 Fitbar の使い方 jQuery、Fitbar（または jQuery Sitekit）の CSS, JS ファイルを読み込みます。 <link href="jquery.fitbar.css" rel="stylesheet" type="te
Google Feed API を手軽に利用できるようにする jQuery プラグイン | CYOKODOG
Easy Feed は、外部ドメインの RSS フィードの読み込みを可能にする Google Feed API を手軽に利用できるようにする jQuery プラグインです。 jQuery Sitekit の一機能として、もしくは単独の jQuery プラグインとして使用することができます。 Google Feed API とは Google Feed API は、よそ様のサイトの RSS フィードを JavaScript で取得し簡単に扱うことをできるようにする Google のサービスです。 通常、外部ドメインの RSS を取得するにはサーバで一旦受信し、ATOM, RSS1.0, RSS2.0 等の異なるデータフォーマットを JSON 形式に加工しクライアントに返す等の工夫が必要になりますが、Google Feed API を使用するとこれらの処理を Google がやってくれます。
Google 以外のメールアカウントで Gmail をメールクライアントとして使用する方法 | CYOKODOG
IT リテラシーがまるっきり無かった 10 年以上前、うかつにも会社のメールアドレスをまぐまぐに登録して以来、スパムメールがよく飛んでくるようになりましたｗ そんな場合、強力なスパムフィルターのある Gmail をメールクライアントとして使用することで、問題を解決することができます。 備忘録も兼ねて手順をまとめときますので、スパムメールに苦しむ同僚がいたら教えてあげてください。 Gmail 以外のメールアカウントの受信データを Gmail で受信する方法 専用の Gmail アカウントを用意しても既存の Gmail アカウントでもよいので、まず Gmail の画面を開きます。 Gmail の設定画面「アカウントとインポート」タブの「POP3 を使用して他のアカウントのメッセージを確認」セクションにある「自分の POP3 メール アカウントを追加」をクリックします。 受信したいメールアドレス
jQuery 1.9 で $.browser が使えなくなってしまった対策 | CYOKODOG
jQuery 1.9 になってとうとう $.browser が使えなくなってしまいましたね。 もともと非推奨ということもあり、個人的にはプラグインを実装する時などは極力使用しないようにしてましたが、実際使えなくなってしまうと、動かなくなってしまうプラグインって結構多いんじゃないかなぁって気がします。 スムーススクロールが動かない プラグインではありませんが、最近ではいろんなサイトで見かけるようになったスムーススクロールの実装で、影響受けてるというエントリを見かけました。 IE系だとウィンドウのスクロールを制御するとき「html」を指定する。 GoogleChrome や Safari などのWEBKIT系は「body」指定しないといけない。 そこで、「$.browser.safari」をつかって、どっちを指定するかを切り替えていた。 ところがどっこい、jQuery1.3以降だと「$.bro
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
