モダンなJSの話──アロー関数
2017 Dec 25※この記事はInnovator Japan Engineers’ Blogで掲載されている記事を転載したものです。 アロー関数ってなに？ざっとまとめると、 ES2015から追加された新しい構文 通常のfunction式よりも短くかける thisの値を語彙的に束縛することができる（＝文脈からthisの値を把握しやすい） 常に匿名関数 アロー（=>）を使ってかく関数式で、"this...
※この記事はInnovator Japan Engineers’ Blogで掲載されている記事を転載したものです。 アロー関数ってなに？ざっとまとめると、 ES2015から追加された新しい構文 通常のfunction式よりも短くかける thisの値を語彙的に束縛することができる（＝文脈からthisの値を把握しやすい） 常に匿名関数 アロー（=>）を使ってかく関数式で、"this...
初登壇！2017年10月8日、PHPカンファレンス2017にて、LT初登壇してきました。 初めてのLTでPHPカンファレンスという舞台に立てて、自分としてはとても良い経験になりました。 スライドSpeaker Deck - 3年目エンジニアOSSをはじめる by bmf_san 「3年目エンジニアOSSをはじめる」というテーマで、自分のOSSプロダクトを紹介しつつ、OSSに取り組んだ背景や学び得た...
概要リレーショナルなデータベースは継承をサポートをしていないので、オブジェクトの継承関係をデータベースにどのように表現するのか考慮する必要があります。それを表現する3つのパターン、単一テーブル継承・クラステーブル継承・具象クラス継承とはについて説明します。 ※各パターンの実装におけるメリット・デメリット等には触れません。 前提今回想定する登場するクラスは4つです。 Party PeopleがR...
概要AnsibleでさくらVPSの初期セットアップを自動化します。 環境 さくらVPS CentOS7.3 Ansible2.2.1.0 前提知識 さくらVPSをの初期設定の流れを理解していること。 さくらVPSの初期設定 さくらVPSにCentOS7をインストールさくらVPSのコンソール画面からOSインストール>カスタムOSインストールを選択してCentOS7をインストールしておき...
LaravelでマイグレーションやSQLファイルのインポートを繰り返したり、中断したりと無茶をやっていたらMySQLがおかしくなりました。 対応MySQLの設定ファイルにログサイズを設定したら直りました。 innodb_log_file_size=5M 所感無茶はやめよう！ 参考 "Plugin 'InnoDB' registration as a STORAGE ENG...
Vagrantのバージョンが1.7.4というちょっと古いバージョンだったのでアップデートしてみたらネットワーク周りでエラーがでてハマった話です。 エラー詳細"/etc/udev/rules.d/70-persistent-net.rules" is not a file ==> default: Configuring and enabling network interfaces... T...
VagrantBoxを作りっぱなしでほったらかしな仮想環境を維持してきたのですが、今更ながらVirtualHostの設定をしました。 やること vagrant-hostupdaterのインストールとVagrantfileの設定 Apacheのconfファイルの設定（VirtualHostの設定） やらないこと vagrantのインストール symbolic linkの設定とか面倒なこと 環境 ...
概要最近、Boxを再構築した際に、「Vagrant開発環境のワークフローをちゃんとまとめておきたい」と思ったのでまとめてみました。レポジトリにほぼ同じワークフローメモがあります。 github - bmf-san/vagrant-development-workflow 前提以下のアプリケーションがホストマシン（Mac）にインストールされていること Vagrant VirtualBox 環境ホ...
概要AnsibleでVagrantの環境構築をする最初の一歩です。プロビジョニングができる環境を整えます。 環境 Vagrant1.9.1 CentOS7.3 Ansible2.2.1.0 CentOS7.3のVagrnat Boxを用意する任意のディレクトリ（例として今回はcentos7.3）にてVagrant環境を構築します。 vagrant box add https://atlas.ha...
以前、slackとhubotでShellScriptをSlackから実行しようという記事を書きました。さくらvps＋hubot＋Slackでslack botをつくる 今回は対話形式のコマンド実行ではなく、cronで定期的にShellScriptを実行、Slackに出力結果を報告しようという試みです。 意外とこの類いのコピペでパクれるリスペクトできる参考ソースが調べても出てこなかったので、途中で挫...
概要redux-formでサーバーサイドのバリデーションを実装している時に、promissをいじってredux-formのSubmissionErrorを投げていたらUncaught (in promise) errorと怒られた話です。 解決策returnがなかっただけでした。 修正前 class Categories extends Component { onSubmit(props) ...
雑メモです。ReactとReduxでSPAで作ろうとした時に参考にしたリポジトリや記事です。 Reduxというアーキテクチャの概念を理解するには、日本語情報がそこそこ充実していました。実際につくりたいモノの参考になりそうなソースを探すには少し手間がかかりました。js仕様の違い、コンパイラやタスクランナーなどビルド環境の違い、Reactそのもののバージョンの違い、関連パッケージのバージョンの違いなど...
Reactでフォームを実装するのはちょっと癖があります。 まずReactのフォームにはcontrolled formとuncontrolled formという２つのパターンがあることを先に理解しておくと良いかもしれません。参考：React ドキュメント 私はまだ理解が及んでいないところも多々ありますが、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 m...
概要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...
php7をインストールした時にmysqlドライバーがなかった（）php7のインストールについてはこちらを参照にしました。 CentOS6／CentOS7にPHP5.6／PHP7をyumでインストール ちなみに私の環境は・・・ さくらVPS CentOS6.7 ドライバーがないならインストールすればいいじゃないyum install yum install --enablerepo=remi...
Apacheで運用していたさくらVPSにNginxをリバースプロキシとして設定したのでメモします。 随分前に設定したのでうろ覚えのところもあるかもしれませんがご了承ください。 環境 さくらVPS CentOS６系 Apache2.2.15 Nginx1.8.1 あると良い（いやあったほうが良い）前提知識 Apacheのバーチャルホストの仕組み及び設定方法 おおまかに仕組みをいうと、Nginxで...
Macにanyenvをインストールする手順です。若干ハマったところがあったのでメモ。 インストール私の環境では、/usr/local/bin/に色々置いてあるので、そこにanyenvをインストールすることにします。 cd /usr/local/bingit clone https://github.com/riywo/anyenv Pathを通すexport PATH="/usr/loc...
概要letsencryptの証明書を自動更新するスクリプトの紹介です。以前から作ってはいたのですが、色々と問題があったり、サーバー環境が変わったりで完全版を残せていなかったので改めてまとめました。 環境 nginx v1.12.0 ※letsencryptのインストールやshell scriptの実行方法等には触れません。 スクリプト月に一回証明書の有効期限を問わず更新し（--force-ren...
letsencryptの証明書自動更新(cron)とちょっとだけSlack連携 やることletsencryptの証明書を自動更新させるのを長らく忘れていたのでshellとcronで設定します。 やらないこと letsencryptのインストール・・・pythonエラーがちょっと面倒だった記憶が。。。 letsencryptのオブションの説明・・・色々あるので。。。 環境 さくらvps CentO...
letsencryptの証明書自動更新(cron)とちょっとだけSlack連携 でかいたスクリプトは、手動で実行する場合は更新成功するのですが、cronで実行すると何故か毎回失敗するという問題作でした。 そこでスクリプトを見直し、何とか正しく動作するように改良してみました。 筆者はnginx+apacheのサーバー構成です。基本的には--webrootオプションを使って証明書発行や更新を行っていま...
Laravelをインストールする時、composerを使って毎回面倒なコマンドをうっていたのですが、インストーラを使ったほうが楽でした（今更感）。 準備 composer MacOS インストーラをグローバルインストールcomposer global require "laravel/installer" パスを通す MacOSならこれでいけると思います。（Winは知りません...
多対多のリレーションを設計するときに、ドキュメント通りやっていたと思ったらちょっとした勘違いをした話です。 ここに3つのテーブルがあるじゃろ？今回のテーブル events event_tags event_tag_event←pivotテーブル 通常のテーブルは events tags tag_event って感じでデフォルトの規則通りリレーションを貼ればいいのですが、ちょっと癖のある名前...
概要Laravelのフォームリクエストで、バリデーションされる値をカスタマイズする方法です。APIのエンドポイントが/post/:id/deleteの時に、ルートパラメーターにフォームリクエストのバリデーションをかけたい・・なんて時に有効かもしれません。 validationDataメソッドをいじるLaravel APIにあるvalidationDataをいじります。 ルートパラメーターのidにバ...
Capistrano, Fabric, Rocketeer, Deployer... など様々なデプロイツールがありますが、使いこなすのが結構大変。。。 もしあなたがLaravelユーザーならシンプルでカンタンに使えるデプロイツールがあります。 Laravel Envoy 一般的なデプロイツールと比較して、細々としたことはできなさそうですが、必要最低限のデプロイタスクは行えるかと思います。 導入ド...
Laravelのlaravel-debugbarというデバックツールについて紹介します。 github-laravel-debugbar laravel5.1でも5.2でも使えました。 composerでlaravel-debugarを導入composer require barryvdh/laravel-debugbar --dev からの composer install facadeで使え...
些細な事ですが、気になったので調べてみました。 public function getIndex() { return redirect()->to('hoge'); } 今まで何となくこっちを使っていましたが、 public function getIndex() { return redirect('hoge'); } こっちでも問題なく動作するのでredirectヘルパーの...
概要Laravelで作っているアプリケーションに管理画面だけSPAを実装しようとした時、Laravelのディレクトリ構成とnginxのconfファイルをちょっとだけいじった話です。初めての試みだったのでメモがてらまとめました。 Laravelのディレクトリ構成バックエンドで完結するアプリをbackend-app、フロントエンドで完結するアプリをfrontend-appとし、ディレクトリを大きく分け...
先日、Laravel5.3ではフロントエンドフレームワークとしてVue.jsをデフォルトとして採用するのが決定したようです。 普段、フロントエンドはjQueryで開発しているのですが、最近の流行りに乗じてReactを使ってみることにしました。LaravelならVue.jsにしとくのが無難かなと考えたのですが、Reactが今一番伸びがある（らしい）のでReactにしました。AngularJSとで迷っ...
概要Laravelのエラーページを共通のテンプレートで対応する方法について説明します。 エラーハンドリングをカスタマイズapp/Exceptions/Handler.phpでrenderHttpExceptionメソッドをオーバーライドします。 Laravel API - Handler.php <?php namespace App\Exceptions; use Exceptio...
ユーザー登録時や退会時など特定のイベントの時に発火させたいメソッドを管理したい時はイベントリスナーを使うと便利です。 今回は基本的なイベントとリスナーの定義の仕方についてはすっ飛ばし、一つのリスナークラスで複数のイベントを設定できるイベント購読について扱います。 環境 laravel5.2 ディレクトリ app\Events・・・イベント名＝クラス名としたクラスを置く（厳密な命名規則はないです）...
概要LaravelでCORS(Cross-Origin Resource Sharing)に対応する方法をまとめました。クライアントサイドはReact, axiosを使用します。前提知識としては、CORSのリクエスト形態、シンプルなリクエスト方法と、preflightを使用するリクエスト方法の違いを抑えておけば良いかと思います。RESTfulAPIの場合は基本的にはpreflightを使用するリク...
Laravel+React+SuperagentでAjaxを実装していたら、500エラーがでて、「いやいやまさかTokenじゃないっしょ〜 そんなの知ってるもん〜」と捻くれていたら、CsrfTokenが原因でした。 解決方法ヘッダにTokenを含める方法もありますが、ハードコーディング感があるので、VerifyCsrfToken.phpで該当URLを除外する方法がスマートだと思うのでそちらを記載し...
概要Laravel5.4でsqliteの使ってテストをかく準備をします。 前提 Laravelの基本 マイグレーションファイルの用意 phpunit.xmlを編集以下3行を追加します。 sqliteのインメモリ機能を使います。 <php> <env name="APP_ENV" value="testing"/> <env n...
今携わっているプロジェクトでRepositoryパターンを導入しているのですが、Repository関連のファイルを自動で生成するコマンドがあったら便利だなと思い、作ってみました。 コマンドを生成php artisan make:command Repository /CommandsにRespository.phpというコマンド用のファイルが生成されます。 コマンドファイルを編集Reposito...
Laravel5.3がリリースされましたが、あえてLaravel5.2でNotificationを使う話です。 環境 Laravel5.2（または5.1） NotificationをインストールNotificationとはナンゾヤ？ Laravel.com - NotificaionsLaravel Notification Channel Laravel5.3以前では通知の管理などはEvent...
表題の通りです。Laravel+React+SuperagentでAjaxなフォームを実装します。 AjaxライブラリとしてSuperagentを採用しているのは、jQueryから脱却したいのと、jQueryのAjaxよりも分かりやすかったからです。プロミスとかいう難しい概念があるらしいですが、それは横に置いておいてもとりあえずは使えそうです。 Web標準の観点からするとFetchAPIがイケてる...
ちょっと前の記事で、bowerでReactの環境をセットアップするという話をしたのですが、npmでReactのパッケージ管理をしたほうがスマートだし、ES6かけるようになっといた方がこの先お得よねということで環境を再構築しました。 ES5からES6で書き方が色々変わるのでその辺の改修がちょっと面倒でしたが、さほど難しいことはないので気負いしなくとも良さそうです。 環境 Laravel5.2・・・5...
DB操作に関連するスマートな実装パターンであるリポジトリパターンについてかいてみようかと思います。 リポジトリパターンとはデータの操作に関連するロジックをビジネスロジックから切り離し、抽象化したレイヤに任せることで保守や拡張性を高めるパターンです。（必ずしもDB操作のロジックのみを留めるパターンというわけではないそうです。） Laravelにリポジトリパターンを取り入れることで、 テストがしやす...
英語版のGoogleで検索したい時には、ブックマークを利用してアクセスしていたのですが、プラグインで便利にできないかなーと思い、作ってみました。 デフォルトのブックマークが非表示で、Bookolio（ブクマを見やすくするやつ）とかいうプラグインを使っているニッチな人だと多少便利なプラグインかもしれません←自分 環境 Google Chrome Javascript 仕様プラグインの種類は色々あり...
概要.bashrcにgitのショートカットコマンドをつくったでgitのエイリアスコマンドをつくったのですが、中途半端だったので改良しました。 前回のエイリアスでもそこそこにgitコマンドが快適になりましたが、gitコマンドを叩く度にブランチ名をタイプしないといけない仕様は改善すべき点だと思ったので、selectを使って解決しました。 ソースgit branchの値をselectで回せばいいと思って...
複数のフォームがある状況で、「フォームリクエストのクラスは一つに絞って、rulesメソッド内で分岐したい」なんて思う日があるかもしれません。（私はRest APIつくっているときにありました。） 案外同じことを考えている人がいたようで、リファレンス漁るよりも先に結果が出ました。 Multiple Forms, Multiple Requests? FormRequestのrulesメソッド内でゴニ...
ES６のexportとimportについて把握しきれていないところがあったので調べてみました。 exportの使い方 export 文は、指定したファイル (またはモジュール) から関数、オブジェクト、プリミティブをエクスポートするために使用 引用元：MDN - Export ここでいうエクスポートとは、何かを定義するという意味合いに近いかと思います。 エクスポートには２種類の方法があります。 ...
dotenv-webpackは.envファイルに用意された環境変数をクライアントサイドでも利用したい時に便利なライブラリです。 導入npm install dotenv-webpack --save-dev webpack.config.jsにpluginとして設定します。 const Dotenv = require('dotenv-webpack'); module.expo...
CentOS6.7で[Errno 14] PYCURL ERROR 22 - "The requested URL returned error: 404 Not Found"とかいうエラーがでたzabbixを導入しようと色々試行錯誤していたら以下のようなエラーがでてyumが使えなくなりました。 http://mirror.centos.org/centos/6/SCL/x86...
概要cd hogehogeとかパスやらディレクトリやらタイプするのが面倒になるという怠惰っぷりを発揮してきたので、シェルスクリプトを使って少し楽できるようにしました。 ソース#!/bin/sh # cd by selecting numbers function cdSelect() { dirs=`ls -a` PS3="Select directory &g...
背景bitflyerが用意しているAPIをちょっと使ってみたかったので資産状況を返すAPIをたたいてみました。 ソースnodejsでAPIをたたきます。レスポンスデータは恥ずかしいので見せません。//// なおソースコードの大部分はドキュメントの例を参考にしています（） var request = require('request'); var crypto = require('crypto')...
前回、bitflyerのAPIを叩くだけ叩いてポイーしてたので、今回はレスポンスデータを整形して資産情報データとしてslackに投げれるようにします。 とりあえずasyncで非同期処理APIを複数叩く必要があったのでasyncを使いました。エラー拾っているところは参考サイト（失念しました）を真似ています。なんだか見通しの悪いコードになってしまいました・・・ var request = requir...
AWS側の問題でした。 AWS(Elasticbeanstalk)で立ち上げたインスタンス(m4)のモニタリングをしていたら、レイテンシーがやたら高く、1分に一回くらいの頻度でタイムアウトしているユーザーがいるような状況でした。（アベレージは5秒くらいだった・・かな） アプリケーション側にネックがあるのかなぁと思ったのですが、以前テストで立ち上げたインスタンスの環境（ほぼほぼ同じ環境）よりも明らか...
概要Ansibleでローカルにあるファイル（ディレクトリの中身）をリモートにコピーするタスクです。 Playbook--- - hosts: vps become: yes user: root tasks: - name: Copy a directory copy: src: /path/to/directory/ dest: /usr/local/...
概要Ansibleでリモートのファイルに書き込みをするタスク。よく使うやつ。 Playbook--- - hosts: vps become: yes user: root tasks: - name: Add text blockinfile: dest: /path/to/file insertafter: '^# Add Here'...
概要VagrantのCentOS7.3に開発環境をAnsibleで構築します。 環境 PHP7 Ruby Python Nginx MySQL5.7 Redis Mailcatcher 構築ベストプラクティスをある程度模倣した形のディレクトリです。 ansible/ ├── group_vars │ └── vagrant.yml ├── host ├── roles │ ├── com...
概要Ansibleでcronを設定するタスクです。 Playbook以下は毎分タスクを実行する設定の例です。 --- - hosts: vps become: yes user: root tasks: - name: Output recently logined users cron: name: last.sh job: last.sh ...
git add hogehoge, git commit hogehoge, git push hogehoge.... 基本的なgitコマンドしか使わないのですが、毎回コマンド叩くの面倒くさい、楽したいということでエイリアスをつくってみました。 スクリプト#git branch alias git-b='git branch' #git checkout function gi...