君は心理学者なのか?

大学時代に心理学を専攻しなぜかプログラマになった、サイコ(心理学)プログラマかろてんの雑記。

開発

before/afterで学ぶデザインパターン(state編:before)

デザインパターンのメリットについて今一度確認したい 業務で使ったり使わなかったりするデザインパターンですが、 なかなかメリットについてつきつめて考えたことがない。 「なんとなくソースコードがきれいになった気がする。。。」で頭がとまってしまって…

ngx-datatableを使おうとしたらコンパイル時に「In ambient enum declarations member initializer must be constant expression」が発生

問題 Angular4で作っているアプリケーションにてdatatableを使おうとしたところ、 コンパイル時に以下のエラーが発生 In ambient enum declarations member initializer must be constant expression 解決方法 typescriptのバージョンを上げればよいらしい。…

Angular Materialを導入しようとしたら"has no exported member 'MdCheckboxModule'"と怒られた話

Googleが提唱している「MaterialDesign」を、Angular2/4上で簡単に使うことができる 「Anglar Material」を導入しようとしたら、moduleの読み込みに失敗しました。 has no exported member 'MdButtonModule'. CHANGELOG.mdを見てみると どうやら2017-10-05の…

ピザ◯ラから100枚のピザが届くまで 〜 CSRF対策とは(その1)

CSRF対策とは 自分の中で曖昧になっている部分があったので、整理してみました。 これから3回に分けて解説しようと思います。 その1「CSRF攻撃」について その2「CSRF対策」について その3「RailsにおけるCSRF対策」について CSRF対策とは CSRF攻撃とは …

Railsのrenderメソッドについて、xml, html, jsonで試してみる

htmlで返す render html: 'content' class ApplicationController < ActionController::Base protect_from_forgery with: :exception def hello render html: '<ul><li>hello world</li><li>good bye world</li></ul>' end end ブラウザ上の表示 あれ。うまく表示されない。 エスケープ…

rake aborted! Gem::LoadError: You have already activated rake *.*.*, but your Gemfile requires rake **.**.**. の解決方法

rakeコマンドを実行したときに時々起こる、rake aborted! の解決方法 結論。 rake *** ではなく、 bundle exec rake *** を使いましょう。 rakeコマンドを実行したときに時々起こる、rake aborted! の解決方法 解説 まずはエラー文を確認 なぜそういうことが…

パティシエが教えるgithub flowによるチーム開発

パティシエが教えるgithub flowによるチーム開発 ※当方バックエンドエンジニアです(not パティシエ) 業務系の会社で働く傍ら、プログラミングスクールにて主に未経験の方にプログラミングを教えております。 この間、github flowによるチーム開発について…

Angular4からgoogle mapを操作する「AGM (angular-google-maps)」を使ってmapを表示。

Angular4を使ってgoogle mapを表示する 「google map上でクリックしたときにマーカをプロットし、その位置情報をAjaxで投げてDB上に保存する」ということがしたくなりました。 google map上での操作については「Maps JavaScript API」を使用すればできるので…

Angular2にて、依存性の注入(dependency Injection)をする

Angular2にて、依存性の注入(dependency Injection)を行う AngularJSでは、引数の情報を用いてDIを行っていましたが、 Angular2ではやり方が大きく変わりました。 今回はAngular2でDIを実践しようと思います。 具体的には、app.componentに、 ボタンをクリ…

angular2の@angular/routerを用いて、ページ遷移をするためのrouting設定をする

angular2のrouterを用いて、ページ遷移ができるようにする 今日は、こんな感じの簡単なroutingを実現してみたいと思います。 angular2のrouterを用いて、ページ遷移ができるようにする 0. 準備 1. app.component.htmlの編集 2. それぞれのページ用コンポーネ…

angular2で親componentから子componentへ値を受け渡す方法

angular2で親componentから子componentへ値を受け渡す angular2で親componentから子componentへ値を受け渡す 0. 準備 1. 親コンポーネントとテンプレートに以下を記述 2. 親コンポーネントのテンプレートに、コンポーネントへ渡したい変数を書く 3. 子コンポ…

angular2で要素をclickした時に、処理を行う

angular2で簡単にクリックイベントを実装 angularJSではng-clickというディレクティブを使ってクリックイベントを実装していました。 angular2ではどのように実装するか、実際に実装しつつ試してみたいとおもいます。 angular2で簡単にクリックイベントを実…

angular2でngFormを用いて双方向データバインディングを実現

angular2で双方向データバインディング angularJSとangular2では、双方向データバインディングの方法が異なります。 今日はangular2を使って双方向データバインディングを実現していきましょう。 angular2で双方向データバインディング 手順 準備 FormsModul…

フロントエンドエンジニアとは何か、バックエンドエンジニアとは何か

なんとなく使っていたフロントエンドとバックエンドと言う言葉を今一度整理してみました。 超ざっくりなので初心者向けです。 フロントエンドエンジニアについて 作るもの フロントエンドエンジニアは、主に「ユーザの目に見える部分」を作ることが多いです…