君は心理学者なのか?

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

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

前回のソースコードをstateパターンを使用して書き換えていく 前回のソースコードを見てみると、 状態と、その状態の時の振る舞いが描かれていることがわかります。 図の例なら、「HAPPY」「HAPPY時の振る舞い(hello, goodbye)」です。 これを状態クラスと…

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

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

Angular2/4で使えるdatatable「ngx-datatable」を使ってみた

Angular2/4にてテーブルのソートを簡単に行ったりpagerを簡単に作ったりしたい pagerだけ作るのであれば以下のmoduleでも良い。 github.com テーブルのソートなども行いたかったので、ngx-datatableを利用することにした。 github.com star数も1800超えで、…

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のバージョンを上げればよいらしい。…

使っているnode moduleのバージョンを確認したい

バージョンを確認する 現在使っているnode moduleのバージョンを確認する必要がありました。 アプリケーションディレクトリにて、 npm ls 直下のmoduleのみ確認したいときは、 npm ls --depth=0 npm installでinstallされるパッケージのバージョンを固定する…

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対策とは(その2)

CSRF対策とは その1「CSRF攻撃」について その2「CSRF対策」について その3「RailsにおけるCSRF対策」について の「その2」です。 CSRF対策とは おさらい 問題点 解決方法(抽象) 解決方法(具体) 正常な場合 CSRF攻撃された場合 まとめ 補足 ワンタイ…

【性格診断テスト】16 personalities - INFP 和訳その2

(画像は “仲介者”型の性格 (INFP-A / INFP-T) | 16Personalitiesより) 16 personalities 診断 私はINFPタイプでした。 INFP より多くの情報を知りたいと思い、こちらの本の一部を和訳してみました。 www.amazon.co.jp ハイライト 友人を作るときは慎重 一…

ピザ◯ラから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 ブラウザ上の表示 あれ。うまく表示されない。 エスケープ…

【性格診断テスト】16 personalities - INFP 和訳その1

(画像は “仲介者”型の性格 (INFP-A / INFP-T) | 16Personalitiesより) 16 personalities 診断 転職にあたって「私ってどんな人間なんだ?」と思いこちらをやってみました。 16 personalities 診断 私はINFPタイプでした。 INFP より多くの情報を知りたいと…

意思決定は殺人と同じだ。

はじめに 今月に入って僕は8人殺害している。 どいつも悪い奴ではなかった。 どちらかというと皆、可能性に満ち溢れた奴らばかりだった。 そんな人たちを次々に殺めていく。 ちょっと首を締めるだけで、人は簡単に死ぬ。 そんなことを思う。 首を絞められな…

Rails Tutorial、始めました。

ちょっと本腰入れてRailsの勉強をはじめていきます〜。 まずはRails Tutorialから。 https://railstutorial.jp/ 進捗報告していきますのでよかったら読んでみてください。 ではでは。

Angular2/4にて、フォーム(input)へのキー入力&入力内容(value)を検出する

Angular2/4にて、ユーザのキー入力を検出する Angular2/4にて、ユーザがフォームへ入力をしたこと検出してみたいと思います。 さらに、ユーザがエンターキーを押したときに、今まで入力した内容を取得してみます。 Angular2/4にて、ユーザのキー入力を検出す…

Angular2/4にてngSwitchを使ってtemplateの一部切り替えを行う

Angular2/4にてngSwitchを使ってtemplateの切り替えを行う 「routerを使う程ではないけど、templateを部分的に書き換えたいな〜」と思ったので、 ngSwitchを使用してtemplateの部分的な切り替えを行おうと思います。 Angular2/4にてngSwitchを使ってtemplate…

Angular2/4のLifecycle Hooksを理解する(ngOnInit編)

Angular2/4のLifecycle Hooksを理解する Angular2/4のLifecycle Hooksのうち、ngOnInitについて簡単な実験をして、 どのタイミングでngOnInitが発火するのか確かめてみることにします。 Angular2/4のLifecycle Hooksを理解する 前提 0. プロジェクトを立ち上…

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

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

あなたのダイエットはなぜ続かないのか。行動心理学から考えてみる

ダイエットは本当につづかないのか? ダイエットって、続かないですよね。 会社帰りにラーメン食べちゃいますよね。 ジム契約してもなんだかんだで行かなくなっちゃいますよね。 そんな続かないダイエットについて、 どうやったら続くのか を行動心理学から…

Angular4にて、サービスを介してコンポーネントからコンポーネントへ値を送る

コンポーネントから別のコンポーネントに値を送る 親子関係があるときは、@Input()を使用することにより親から子へ値を送りました。 今回、あるコンポーネントから親子関係にないコンポーネントへ、 サービスを介して値を送る実装をしてみたいと思います。 …

パティシエが教える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…

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

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

フリーランスエンジニアを雇う、企業側のメリット

最近フリーランスエンジニアと言う言葉をあちこちで目にするようになった。 一時期私もフリーランスエンジニアとして働いていた。 自由だった。出勤時間も自由だったし、作業場所も自由だった。 そんなメリットがあったのでフリーランスエンジニアになった。…

アウトプットの重要性を、今一度考えてみる

ずっと前から、アウトプットの重要性をといている人がとても多い。 インプットだけではダメだ。アウトプットをしたほうがよい。 結構耳タコだ。 でもなぜ、アウトプットをしたほうが良いのか。 私は、「頭の中の無定形なものが、定形なものになってくる」か…

技術系ブログというものをはじめてみようかと思う

僕はこの春から、小さな会社の社内SEをしている。 もともとIT系の会社でなく、システム部門の立ち上げ役として新卒で入社。 その会社のIT系のノウハウは皆無。 上司はいない。 質問できる人もいない。 どうやって技術的なことにキャッチアップしていったら良…