JavaScript
ちょうど社内の勉強会で発表する機会があったのと、もともとこんなことやりたいなーと思っていたので調べてみた GoogleSlideにはユーザーツールと言ってslidoのような見ているユーザーがスライドに対して質問を投稿できる機能がある(発表者がプレゼンターか…
Puppeteerでスクレイピングしていてやっと「これ楽だわ」みたいな感じのやり方が定着してきた気がするのでアウトプットしておく ちなみにどこまでいってもなるべくClickなどの操作をせずにページ内容を読み取れるのがベターだと思っている あと、REPLにかん…
dummy-jsonというnodeのライブラリを使ってみたのでメモ dummy-json BigQueryなどサンプルのJSONを作ってロードしたいときや、カラムの情報をある程度コントロールしてサンプル作りたいとき または、モック用にAPIレスポンスを適当に生成したいとき Rubyでい…
nodeでreduceを使って集計などを行う場合、スプレッド演算子を使ってimmutableに書けるのでメモとして残しておく 具体例でいうと次のような変数に対してname,dateごとにグループ化してvalueの値を足した計算結果を出したい場合 const rows = [ { name: "foo"…
サンプルやPuppeteerの記事でよく見る$evalや$$evalはCSSセレクタで対象の要素を指定してコールバックを渡したらその中ではブラウザのコンテキストで処理ができる(Elementが渡る)のでelement.hrefのように直接呼び出せる 便利ではあるがここ最近CSSセレクタ…
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…
