君は心理学者なのか?

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

フロントエンド

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…

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

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