Reactでフォローボタンをつくってみる
2017年10月1日つくるものツ◯ッターのフォローボタンをパクったリスペクトしたものをつくります。仕様はだいたい同じだと思いますが、仕組みは異なります。クリックでフォロー／フォロー中とテキストが切り替わる、フォロー中の時にホバーした場合は解除というテキストを出す。これだけです。やや装飾にこだわって全体に無駄なCSSが設定されていますが、その辺は適宜スタイルシートを調整してください。 必要な知識 Reactの導入方法...
つくるものツ◯ッターのフォローボタンをパクったリスペクトしたものをつくります。仕様はだいたい同じだと思いますが、仕組みは異なります。クリックでフォロー／フォロー中とテキストが切り替わる、フォロー中の時にホバーした場合は解除というテキストを出す。これだけです。やや装飾にこだわって全体に無駄なCSSが設定されていますが、その辺は適宜スタイルシートを調整してください。 必要な知識 Reactの導入方法...
ReactでComponentをrequireしてたら見慣れないエラーがでました。 環境 Laravel Elixir Babel Browserify ファイルでかいぞ！ [BABEL] Note:The code generator has deoptimised the styling of "D:/path/to/hoge.js" as it exceeds the...
概要Reactで作るSPAの簡易的なボイラープレートをつくりました。最近のフロントエンドには何とかついていくだけで精一杯なため、ソースに自信はありませんが、一応形にはなっていると思いますと言い訳だけしておきます(_) 環境モジュール axios lodash react react-dom react-router react-redux redux redux-promise ビルド周り ba...
React+Reduxをアプリケーションに導入しようとするときに、そのディレクトリ構成について悩んでいたのですが、良さ気な記事を見かけたのでまとめてみました。 A Better File Structure For React/Redux Applications Reduxの構成に従うパターンシンプルかつベタなパターンです。SPA開発ならこれが定番でしょうか。 actions/ Comm...
wysiwygエディタではなく、マークダウンエディタをReactでつくってみました。 ソースコードの大部分はReact入門を参考にさせていただきました。 雑なgifサンプルはこちら(:3」∠) 環境 React marked(github)・・・マークダウンパーサー highlight.js(highlightjs.org)・・・シンタックスハイライト bower・・・上記全てのパッケージ管理に使...
タグ機能をフルスクラッチで開発しようと思っていたのですが、便利なReact Componentが沢山見つかったのでそちらを利用してみました。 環境 React Babel Browserify React Tag Autocomplete npm 導入npmでReact Tag Autocompleteを導入します。 npm install --save react-tag-autocomple...
概要今は絶版になっているPHPによるデザインパターン入門を教科書にして、PHPでデザインパターンを学びます。（※Amazonで中古がありますが、定価の倍以上の値段が付いているようです。） 本連載で扱うコードはgithubにまとめていきます。 本来であれば、OOPの先駆けである言語でデザインパターンを学びたいところでしたが、PHP以外の言語の素養がなかったことと、PHPでデザインパターンを解説してい...
Template Method パターンとは？似たような処理を枠組み（型）としてスーパークラスで定義し、より具体的な処理内容をサブクラスで実装するというパターンです。単なる継承ではなく、具体的な処理内容を抽象メソッドとして定義することで、スーパークラスのメソッドの実装を保証し、クラスの振る舞いをサブクラスによって定義させる継承を利用したパターンです。 構造AbstractClass処理の枠組みを定...
Singleton パターンとは？インスタンス生成のコストを制御するために、インスタンスが１つしかないことを保証するパターンです。 構造SingletonClasspriavateのコンストラクタとインスタンスを1つだけ返すstaticメソッドと自分自身のインスタンスを保持するためのstatic変数を用意するだけです。 メリットインスタンスへのアクセスを制御できるSingletonパターンが保持す...
Adapter パターンとは？API（互換性のないインターフェース）同士を適合させるためのパターンです。既存のコードの変更をせずに、再利用することで新しい機能を提供するというものです。再利用するコードには変更を加えないというのが特徴です。主にコードを再利用するためという後天的理由から成り立っているパターンです。（設計段階でラッパーを用意するパターンはBridgeパターンです。） 構造##Targe...