フロントエンド
いきさつ APIのmockがほしかった。 今までexpressとかで実際にAPIをつくっていたのだが、 ちょっとめんどくさくなってきた。 何かいい方法がないかな〜と思ってたら「json-server」という良さげなものがあったので試してみた。 github.com install npm insta…
いきさつ ソースコードを読んでいたら、 var arr = [1, 2, 3] var arr2 = [4, 5, 6] arr.push(...arr2) とつぜん処理の中で沈黙(...)し始めた。 気持ち悪かったので調べてみた。 ドキュメントを見てみる スプレッド構文を使うと、関数呼び出しでは 0 個以…
いきさつ ログイン前はログインコンポーネントだけ、 ログイン後はアプリケーションに必要なコンポーネントを読み込みたい。 目的は、 ログイン前に読み込むJavaScriptソースコードの軽量化と、 それによるセキュリティリスクの減少。 やりかた はじめ、こん…
いきさつ 職場で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>
いきさつ Bootstrap、すごい便利。 htmlタグさえドキュメントどおりにおけば*1、 カルーセルは動くわモーダルは開くわアラートは出るわ、、、 いつも本当にお世話になっております。 ただ、、、ただね、 「なんで動くのか」について全然考えたことがなかった…
いきさつ canvasを使って画像のリサイズをしたり、 画像のくり抜きがしたかったので、まずはcanvasで画像を表示できるようにした。 手順 1. input type='file'で画像を登録できるようにする <input type="file" id='file'> 2. fileを登録した時にイベントが発火するようにする /** input要…
こういうのがやりたかった 手順 簡単に言うと、 DragEventからDataTransferを取得 DataTransferからFileを取得 FileをFileReaderで読み込み、サムネイルとして表示 という手順になります。 1. dropエリアの準備 1-1. まずはdropエリアを作成する imgは後でサ…
Angularの復習をしようと思った 今回の開発で、Angularを使った。 基本フロント側は一人で開発をしていたが、 1画面で扱っているコンポーネントの数が600個をこえたり、 画面間で引き継ぐ項目がどんどん増えてきたりで、 だんだん大変なことになってきた。 …
Angular2/4を使ってmodalウィンドウを表示する bootstrap標準のmodalウィンドウを、 Angularから開こうと頑張った話です。 bootstrapとAngular以外は使っておりません。 Angular2/4を使ってmodalウィンドウを表示する 0. 準備 0-1. プロジェクトの作成 0-2. …
ngOnChangesを使って、子に渡したプロパティが変わったことを検知する 親コンポーネント /** app.component.ts */ export class AppComponent { public datas = 1; onClick() { this.datas ++; } } <button (click)="onClick()">押してください</button> <app-child [parentProperty]='datas'></app-child> 子コンポーネント
結論 *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を使いたい 0. プロジェクトを立ち上げる 1. index.htmlファイルにてjQueryを読み込む 2. AppComponentにて「アンビエント宣言」をする 3. app.component.ts…
やりたいこと google mapのある地点をクリックした際に、 その地点の緯度経度・住所を取得する必要がありましたので、 google maps apiを使って逆ジオコーディングを実現してみました。 ジオコーディング / 逆ジオコーディングとは ジオコーディング 住所の…
Angular2/4にてテーブルのソートを簡単に行ったりpagerを簡単に作ったりしたい pagerだけ作るのであれば以下のmoduleでも良い。 github.com テーブルのソートなども行いたかったので、ngx-datatableを利用することにした。 github.com star数も1800超えで、…
問題 Angular4で作っているアプリケーションにてdatatableを使おうとしたところ、 コンパイル時に以下のエラーが発生 In ambient enum declarations member initializer must be constant expression 解決方法 typescriptのバージョンを上げればよいらしい。…
バージョンを確認する 現在使っているnode moduleのバージョンを確認する必要がありました。 アプリケーションディレクトリにて、 npm ls 直下のmoduleのみ確認したいときは、 npm ls --depth=0 npm installでinstallされるパッケージのバージョンを固定する…
Googleが提唱している「MaterialDesign」を、Angular2/4上で簡単に使うことができる 「Anglar Material」を導入しようとしたら、moduleの読み込みに失敗しました。 has no exported member 'MdButtonModule'. CHANGELOG.mdを見てみると どうやら2017-10-05の…
Angular2/4にてngSwitchを使ってtemplateの切り替えを行う 「routerを使う程ではないけど、templateを部分的に書き換えたいな〜」と思ったので、 ngSwitchを使用してtemplateの部分的な切り替えを行おうと思います。 Angular2/4にてngSwitchを使ってtemplate…
Angular2/4のLifecycle Hooksを理解する Angular2/4のLifecycle Hooksのうち、ngOnInitについて簡単な実験をして、 どのタイミングでngOnInitが発火するのか確かめてみることにします。 Angular2/4のLifecycle Hooksを理解する 前提 0. プロジェクトを立ち上…
コンポーネントから別のコンポーネントに値を送る 親子関係があるときは、@Input()を使用することにより親から子へ値を送りました。 今回、あるコンポーネントから親子関係にないコンポーネントへ、 サービスを介して値を送る実装をしてみたいと思います。 …
Angular4を使ってgoogle mapを表示する 「google map上でクリックしたときにマーカをプロットし、その位置情報をAjaxで投げてDB上に保存する」ということがしたくなりました。 google map上での操作については「Maps JavaScript API」を使用すればできるので…
Angular2にて、依存性の注入(dependency Injection)を行う AngularJSでは、引数の情報を用いてDIを行っていましたが、 Angular2ではやり方が大きく変わりました。 今回はAngular2でDIを実践しようと思います。 具体的には、app.componentに、 ボタンをクリ…
angular2のrouterを用いて、ページ遷移ができるようにする 今日は、こんな感じの簡単なroutingを実現してみたいと思います。 angular2のrouterを用いて、ページ遷移ができるようにする 0. 準備 1. app.component.htmlの編集 2. それぞれのページ用コンポーネ…
angular2で親componentから子componentへ値を受け渡す angular2で親componentから子componentへ値を受け渡す 0. 準備 1. 親コンポーネントとテンプレートに以下を記述 2. 親コンポーネントのテンプレートに、コンポーネントへ渡したい変数を書く 3. 子コンポ…
angular2で簡単にクリックイベントを実装 angularJSではng-clickというディレクティブを使ってクリックイベントを実装していました。 angular2ではどのように実装するか、実際に実装しつつ試してみたいとおもいます。 angular2で簡単にクリックイベントを実…
angular2で双方向データバインディング angularJSとangular2では、双方向データバインディングの方法が異なります。 今日はangular2を使って双方向データバインディングを実現していきましょう。 angular2で双方向データバインディング 手順 準備 FormsModul…
なんとなく使っていたフロントエンドとバックエンドと言う言葉を今一度整理してみました。 超ざっくりなので初心者向けです。 フロントエンドエンジニアについて 作るもの フロントエンドエンジニアは、主に「ユーザの目に見える部分」を作ることが多いです…