React

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

アプリケーション

タグ機能をフルスクラッチで開発しようと思っていたのですが、便利なReact Componentが沢山見つかったのでそちらを利用してみました。 環境 React Babel Browserify React Tag Autocomplete npm 導入npmでReact Tag Autocompleteを導入します。 npm install --save react-tag-autocomple...

React

LaravelにSPAを組み込む時に考えたディレクトリ構成とnginxのconfファイル

インフラストラクチャ

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

Laravel React Nginx

LaravelにbowerでReactを導入してみる

アプリケーション

先日、Laravel5.3ではフロントエンドフレームワークとしてVue.jsをデフォルトとして採用するのが決定したようです。 普段、フロントエンドはjQueryで開発しているのですが、最近の流行りに乗じてReactを使ってみることにしました。LaravelならVue.jsにしとくのが無難かなと考えたのですが、Reactが今一番伸びがある(らしい)のでReactにしました。AngularJSとで迷っ...

Laravel React

LaravelでRestAPIをつくる

アプリケーション

LaravelでReactをフロントエンドのフレームワークとして採用しているのですが、APIを設計する必要がでてきたのでやってみました。 やること ResourceControllerをつくってデータを出力するだけのAPIをつくる API公開を見越した認証用ミドルウェアを実装する やらないこと Restの説明 APIデータの更新や削除 Ajaxでのデータの取得と出力 環境 Laravel5.2...

API Laravel React REST

Laravelでajaxの際にCsrfTokenに引っかかった話

アプリケーション

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

AJAX Laravel React superagent

Laravel+React+Superagentでフォームを実装

アプリケーション

表題の通りです。Laravel+React+SuperagentでAjaxなフォームを実装します。 AjaxライブラリとしてSuperagentを採用しているのは、jQueryから脱却したいのと、jQueryのAjaxよりも分かりやすかったからです。プロミスとかいう難しい概念があるらしいですが、それは横に置いておいてもとりあえずは使えそうです。 Web標準の観点からするとFetchAPIがイケてる...

Laravel React AJAX superagent

Laravel+React+ES6+Browserify

アプリケーション

ちょっと前の記事で、bowerでReactの環境をセットアップするという話をしたのですが、npmでReactのパッケージ管理をしたほうがスマートだし、ES6かけるようになっといた方がこの先お得よねということで環境を再構築しました。 ES5からES6で書き方が色々変わるのでその辺の改修がちょっと面倒でしたが、さほど難しいことはないので気負いしなくとも良さそうです。 環境 Laravel5.2・・・5...

React JavaScript npm webpack ES6 browerify ES5

OSSをはじめてみた話

ポエム

概要 Rubel 数ヶ月前くらいからOSSとしてソースコードをgithubに公開しながらCMSを開発しています。 何の目的で始めたかについてダラダラとかきます。 OSSとは OSSの定義についてWikipediaを参照してみます。 オープンソースソフトウェア(英: Open-source software, 略称: OSS)とは、ソースコードが利用可能で、著作権保持者がどんな目的のためでもソフ...

OSS GitHub CMS Laravel React