記事

ReactとReduxでSPAを構築するために参考にした記事

アプリケーション

雑メモです。ReactとReduxでSPAで作ろうとした時に参考にしたリポジトリや記事です。 Reduxというアーキテクチャの概念を理解するには、日本語情報がそこそこ充実していました。実際につくりたいモノの参考になりそうなソースを探すには少し手間がかかりました。js仕様の違い、コンパイラやタスクランナーなどビルド環境の違い、Reactそのもののバージョンの違い、関連パッケージのバージョンの違いなど...

React Redux SPA

Reactで複数のinputを扱うフォームを実装する

アプリケーション

Reactでフォームを実装するのはちょっと癖があります。 まずReactのフォームにはcontrolled formとuncontrolled formという2つのパターンがあることを先に理解しておくと良いかもしれません。参考:React ドキュメント 私はまだ理解が及んでいないところも多々ありますが、Reactの実装例が少ないので少しでも刺激になればという感じで記事を公開したいと思います。(もっ...

React

Reactでフォローボタンをつくってみる

アプリケーション

つくるものツ◯ッターのフォローボタンをパクったリスペクトしたものをつくります。仕様はだいたい同じだと思いますが、仕組みは異なります。クリックでフォロー/フォロー中とテキストが切り替わる、フォロー中の時にホバーした場合は解除というテキストを出す。これだけです。やや装飾にこだわって全体に無駄なCSSが設定されていますが、その辺は適宜スタイルシートを調整してください。 必要な知識 Reactの導入方法...

React

React+react-redux+react-router+ES6+webpackで作るSPAボイラープレート

アプリケーション

概要Reactで作るSPAの簡易的なボイラープレートをつくりました。最近のフロントエンドには何とかついていくだけで精一杯なため、ソースに自信はありませんが、一応形にはなっていると思いますと言い訳だけしておきます(_) 環境モジュール axios lodash react react-dom react-router react-redux redux redux-promise ビルド周り ba...

boilerplate ES6 React react-router Redux webpack

React+Reduxのディレクトリ構成検討

アプリケーション

React+Reduxをアプリケーションに導入しようとするときに、そのディレクトリ構成について悩んでいたのですが、良さ気な記事を見かけたのでまとめてみました。 A Better File Structure For React/Redux Applications Reduxの構成に従うパターンシンプルかつベタなパターンです。SPA開発ならこれが定番でしょうか。 actions/ Comm...

ES6 React Redux

React+marked+highlight

アプリケーション

wysiwygエディタではなく、マークダウンエディタをReactでつくってみました。 ソースコードの大部分はReact入門を参考にさせていただきました。 雑なgifサンプルはこちら(:3」∠) 環境 React marked(github)・・・マークダウンパーサー highlight.js(highlightjs.org)・・・シンタックスハイライト bower・・・上記全てのパッケージ管理に使...

ES6 React highlightjs markdown marked

PHPで学ぶデザインパターン - オブジェクト指向の基礎

アプリケーション

概要今は絶版になっているPHPによるデザインパターン入門を教科書にして、PHPでデザインパターンを学びます。(※Amazonで中古がありますが、定価の倍以上の値段が付いているようです。) 本連載で扱うコードはgithubにまとめていきます。 本来であれば、OOPの先駆けである言語でデザインパターンを学びたいところでしたが、PHP以外の言語の素養がなかったことと、PHPでデザインパターンを解説してい...

デザインパターン PHP OOP

PHPで学ぶデザインパターン - Template Method ~処理の穴埋め~

アプリケーション

Template Method パターンとは?似たような処理を枠組み(型)としてスーパークラスで定義し、より具体的な処理内容をサブクラスで実装するというパターンです。単なる継承ではなく、具体的な処理内容を抽象メソッドとして定義することで、スーパークラスのメソッドの実装を保証し、クラスの振る舞いをサブクラスによって定義させる継承を利用したパターンです。 構造AbstractClass処理の枠組みを定...

デザインパターン PHP テンプレートメソッドパターン