君は心理学者なのか?

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

フロントエンド

json-serverが鬼のように便利で、しかも可愛かった

いきさつ APIのmockがほしかった。 今までexpressとかで実際にAPIをつくっていたのだが、 ちょっとめんどくさくなってきた。 何かいい方法がないかな〜と思ってたら「json-server」という良さげなものがあったので試してみた。 github.com install npm insta…

【突然の沈黙】JavaScriptのobjectスプレッド演算子について

いきさつ ソースコードを読んでいたら、 var arr = [1, 2, 3] var arr2 = [4, 5, 6] arr.push(...arr2) とつぜん処理の中で沈黙(...)し始めた。 気持ち悪かったので調べてみた。 ドキュメントを見てみる スプレッド構文を使うと、関数呼び出しでは 0 個以…

Vue.jsにて、特定のroutingの時に後からComponentを読み込む〜ログイン後にコンポーネントを読み込みたいからLazy Loadしてみた〜

いきさつ ログイン前はログインコンポーネントだけ、 ログイン後はアプリケーションに必要なコンポーネントを読み込みたい。 目的は、 ログイン前に読み込むJavaScriptソースコードの軽量化と、 それによるセキュリティリスクの減少。 やりかた はじめ、こん…

Vue.jsでComponentを利用する〜templateのみ〜

いきさつ 職場でVueを使うので勉強する必要がある。 とりあえず vue-cliを使っても良いが、 きちんと理解したいので生で書くことにした。 ルートコンポーネント <html> <head> <meta charset="utf-8"> <title>Vue TEST</title> </head> <body> <div id="app"> <my-component></my-component> </div> <script src="./vue.js"></script> </body></html>

【OSSリーディング企画】BootstrapのJavaScriptを読み解く【その1】

いきさつ Bootstrap、すごい便利。 htmlタグさえドキュメントどおりにおけば*1、 カルーセルは動くわモーダルは開くわアラートは出るわ、、、 いつも本当にお世話になっております。 ただ、、、ただね、 「なんで動くのか」について全然考えたことがなかった…

canvasで画像を表示する

いきさつ canvasを使って画像のリサイズをしたり、 画像のくり抜きがしたかったので、まずはcanvasで画像を表示できるようにした。 手順 1. input type='file'で画像を登録できるようにする <input type="file" id='file'> 2. fileを登録した時にイベントが発火するようにする /** input要…

【JavaScript】画像をdrag and dropしてサムネイルを表示する〜DragEvent, DataTransfer, File, FileReaderオブジェクトについて〜

こういうのがやりたかった 手順 簡単に言うと、 DragEventからDataTransferを取得 DataTransferからFileを取得 FileをFileReaderで読み込み、サムネイルとして表示 という手順になります。 1. dropエリアの準備 1-1. まずはdropエリアを作成する imgは後でサ…

Angularを使って、カートで商品を選択する画面を作ってみた〜親子コンポーネント・サービス間連携をしてみる〜

Angularの復習をしようと思った 今回の開発で、Angularを使った。 基本フロント側は一人で開発をしていたが、 1画面で扱っているコンポーネントの数が600個をこえたり、 画面間で引き継ぐ項目がどんどん増えてきたりで、 だんだん大変なことになってきた。 …

Angular2/4にてbootstrapのmodalウィンドウを開き、閉じた時に親コンポーネントに値を反映させる

Angular2/4を使ってmodalウィンドウを表示する bootstrap標準のmodalウィンドウを、 Angularから開こうと頑張った話です。 bootstrapとAngular以外は使っておりません。 Angular2/4を使ってmodalウィンドウを表示する 0. 準備 0-1. プロジェクトの作成 0-2. …

Angular2/4のngOnChangesはオブジェクトプロパティが変わったことを検知しない〜Lifecycle HooksのngOnChages, ngDoCheckの違い〜

ngOnChangesを使って、子に渡したプロパティが変わったことを検知する 親コンポーネント /** app.component.ts */ export class AppComponent { public datas = 1; onClick() { this.datas ++; } } <button (click)="onClick()">押してください</button> <app-child [parentProperty]='datas'></app-child> 子コンポーネント

Angular2/4の*ngIfと[hidden]の使い分け/違い〜Component自体は削除せず非表示にするにはどうしたらよいか〜

結論 *ngIfを使うとComponent自体消えてしまうが、 [hidden]を使うと非表示になるだけでComponentはそのまま残る。 *ngIfの場合 <app-sample *ngIf="showFlg"></app-sample> [hidden]の場合 <app-sample [hidden]="showFlg"></app-sample> いきさつ Angular2/4にて、こんなことがあった 2つのComponentA、ComponentBがある タブAがアクティブの時Co…

Angular2/4にてjQueryを読み込んで使用する

Angular2/4にてjQueryを使いたい どうしても使いたいときってありますよね。 Angular2/4にてjQueryを使いたい 0. プロジェクトを立ち上げる 1. index.htmlファイルにてjQueryを読み込む 2. AppComponentにて「アンビエント宣言」をする 3. app.component.ts…

Angular2/4とgoogle maps apiを使って、緯度経度から住所を取得してみた(逆ジオコーディング)

やりたいこと google mapのある地点をクリックした際に、 その地点の緯度経度・住所を取得する必要がありましたので、 google maps apiを使って逆ジオコーディングを実現してみました。 ジオコーディング / 逆ジオコーディングとは ジオコーディング 住所の…

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の…

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. プロジェクトを立ち上…

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

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

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…

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

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