Post

プログラミング

2018-01-20 23:39:39

ReactとHistory APIを使ってrouterを自作する

概要準備まずはHistory APIを理解しておきます。GO TO MDN。 MDN - History MDN - ブラウザの履歴を操作する 忙しい人はpushStateとwindow.popstateだけ理解しておけばなんとかなるはず。 仕様このrouterでは、以下のようなURLに対応します。 /post /post/:id /post/:id/:title クエリパラメータには対応しません。 使用するパッケージReact周りは省略します。 React以外で使うパッケージは1つだけです。 pillarjs/path-to-regexp URL部分の正規表現を良しなにやってくれるパ...

プログラミング

es6 javascript react history-api router

2017-12-29 20:44:23

モダンなJSの話──Promise

※この記事はInnovator Japan Engineers’ Blogで掲載されている記事を転載したものです。 PromiseとはPromiseとは・・ The Promise object represents the eventual completion (or failure) of an asynchronous operation, and its resulting value. MDN - Promise だそうです。 ざっくりまとめると、Promiseとは、非同期処理やその結果をいい感じにしてくれるオブジェクトのことです Promiseを使うと主に以下のようなメリ...

プログラミング

es5 es6 javascript

2017-12-25 23:24:08

Reactでマークダウンエディタをシャッとつくる

※この記事はInnovator Japan Engineers’ Blogで掲載されている記事を転載したものです。 準備ビルド環境のセットアップが面倒なので、今回はFacebook公式のcreate-react-appというツールを使います。 npm install -g create-react-app md-editorというアプリ名で環境を用意することにします。 create-react-app md-editor 次に、今回使うライブラリのインストールをしておきます。 cd ./md-editor npm install --save marked npm install 最後にサーバ...

プログラミング

es5 es6 javascript react

2017-12-25 23:23:27

モダンなJSの話──Destructuring assignment(分割代入)

※この記事はInnovator Japan Engineers’ Blogで掲載されている記事を転載したものです。 分割代入とは分割代入とは、配列またはオブジェクトのデータをそれぞれ別個の変数に代入する式のことです。文章ではイメージがつきにくいかと思います。それぞれの例を見て確認してみましょう。 配列の分割代入let a, b, c; [a, b, c] = [1, 2, 3] console.log(a, b, c) // 1 2 3 let color = [1, 2, 3] const [red, green, yellow] = color console.log(red, gree...

プログラミング

es5 es6 javascript

2017-12-25 23:22:37

モダンなJSの話──importとexport

