Post

react

2017-09-25 23:08:23

OSSをはじめてみた話

概要 Rubel 数ヶ月前くらいからOSSとしてソースコードをgithubに公開しながらCMSを開発しています。何の目的で始めたかについてダラダラとかきます。 OSSとは OSSの定義についてWikipediaを参照してみます。 オープンソースソフトウェア(英: Open-source software, 略称: OSS)とは、ソースコードが利用可能で、著作権保持者がどんな目的のためでもソフトウェアを、学習、変更、そして配布するための権利を提供するというライセンスに基づいたソフトウェアである[1]。オープンソースソフトウェアは何れも共同で開発されている。オープンソースソフトウェアは最も著名な...

ポエム

oss github cms laravel react

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-09-26 21:07:08

Laravel+React+Supera...

表題の通りです。Laravel+React+SuperagentでAjaxなフォームを実装します。 AjaxライブラリとしてSuperagentを採用しているのは、jQueryから脱却したいのと、jQueryのAjaxよりも分かりやすかったからです。プロミスとかいう難しい概念があるらしいですが、それは横に置いておいてもとりあえずは使えそうです。 Web標準の観点からするとFetchAPIがイケてるらしいのですが、各ブラウザベンダーの実装にばらつきがあるようなので避けました。 フロントエンドってつくづくカオスだなーとボヤキつつも話を進めていきたいと想います。 やること LaravelでAPIを...

プログラミング

laravel react ajax superagent

2017-09-26 21:15:10

Laravelでajaxの際にCsrf...

Laravel+React+SuperagentでAjaxを実装していたら、500エラーがでて、「いやいやまさかTokenじゃないっしょ〜 そんなの知ってるもん〜」と捻くれていたら、CsrfTokenが原因でした。 解決方法 ヘッダにTokenを含める方法もありますが、ハードコーディング感があるので、VerifyCsrfToken.phpで該当URLを除外する方法がスマートだと思うのでそちらを記載します。 <?php namespace App\Http\Middleware; use Illuminate\Foundation\Http\Middleware\VerifyCsrfT...

プログラミング

ajax laravel react superagent

2017-09-26 21:17:47

LaravelでRestAPIをつくる

LaravelでReactをフロントエンドのフレームワークとして採用しているのですが、APIを設計する必要がでてきたのでやってみました。 やること ResourceControllerをつくってデータを出力するだけのAPIをつくる API公開を見越した認証用ミドルウェアを実装する やらないこと Restの説明 APIデータの更新や削除 Ajaxでのデータの取得と出力 環境 Laravel5.2 Resource Controllerをつくる 職人さんの朝は早い・・・php artisan make:controller HogeController --resource 職人が仕事...

プログラミング

api laravel react rest

2017-10-01 15:57:50

LaravelにbowerでReact...

先日、Laravel5.3ではフロントエンドフレームワークとしてVue.jsをデフォルトとして採用するのが決定したようです。 普段、フロントエンドはjQueryで開発しているのですが、最近の流行りに乗じてReactを使ってみることにしました。LaravelならVue.jsにしとくのが無難かなと考えたのですが、Reactが今一番伸びがある(らしい)のでReactにしました。AngularJSとで迷ったのですが、あくまでjQueryの代わりになるかつViewだけ担当するものを考えていたのでReactを選択しました。 それぞれのFWの技術的な利用価値について説明できるほどフロントエンドマンではないの...

プログラミング

laravel react

2017-10-01 16:01:00

LaravelにSPAを組み込む時に考え...

概要 Laravelで作っているアプリケーションに管理画面だけSPAを実装しようとした時、Laravelのディレクトリ構成とnginxのconfファイルをちょっとだけいじった話です。初めての試みだったのでメモがてらまとめました。 Laravelのディレクトリ構成 バックエンドで完結するアプリをbackend-app、フロントエンドで完結するアプリをfrontend-appとし、ディレクトリを大きく分けました。backend-appではユーザー側の画面やAPIやバックエンドの処理を担当し、フロントエンドはSPAの管理画面を担当しています。ユーザー側の画面もfrontend-appの範疇な気がしま...

インフラ

laravel react nginx

2017-10-01 16:18:00

React Tag Autocomple...

タグ機能をフルスクラッチで開発しようと思っていたのですが、便利な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&...

プログラミング

react

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