notebook

都内でWEB系エンジニアやってます。

TypeScript

Gatsbyで特定のJSONファイルを用意してGraphQLで扱えるようにする

Gatsbyで作っているブログサイトで、Tagの数が多くなってきたのでTagをまとめたカテゴリ単位の表示をさせたい JSONファイルに適当なマッピングを持たせてそれを参照させたいというようなケースが発生したのでやってみた 普通にJSONを読み込んでも良いが、せ…

Gatsbyで記事用のMarkdownとサンプル用のMarkdownを分けて扱う

Gatsby製のブログで、コードハイライトにはプラグインとしてgatsby-remark-prismjsを使っている 特に設定などせず使っていたが、調べたら行番号指定でのハイライトや、シェル表示など色々なものがあるようだったのでローカルで試していた しかし、prism-coy…

Notionで習慣化のチェックリストと達成率を扱う

Notionで月ごとの習慣化チェックを行っている 毎日の振り返りやToDoなどもNotionで管理しているのでおのずと習慣化の管理も毎日見るしNotionでやるかという感じでやろうと試みた その中で、平日だけこれやるみたいなパターンがあってそういう場合に、Notion…

AlgoliaのInstantsearchで検索文字入力が終わったと判断してからリクエストを送るようにする

AlgoliaのInstantsearchを用いて検索UIを作っていたが、検索文字列に変化があるたびにリクエストを送る仕様になっていた なのである程度入力が終わったと判断できるタイミングでリクエストを送るようにしたいということで調べて対応してみた Algoliaの料金体…

AlgoliaのInstantsearchでページ読み込み時の初回リクエストを送らないようにする

AlgoliaのInstantsearchを用いて検索UIを作っていたがページ読み込み時に空のリクエストが発生するらしくリクエストを消費させたくないと思ったので調べて対応してみた Algoliaの料金体系 自分はFreeプランしか使っていないが 10000req/月もしくは10000Recor…

GitHub Actionsのworkflow_runトリガーで、直前に実行されたワークフローの情報を取得する

GitHub Actionsで自作アクションや他のアクションでコードを書く場合(TypeScript) @actions/githubのcontextに色々入っているのでそれを、参照して色々行うことが多いかと思う 単純にyamlファイルで定義する場合はイベントの情報は${{ github.event }}で参照…

NotionのAPIを使ってTimeTrack機能を付けてみる

最近FLEXISPOTの電動昇降机を買ったので会議のときとか気分を変えたいときなど立ち姿勢で仕事することが増えた そして、1日どれくらい立ち姿勢で仕事していたか測りたくなってきた ちょうどNotionを使って習慣化や目標を管理していたのでどうせならNotionの…

Reactでタイマーを作ってPicture in Pictureで表示する

この記事は Reactのカレンダー | Advent Calendar 2021 - Qiita 9日目の記事です 会議やワークなどでファシリテーションする際、「ちょっと時間取るのでこの作業しましょう」や「1人○分で意見を言いましょう」といったことが良くある Miroなどはタイマー機能…

スプレッド演算子でimmutableにreduceの処理を書く