※この記事はInnovator Japan Engineers’ Blogで掲載されている記事を転載したものです。 exportとはexportは、指定のファイルから関数、変数、オブジェクト、クラス(クラスはプロトタイプベース継承の糖衣構文であり、関数の一種。詳しくは モダンなJSの話──クラス)などを受け取り、任意のファイルでそれらを使えるようにするための文です。 exportには主に2種類の使い方があります。 Named exportsexportしたい要素の名前を付けてexportする方法です。 export { fooFunction }; export { fooFunction,...

プログラミング

es5 es6 javascript

2017-12-25 23:21:32

モダンなJSの話──クラス

※この記事はInnovator Japan Engineers’ Blogで掲載されている記事を転載したものです。 ECMAScript6からのクラス定義ECMAScript6以前ではnew演算子やprototypeプロパティを使ってクラスに近い機能を実現していましたが、ECMAScript6からはclassキーワードでクラスを定義できるようになりました。<br>classキーワードはこれまでのnew演算子やprototypeプロパティによるクラス定義のシンタックスシュガーです。 classキーワードを使ったクラス定義の方法には、クラス宣言とクラス式の2種類があります。 クラス宣言...

プログラミング

es5 es6 javascript

2017-12-25 23:20:27

モダンなJSの話──var/let/const

※この記事はInnovator Japan Engineers’ Blogで掲載されている記事を転載したものです。 スコープとは本題に入る前に、スコープの定義について確認しておきましょう。 スコープとは、変数名や関数名が参照可能な範囲のことです。 スコープの種類は色々ありますが、ここでは主に3つのスコープについて表で説明します。 スコープ名 範囲 備考 グローバル 関数の外側 どこからでもアクセスできる。 ローカル(関数) 関数の内側 ローカルスコープ内からでしかアクセスできない。 ブロック ブロック({ })の内側 if, for, switchなど ブロックスコ...

プログラミング

es5 es6 javascript

2017-12-25 23:19:03

モダンなJSの話──アロー関数

※この記事はInnovator Japan Engineers’ Blogで掲載されている記事を転載したものです。 アロー関数ってなに?ざっとまとめると、 ES2015から追加された新しい構文 通常のfunction式よりも短くかける thisの値を語彙的に束縛することができる(=文脈からthisの値を把握しやすい) 常に匿名関数 アロー(=>)を使ってかく関数式で、"thisの値を語彙的に束縛することができる"という点が大きなポイントです。 アロー関数を使うと、今までこう書いていたものが・・・ const foo = function() { console...

プログラミング

es5 es6 javascript

2017-07-17 16:44:38

単一テーブル継承・クラステーブル継承・具象クラス継承について

概要リレーショナルなデータベースは継承をサポートをしていないので、オブジェクトの継承関係をデータベースにどのように表現するのか考慮する必要があります。それを表現する3つのパターン、単一テーブル継承・クラステーブル継承・具象クラス継承とはについて説明します。  ※各パターンの実装におけるメリット・デメリット等には触れません。 前提今回想定する登場するクラスは4つです。 Party PeopleがRich Peopleを継承するという構造はちょっとわかりづらいかもしれませんが、イメージが伝われば良しとします。 People(人々)全クラスに共通する属性を持っています。 idは一意なキーです。...

プログラミング

PofEAA

2017-01-27 16:31:05

Vagrantを1.7.4から1.9.1に一気にアップデートしたら「Bringing up in...

Vagrantのバージョンが1.7.4というちょっと古いバージョンだったのでアップデートしてみたらネットワーク周りでエラーがでてハマった話です。 エラー詳細"/etc/udev/rules.d/70-persistent-net.rules" is not a file ==> default: Configuring and enabling network interfaces... The following SSH command responded with a non-zero exit status. Vagrant assumes that this means the...

プログラミング

apache vagrant virtualbox

2016-10-03 16:30:03

VagrantでVirtualHostを使う

VagrantBoxを作りっぱなしでほったらかしな仮想環境を維持してきたのですが、今更ながらVirtualHostの設定をしました。 やること vagrant-hostupdaterのインストールとVagrantfileの設定 Apacheのconfファイルの設定(VirtualHostの設定) やらないこと vagrantのインストール symbolic linkの設定とか面倒なこと 環境 Vagrant vagrant-hostsupdater・・・今回インストールするvagrantのpluginです。 CentOS6系 Apache Hosts・・・インストールしておくとMACの環境...

プログラミング

vagrant

2017-03-18 16:26:00

redux-formのサーバーサイドバリデーションでpromissをいじってたら「Unc...

概要redux-formでサーバーサイドのバリデーションを実装している時に、promissをいじってredux-formのSubmissionErrorを投げていたらUncaught (in promise) errorと怒られた話です。 解決策returnがなかっただけでした。 修正前 class Categories extends Component { onSubmit(props) { const {createCategory, fetchCategories, reset} = this.props; createCategory(props).then((...

プログラミング

react redux redux-form

2017-02-25 16:25:24

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

雑メモです。ReactとReduxでSPAで作ろうとした時に参考にしたリポジトリや記事です。 Reduxというアーキテクチャの概念を理解するには、日本語情報がそこそこ充実していました。実際につくりたいモノの参考になりそうなソースを探すには少し手間がかかりました。js仕様の違い、コンパイラやタスクランナーなどビルド環境の違い、Reactそのもののバージョンの違い、関連パッケージのバージョンの違いなどペチパー一筋だった自分には中々しんどかったです。。。 色々調べてみてようやく手を動かせるようになったので、その時参考になったリポジトリや記事をリストアップしておきます。 ※都度更新していきますー 参考...

プログラミング

react redux spa

2016-10-03 16:24:56

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

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

プログラミング

react

2016-10-03 16:24:29

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

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

プログラミング

react

2016-10-03 16:23:52

Reactでrequireしてたら、[BABEL] Note: The code generato...

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 max of "100KB" というエラーなわけですが、babelを使っていてファイルが大きすぎると発生するエラーのようです。 What does “The code generat...

プログラミング

react

2017-04-03 16:22:50

React+react-redux+react-router+ES6+webpackで作るSPAホ...

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

プログラミング

boilerplate es6 react react-router redux webpack

2016-11-23 16:19:22

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

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

プログラミング

es6 react redux

2016-10-03 16:18:43

React+marked+highlight

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

プログラミング

es6 react highlightjs markdown marked

2016-10-03 16:18:00

React Tag Autocompleteを使ってサジェスト付きタグ機能を実装する

タグ機能をフルスクラッチで開発しようと思っていたのですが、便利なReact Componentが沢山見つかったのでそちらを利用してみました。 環境 React Babel Browserify React Tag Autocomplete npm 導入npmでReact Tag Autocompleteを導入します。 npm install --save react-tag-autocomplete インクルードの仕方は色々あるかと思いますが、今回の環境ではrequireを使います。 var ReactTags = require('react-tag-autocomplete&#3...

プログラミング

react