flux/ReduxのStoreの持ち方について思う事

fluxもReduxもどうデータを持つかについてはあまり多く説明されてない気がします。もちろんアプリケーションによって持ち方は異なるとは思うんですが、自分用のメモとして改めて考え方を整理しておきたいと思います。

続きを読む

GraphQL Subscriptionsのお手軽お試しコード

GraphQL SubscriptionsというGraphQLでSocket.ioのようにリアルタイム通知を受ける仕組みがあります。リンク先はApollo社の記事だとサンプルコード全体がないので、どのような実装になるかサンプルを作ってみました。

続きを読む

GraphQLのお気軽お試しコード

最近たまにGraphQLを触ってました。せっかくなので備忘録的にお試し用の簡単に試せるコードを残しておきます。本来はexpress-graphql等を使ってHTTP経由でアクセスすると思いますが、このコードは直接APIでアクセスして結果を取得してます。GraphQL自体がどのような動きをするのか確認するのに試しやすいと思います。

続きを読む

ReactのテストにJest Snapshotが便利

かなり久しぶりの投稿になってしまいました…。最近新しいお客さんの仕事でインプットが多めだったんですが、そろそろ落ち着いてきてるので忘れないうちに色々書き出しておきたいです。まずは最近お世話になっているJestについて。フロントエンドのテストの最適解っておそらくライブラリやフレームワークによってまちまちだとは思うんですが、ReactだとJestのSnapshot気に入って使ってます。

続きを読む

サーバーサイド用にWebpackでプリコンパイルする

サーバーサイド用のNode.jsのソースコードをWebpackでプリコンパイル&バンドルした際に少しハマったので備忘録的に残しておきたいと思います。
ぼくの場合は、Node.jsのサーバーでReactのサーバーサイドレンダリングをする時に必要になりました。クライアントのソースコードがES2015だったりJSX使って書いてるのでそれをサーバーサイドで実行するのにWebpackしておく必要があったという感じです。

続きを読む

はじめて公式ディレクトリにWordPressプラグインを登録しました

ACF_Images_Search_And_Insert_—_WordPress_Plugins

はじめて公式ディレクトリにWordPressプラグインを登録しました。ACF Images Search And Insertというプラグインです。あまり大したものではないんですが、Advanced Custom Fields(ACF)の画像フィールドにCC0の商用利用可なフリー素材を検索して差し込んでいけるというものです。

WordPressとACFを使って図鑑のようなコンテンツサイトを作成する場合にはある程度役に立つと思います。

続きを読む

Webpackを使ってみる

Redux界隈だとHot Module Reloading(HMR)が特徴な事もあって、モジュール管理にWebpackが使われる事が多いです(HMRはWebpackの機能)。今までStarter Kitを利用していたので既存の設定で動かすことが多かったのですが、基本的な動作の確認のためにゼロから設定を作ってみたいと思います。

続きを読む

Reactで簡単なアニメーションを実装する

ReactのCSSTransitionGroupを利用して簡単なエフェクトを実装します。CSSTransitionGroupはCSSのアニメーションをReactで手軽に利用できるように作られたものです。

Animation | React

続きを読む

Reduxを動かしながら理解する

巷で話題のReduxを仕事で使えそうです。ただReact/fluxを半年前に趣味のサービス開発でけっこう触っていたのに、Reduxはドキュメントを読んだだけではピンと来ず…。動かさないと分からないので、スターターキットを利用しながら実際に触ってみたいと思います。

react-redux-starter-kit

https://github.com/davezuko/react-redux-starter-kit

スターターキットのくせにスターが2000以上ついてるスゴイやつです。

続きを読む