Post

es6

2017-09-26 21:05:27

ES6のExportとImportについ...

ES6のexportとimportについて把握しきれていないところがあったので調べてみました。 exportの使い方 export 文は、指定したファイル (またはモジュール) から関数、オブジェクト、プリミティブをエクスポートするために使用 引用元:MDN - Export ここでいうエクスポートとは、何かを定義するという意味合いに近いかと思います。 エクスポートには2種類の方法があります。 名前付きエクスポート export { hogeFunction };  // 宣言済みの関数をエクスポート export const hoge = 1; // 定数をエクスポート letやvarも...

プログラミング

javascript es6

2017-09-26 21:06:21

Laravel+React+ES6+Br...

ちょっと前の記事で、bowerでReactの環境をセットアップするという話をしたのですが、npmでReactのパッケージ管理をしたほうがスマートだし、ES6かけるようになっといた方がこの先お得よねということで環境を再構築しました。 ES5からES6で書き方が色々変わるのでその辺の改修がちょっと面倒でしたが、さほど難しいことはないので気負いしなくとも良さそうです。 環境 Laravel5.2・・・5.1とか5.2ユーザーはelixirのバージョンを最新(5.3のそれと同じ)に上げとくといいかもです。 Browerify(Elixirについてるやつ) React ES6 Reactをnpmで用...

プログラミング

react javascript npm webpack es6 browerify es5

2017-10-01 16:18:43

React+marked+highlig...

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

2017-10-01 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 Comman...

プログラミング

es6 react redux

2017-10-01 16:22:50

React+react-redux+re...

概要 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 webpa...

プログラミング

boilerplate es6 react react-router redux webpack