Redux/react-reduxチートシート - Qiita
Reactからの流れで、組み合わせての運用例の多いReduxを勉強してみました。 Fluxの概念、Reduxの基本機能、Reactとの連携について公式のドキュメントを中心にまとめています。 フロー自体が厳密でありながらも実装上の制約が少ない点が魅力的に思えましたが、 データモデルやUIツリーの設計、ファイル/クラス分割やディレクトリ構成などについても明確な規約が存在せず、(特にスケールを見越しての)運用方針は使い込みながら模索していく必要がありそうです。 概要 Redux = React Communityが開発しているJavaScriptフレームワーク オープンソース, MITライセンス Fluxの考え方/アーキテクチャにもとづいている 単方向にデータや処理をフローさせることで、わかりやすくフロントエンド作りましょう、という考え ユーザの操作 → View → Action → Redu
キャッシュについて整理 - Qiita
キャッシュとは 使用頻度の高いデータを高速な記憶装置に蓄えておくことにより、いちいち低速な装置から読み出す無駄を省いて高速化すること。また、その際に使われる高速な記憶装置や、複製されたデータそのもののこと。 - IT用語辞典 Webサイトの表示においては、一度アクセスしたページのデータを特定の場所に保存することで、次回アクセス時の表示を速くし、サーバへの無駄なリクエストを減らせるというメリットがあります。また一口にキャッシュといっても下記の2種類があるので、どちらを指しているのか（あるいは両方か）意識しておきましょう。 ブラウザのキャッシュ：そのパソコンのユーザーが見たページのデータがローカルに溜まっていく。 キャッシュサーバのキャッシュ：不特定多数のユーザーが見たページのデータがネットワーク上に溜まっていく。 キャッシュの制御方法 ✏️ HTTPレスポンスヘッダ で制御 ➡️ Cache
ブラウザのキャッシュコントロールを正しく理解する - Qiita [キータ]
①ブラウザに一切、キャッシュさせたくない場合 サーバからクライアントへのHTTP応答ヘッダ → Cache-Control "no-cache" アクセス毎に内容が変わったり、サーバにアクセスしてもらわないと困るようなコンコンテンツの場合です。 スクリプト言語等で生成する動的コンテンツは、このようにした方が安全です。 例えば対象コンテンツが画像である場合、ブラウザで同じ画像のURLが含まれたHTMLを開いた場合は、 もちろんローカルにキャッシュがないので、サーバへ問い合わせを行う 条件つきリクエスト（If-Modified-Since、If-None-Match）もサーバへ送ってこない ②ブラウザにキャッシュさせるけど、変更ないか都度確認するようにしたい サーバからクライアントへのHTTP応答ヘッダ → Cache-Control "max-age=0" → Expires "Mon, 2
![ブラウザのキャッシュコントロールを正しく理解する - Qiita [キータ]](https://cdn-ak-scissors.b.st-hatena.com/image/square/9bd44f8ceadb57a90ce584b33ae0856bdec0011a/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-9f5428127621718a910c8b63951390ad.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTkxNiZoPTMzNiZ0eHQ9JUUzJTgzJTk2JUUzJTgzJUE5JUUzJTgyJUE2JUUzJTgyJUI2JUUzJTgxJUFFJUUzJTgyJUFEJUUzJTgzJUEzJUUzJTgzJTgzJUUzJTgyJUI3JUUzJTgzJUE1JUUzJTgyJUIzJUUzJTgzJUIzJUUzJTgzJTg4JUUzJTgzJUFEJUUzJTgzJUJDJUUzJTgzJUFCJUUzJTgyJTkyJUU2JUFEJUEzJUUzJTgxJTk3JUUzJTgxJThGJUU3JTkwJTg2JUU4JUE3JUEzJUUzJTgxJTk5JUUzJTgyJThCJnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9NTYmdHh0LWNsaXA9ZWxsaXBzaXMmdHh0LWFsaWduPWxlZnQlMkN0b3Amcz04MGM4YTY3MGUzNjAwZjZhZWQ0MTMyMjBkMDI4N2U2OA%26mark-x%3D142%26mark-y%3D112%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTYxNiZ0eHQ9JTQwaGt1c3UmdHh0LWNvbG9yPSUyMzIxMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT0zNiZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZzPTgzODlkZjUwMzQyMTYxZTIxNzkwY2ZmOGViMjg4M2Fh%26blend-x%3D142%26blend-y%3D491%26blend-mode%3Dnormal%26s%3D7612c2a9e8c495820b1d16e95424ad73)
【個人メモ】JSONのパースにjmespathを使ってみよう - Qiita
JSONのパースには、jqというツールが有名である。 が、昨日、aws-cliにて、--query オプションにより jmespath形式でのJSONパースを利用できる、ということで jmespathそのものを試してみることにした。 jmespathをインストール pipでインストールできる。
vimで複数行をコピペしたときにインデントがくっついてきてなんかスパイラルしてる感じになって超ウザイときは:a!または:i!でコマンドラインにペーストしてまたは . だけの行を入力してEnter押すと上手くいく - tumblr
覚書のためなのが1割、無駄に長いタイトルを付けたかったが為に書いたのが9割という感じの嫌がらせエントリです。 こういうときすごくうざい TestCase("NamespaceTest", { tearDown: function(){ delete tddjs.nstest; }, "test should create non-existent object": function(){ tddjs.namespace("nstest"); assertObject(tddjs.nstest); }, こんなかんじに適当にインデントの入ったコードを、例えばインサートモード→右クリック貼りつけ（またはShift + Insert）すると… むきいいいいいいいいい！！！！！！１１１ 芦田なんとかのような、見てるだけで腹立つ感じになっちゃいました！マコーレー・カルキンみたいになってまえ！！ これ
React.js製の静的サイトジェネレーターGatsbyに移行した - Qiita
これまで WordPress を使って技術メモを書いていたのですが、静的サイトジェネレーターの記事を読んで試してみたいと思いました。 とりあえず有名どころの jekyll, Hugo, Hexo などを一通り使ってみたのですが、React.js 製の Gatsby が面白そうだなと思って WordPress から移行してみました。 gatsby https://github.com/gatsbyjs/gatsby ちなみに移行したサイトはこちら Gatsbyの特徴 React.js ならではのリロード無しでのページ遷移 サイト構築のためのコンポーネント・モデルが使える ライブで開発できる 導入方法 事前に Node.js と npm をインストールしておく必要があります。 インストール
ReactDOM.createPortalを使ってモーダルを作る - Qiita
Portals React16で導入された概念で、子コンポーネントを親要素のDOM階層の外にレンダリングすることが可能になる。モーダルを作成する際に利用することで、ルート要素の直下にモーダルを置かなくても、子要素の中で通常のコンポーネントと同様に扱うことができる。 ソースコード モーダルのコンポーネント作成 import React from 'react'; import ReactDOM from 'react-dom'; import PropTypes from 'prop-types'; class Modal extends React.Component { constructor(props) { super(props); this.rootEl = document.getElementById('root'); } render() { return( ReactDO
Reactのデザインパターン Compound Components - Qiita
コンポーネント指向での開発も割と枯れてきて、昨年から海外ではいわゆるデザインパターンに名前がついて紹介されることが多くなってきました。 この記事ではその内の一つ、Compound Componentsを紹介いたします。 またタイトルに「Reactの」とついてますが、実装例がReactなだけでコンポーネント指向であれば他のUIライブラリでも考え方は流用可能です。 完成した実装はここに置きました。 https://codesandbox.io/s/104lvmynj4 参考 Ryan Florence - Compound Components Advanced React Component Patterns Compound Componentsとは はじめに Compound という言葉ですが直訳だと動詞で 混ぜ合わせる という意味です。実際の実装は混ぜ合わせるというよりは「組み合わせる
治安の悪い Slack Emoji を作るツールを作った - Qiita
(治安の悪くない Emoji も作れます) 作ったもの ここで遊べます おもしろいところ GIF アニメのエンコードまですべて js で完結しているので、ありがちな「謎のサーバーに画像アップロードするといい感じに変換してくれる」的なサービスと違って、素性の知れたコードがクライアント側でサクサク動きます。 なにができるの？ 画像を 128px x 128px に変形 画像を、 Slack にアップロードできる（現状）最大サイズの 128px x 128px に変形します。 ローカルのファイルから選ぶか、画像の URL を入力できます。アップロードするわけではないので、デカい画像でもサクサクなのがお気に入りです。 変形は 正方形に引き伸ばし（アス比無視） 正方形いっぱいに拡大して、余ったところはトリミング（アス比維持） 正方形に収まるように縮める（アス比維持） から選べます。 テキストから画像
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
