JavaScript
page.evalやpage.$xなどをreplで確認しながら開発したい 今までChromeのDevToolでCSSセレクタ確認しながら実行して…とやっていたがどうにも効率上がらない REPLで試行錯誤したものを落とし込めたら多少はらくできるかもということで調べてみた REPLでawaitを…
定期的にやっている気がするけど現時点で良さそうと思えるGoogleAnalyticsAPIをNodeクライアントでたたくための方法 GoogleCloudPlatformを使っているとサービスアカウントを作ってキーのパスを環境変数にセットすればよしなにやってくれるので便利でいいな…
ちょうどプライベートで開発しているものでモジュール側のソースをどうしてもいじらないといけなそうな場面に遭遇したためすこししらべたら面白そうなモジュールを見つけたので使ってみた話 patch-package ds300/patch-package: Fix broken node modules ins…
仕事で見ていいなと思ったので自分でもやってみる 方法は色々ありそうなのでとりあえずメモとして残しておく CIでlintやprettierなどをチェックしてコーディングスタイルなどを保っていたが CIでprettierチェックするとpushした結果prettier掛け忘れてた場合…
テストカバレッジや静的コード解析ツールなどを使う場合、その時その時のスコアは分かりますが「数ヶ月前と比べてどうだったか」というのも知りたいですよね そうなると継続的に指標を取ってどこかに記録しておく必要があると思います イメージとしてはJenki…
Google Apps ScriptsでTypescriptが超簡単に使えるようになった！ - アクトインディ開発者ブログ tech.actindi.net 上記記事を読んでGoogle App Scriptをcliから管理できるようにっていたことを知ったので実際にやってみることにしました 以前から当ブログの…
グラフライブラリとかだとcanvasにグラフを描画してそれを画像としてダウンロードさせる、みたいなことができると思うのですが canvasだったりSVGだったりの書き方を覚える必要があるのでサクッと画像ダウンロードさせたいだけなんだけどそれだけのために覚…
今までブックマークレット？ふーんみたいな感じだったのですが、最近フロント側もやっていて面白くなってきているのと、結構できることあるみたいなのでtipsとして残しておきます 画面での確認 いきなりブックマークレットのコードを書く前にまずは画面でdev…
rxjs使おうとすると毎度ドキュメント見ながら使えそうなオペレータ調べてやるのがつらいですね 後の自分用のメモにサンプル実装を残します 今回は「検索ボックスなどの入力で必要な部分だけ取り出す」です 実行環境 angular: 5.1.2 rxjs: 5.5.6 やりたいこと…
よくあるリンクがアクティブかそうじゃないかみたいなのを判断してスタイルを変える機能に関しての備忘録 AngularだとrouterLinkActiveというものがあります 動作環境: Angular5.1 html <a [routerLink]="['/hoge', 'fuga', 'piyo']" routerLinkActive="is-active"> scss a.is-ctive { background-color: #CCC; } これでメニュー中の自</a>…
前回のrow gorupingに続き今回はpivot 動作環境 Angular: 5.1.3 ag-grid: 16.0.0 pivot テーブル定義に追加する
row groupingを実際にやってみた時のオプションなどのメモ 実際に使ったオプションなどの覚書なので結構雑になってます 全部みたいなら下記にサンプルコード付きで丁寧に乗っているのでこちらをみた方が良さそう Grouping by Row: Core Feature of our Datag…
rxjs難しいですね 時間軸を変えたりキャッシュをしたり定期的に何かしたりなど。。。結構な数のオペレータがあるので組み合わせ次第で色々できるでしょう 今回は管理画面上のレポート(csvなど)をダウンロードするときの処理をrxjsでスマート()にしてみたいと…
ag-gridというライブラリがとても便利でお世話になっているので導入から使い方の備忘録を残していく ライセンスを購入すればだいたいなんでもできるというくらい色々機能がある(正直使いこなせていない感はある) JavaScript Grid www.ag-grid.com angularの…
angularのコンポーネントをnpmに公開したいと思ったので色々調べてみたところ ng-packagrというものがあるようでそれを使って実際に公開したところまでのメモ 今回は ngx-table-input というものを公開したのでそれを公開した時の流れを追っていきます バー…
独自のコンポーネントでもngModelを使ってデータバインディングをしたい ngModelを使うことでvalidationなども他のinputなどと同様に扱いたい ということで公式のドキュメントにも乗っているのでやってみます angular4で実装してます Angular - ControlValue…
単純にmomentとmoment-rangeをimportしただけだとコンパイルが通らず使えないので対応する必要がありました stackoverflowなどでこうしたらいいよって書いてあったのでやってみたがコンパイルエラーで通らない 使えるようになるまでにやったことのメモ versi…
親子関係を持った入れ子のデータなどを表示したいといった用件があったときのメモ angularのバージョンは4を使っています データは下記のような感じ stats = [ { id: 1, name: 'A001', depth: 0, children: [ { id: 2, name: 'A002', depth: 1, children:[ {…
今回はtemplate drivenでのフォーム作成、validationまでやってみます angular4系で動作させてます template driven form とりあえずテキストフィールド一つ作ります app.component.ts import { Component, OnInit } from '@angular/core'; @Component({ sel…
フォームの金額入力とかで、入力時は1000000でフォーカスが外れたら1,000,000といったようにすることで大きい値でも判断しやすくなり入力ミスを減らしたい….. 今回は上記のような要望がちょろっと上がったので実際に試してみました フォーカスが外れたら3桁…
angularでクエリパラメータを扱う時のメモ 特定の結果を共有したいときとか、もともとgetのパラメータでやりとりしていればURLを共有するだけですが そうじゃない場合、意図的にURLにパラメータをつけてあげることで共有できるようにする必要があります レポ…
先日webstormでangularのコードを書いていた時に、この方がシンプルに書けるよ！みたいな誘導をされたので調べてみた話 書いてたコードは const isSetKey1 = (!params['key1']) ? true : false; 指摘された書き方は const isSetKey1 = !!params['key1']; こ…
よくあるパターンで何らかの条件によって別のテンプレートを読み込みたい、みたいな時 ngSwitchを使うことで条件によって表示やテンプレートを出し分ける、みたいなことができるようです ngSwitchで判定する値を指定 ngSwitchCaseで値ごとにタグを指定 ngSwi…
親子関係のコンポーネントでのデータのやりとりなら@Output,@Inputでいいですが、親子関係じゃない場合(遠い親子関係、横の関係)のパターン Serviceを使ってデータのやりとりをし、イベントを起こさせるところまでやってみます Observable,Subjectに関しては…
とりあえず起動させてみるのとbootstrapを使えるようにします インストール npm install -g angular-cli ng --help Cannot find module 'rxjs/symbol/observable' Error: Cannot find module 'rxjs/symbol/observable' 依存モジュールをインストール npm ins…
出先でサーバに対してコマンド打てないのがストレスだったのでslackから本番サーバにコマンド打てるようにしました 今回はbotkitを使っています hubotは有名ですが今更cofeescriptを覚える気にならなかったので他のものを探していたところちょうど手頃な感じ…
jsonファイルを用意するだけでAPIとして機能させることが出来る mock用のREST APIを簡単に立ち上げることが出来ます フロントエンド開発時やアプリ開発時にバックエンドの実装を待たずに開発に入ったりなんて事ができそうですね typicode/json-server 実際に…
今回はMkDocsで生成したサイト内にプレゼンテーション機能をつけたいと思います 動機 MkDocsでスライド用資料も管理したい 資料もプレゼンも一箇所で閲覧できるようにしたい(某wikiと同様) ということで、すこし調べてみた結果割と簡単にできそうだったので…
mkdocsのサイト内検索で日本語検索に対応していないという話があったので対応させたいなと思い調べてみた 中身を読んだらlunrという全文検索ライブラリを用いているよう jekyllにもlunr.jsを使ったプラグインがあるようで結構有名なのかな で、このlunr.jsが…
実際に使ってみたのでメモとして残しておきます bowerはフロントエンドパッケージマネージャと言われているようです jqueryとかangularとかそういうのをまとめて管理できるようにしたツールというイメージ rubyでいうbundlerとかに近いイメージですね bower…