nodeでreduceを使って集計などを行う場合、スプレッド演算子を使ってimmutableに書けるのでメモとして残しておく 具体例でいうと次のような変数に対してname,dateごとにグループ化してvalueの値を足した計算結果を出したい場合 const rows = [ { name: "foo"…

Reactでpropsの型を取得する

Reactの勉強を始めたので覚えたことを残していく ComponentProps コンポーネントの型注釈を取得できる const Hoge = (props: {p1: string, p2: string}) => { return <div></div> } type HogeProps = ComponentProps<typeof Hoge> const Fuga = (props: HogeProps) => { return <div></div> } こ</typeof>…

Angularでライブラリを作成しnpmに公開する

前から気になっていたng generate libraryを使ってライブラリを作ってnpmに公開するところまでやってみる 以前は下記記事でやったようにng-packagrを使って色々設定して公開までこぎつけた 自作コンポーネントをnpmに公開する - notebook swfz.hatenablog.co…

AngularでGoogleAnalyticsの計測コードを埋め込む

今回はGoogleAnalyticsのコードをAngularのプロジェクトに埋め込む話 SPAなので単に計測コードを貼り付けただけでは計測できないのでよしなにする必要がある ライブラリも探せばあったがあまり頻繁に更新されてなかったりとちょっと不安要素があったので今回…

ServerlessFramework(Node.js)のプロジェクトをTypeScriptで書き換える

ServerlessFrameworkでTypeScriptを書こうとすると最初からテンプレートaws-nodejs-typescriptを使えばよかったっぽい。 プラグインはSserverless-webpackを使ってとりあえず試してみた が、すでに書いてしまったプロジェクトだったので新規で雛形だけ作って…

TypeScript化時に遭遇したコンパイルエラーその1

素のJavaScriptで書いてたコードをTypeScript化させていたときに遭遇したコンパイルエラー 続くかわからないが後で思い出すように残しておく buffer' is not assignable to parameter of type 'string' 書いていたコードは下記 import * as fs from 'fs'; co…

Husky + lint-stagedでCIの前にprettierを適用する

仕事で見ていいなと思ったので自分でもやってみる 方法は色々ありそうなのでとりあえずメモとして残しておく CIでlintやprettierなどをチェックしてコーディングスタイルなどを保っていたが CIでprettierチェックするとpushした結果prettier掛け忘れてた場合…

TypeScriptの組み込み型関数

今回はTypeScriptの組み込み型関数について ※3.4時点 型をしっかり付け始めていろいろと直面する問題が多くそのたびに調べていった結果TypeScriptの組み込み型関数的なものが用意されていることを知りました これを知らずに自前で型を作ろうとしてむだに考え…

Conditional Typeのメモ書き

今更ながら頑張るTypeScript(strict: true)をやろうという事になったのでメモ書きをつらつらと書いていきます。 今までやりたい放題anyをぶちこんでた無法地帯に秩序をもたらすべくstrictに対応させていくのはなかなか大変です。 既存のコードに型を付けてい…

GoogleAppsScriptで毎日レポートをSlackへ通知する

GoogleAppsScriptで毎日PV数をSlackに通知する

Google App Script(clasp)でソーシャルカウントを取得して可視化する

Google Apps ScriptsでTypescriptが超簡単に使えるようになった! - アクトインディ開発者ブログ tech.actindi.net 上記記事を読んでGoogle App Scriptをcliから管理できるようにっていたことを知ったので実際にやってみることにしました 以前から当ブログの…

routerLinkActiveでpathだけのマッチを行いたい

よくあるリンクがアクティブかそうじゃないかみたいなのを判断してスタイルを変える機能に関しての備忘録 AngularだとrouterLinkActiveというものがあります 動作環境: Angular5.1 html <a [routerLink]="['/hoge', 'fuga', 'piyo']" routerLinkActive="is-active"> scss a.is-ctive { background-color: #CCC; } これでメニュー中の自</a>…

クエリパラメータから初期データを用意する

クエリパラメータをうけとって初期データなどを取得してからレンダリングしたいみたいなパターンの時、もしくは初期データをあらかじめ用意しておきたい場合など コンポーネントのonInitに書いていくと複雑になればなるほどコードが膨れ上がっていってしまい…

rxjsでpollingする

rxjs難しいですね 時間軸を変えたりキャッシュをしたり定期的に何かしたりなど。。。結構な数のオペレータがあるので組み合わせ次第で色々できるでしょう 今回は管理画面上のレポート(csvなど)をダウンロードするときの処理をrxjsでスマート()にしてみたいと…

4から5へバージョンを上げる

やったこと、躓いたこと 環境 angular 4.4.5 -> 5.1.3 node v7.9.0 Update Guideを元に事前にできるものは修正しておく Angular Update Guide - Beta https://angular-update-guide.firebaseapp.com/angular-update-guide.firebaseapp.com packageをインスト…

HttpClientでGetパラメータをセットする

angularのhttpクライアントは5系から@angular/httpではなく@angular/common/httpが推奨されています 既存のシステムが4系だったのでバージョンアップにあたり調査をしていたのですが少し詰まったところがあったのでメモを残しておきます HttpClient 基本的に…

自作コンポーネントをnpmに公開する

angularのコンポーネントをnpmに公開したいと思ったので色々調べてみたところ ng-packagrというものがあるようでそれを使って実際に公開したところまでのメモ 今回は ngx-table-input というものを公開したのでそれを公開した時の流れを追っていきます バー…

独自コンポーネントでフォーム用の部品を作る(ngModelを使えるようにする)

独自のコンポーネントでもngModelを使ってデータバインディングをしたい ngModelを使うことでvalidationなども他のinputなどと同様に扱いたい ということで公式のドキュメントにも乗っているのでやってみます angular4で実装してます Angular - ControlValue…

moment-rangeを使いたい

単純にmomentとmoment-rangeをimportしただけだとコンパイルが通らず使えないので対応する必要がありました stackoverflowなどでこうしたらいいよって書いてあったのでやってみたがコンパイルエラーで通らない 使えるようになるまでにやったことのメモ versi…

templateで再帰的なデータを表示させる

親子関係を持った入れ子のデータなどを表示したいといった用件があったときのメモ angularのバージョンは4を使っています データは下記のような感じ stats = [ { id: 1, name: 'A001', depth: 0, children: [ { id: 2, name: 'A002', depth: 1, children:[ {…

angularでvalidation(template driven)

今回はtemplate drivenでのフォーム作成、validationまでやってみます angular4系で動作させてます template driven form とりあえずテキストフィールド一つ作ります app.component.ts import { Component, OnInit } from '@angular/core'; @Component({ sel…

angular getのクエリパラメータを取得する

angularでクエリパラメータを扱う時のメモ 特定の結果を共有したいときとか、もともとgetのパラメータでやりとりしていればURLを共有するだけですが そうじゃない場合、意図的にURLにパラメータをつけてあげることで共有できるようにする必要があります レポ…