TypeScript
Gatsbyで作っているブログサイトで、Tagの数が多くなってきたのでTagをまとめたカテゴリ単位の表示をさせたい JSONファイルに適当なマッピングを持たせてそれを参照させたいというようなケースが発生したのでやってみた 普通にJSONを読み込んでも良いが、せ…
Gatsby製のブログで、コードハイライトにはプラグインとしてgatsby-remark-prismjsを使っている 特に設定などせず使っていたが、調べたら行番号指定でのハイライトや、シェル表示など色々なものがあるようだったのでローカルで試していた しかし、prism-coy…
Notionで月ごとの習慣化チェックを行っている 毎日の振り返りやToDoなどもNotionで管理しているのでおのずと習慣化の管理も毎日見るしNotionでやるかという感じでやろうと試みた その中で、平日だけこれやるみたいなパターンがあってそういう場合に、Notion…
AlgoliaのInstantsearchを用いて検索UIを作っていたが、検索文字列に変化があるたびにリクエストを送る仕様になっていた なのである程度入力が終わったと判断できるタイミングでリクエストを送るようにしたいということで調べて対応してみた Algoliaの料金体…
AlgoliaのInstantsearchを用いて検索UIを作っていたがページ読み込み時に空のリクエストが発生するらしくリクエストを消費させたくないと思ったので調べて対応してみた Algoliaの料金体系 自分はFreeプランしか使っていないが 10000req/月もしくは10000Recor…
GitHub Actionsで自作アクションや他のアクションでコードを書く場合(TypeScript) @actions/githubのcontextに色々入っているのでそれを、参照して色々行うことが多いかと思う 単純にyamlファイルで定義する場合はイベントの情報は${{ github.event }}で参照…
最近FLEXISPOTの電動昇降机を買ったので会議のときとか気分を変えたいときなど立ち姿勢で仕事することが増えた そして、1日どれくらい立ち姿勢で仕事していたか測りたくなってきた ちょうどNotionを使って習慣化や目標を管理していたのでどうせならNotionの…
この記事は Reactのカレンダー | Advent Calendar 2021 - Qiita 9日目の記事です 会議やワークなどでファシリテーションする際、「ちょっと時間取るのでこの作業しましょう」や「1人○分で意見を言いましょう」といったことが良くある Miroなどはタイマー機能…
nodeでreduceを使って集計などを行う場合、スプレッド演算子を使ってimmutableに書けるのでメモとして残しておく 具体例でいうと次のような変数に対してname,dateごとにグループ化してvalueの値を足した計算結果を出したい場合 const rows = [ { name: "foo"…
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>…
前から気になっていたng generate libraryを使ってライブラリを作ってnpmに公開するところまでやってみる 以前は下記記事でやったようにng-packagrを使って色々設定して公開までこぎつけた 自作コンポーネントをnpmに公開する - notebook swfz.hatenablog.co…
今回はGoogleAnalyticsのコードをAngularのプロジェクトに埋め込む話 SPAなので単に計測コードを貼り付けただけでは計測できないのでよしなにする必要がある ライブラリも探せばあったがあまり頻繁に更新されてなかったりとちょっと不安要素があったので今回…
ServerlessFrameworkでTypeScriptを書こうとすると最初からテンプレートaws-nodejs-typescriptを使えばよかったっぽい。 プラグインはSserverless-webpackを使ってとりあえず試してみた が、すでに書いてしまったプロジェクトだったので新規で雛形だけ作って…
素のJavaScriptで書いてたコードをTypeScript化させていたときに遭遇したコンパイルエラー 続くかわからないが後で思い出すように残しておく buffer' is not assignable to parameter of type 'string' 書いていたコードは下記 import * as fs from 'fs'; co…
仕事で見ていいなと思ったので自分でもやってみる 方法は色々ありそうなのでとりあえずメモとして残しておく CIでlintやprettierなどをチェックしてコーディングスタイルなどを保っていたが CIでprettierチェックするとpushした結果prettier掛け忘れてた場合…
今回はTypeScriptの組み込み型関数について ※3.4時点 型をしっかり付け始めていろいろと直面する問題が多くそのたびに調べていった結果TypeScriptの組み込み型関数的なものが用意されていることを知りました これを知らずに自前で型を作ろうとしてむだに考え…
今更ながら頑張るTypeScript(strict: true)をやろうという事になったのでメモ書きをつらつらと書いていきます。 今までやりたい放題anyをぶちこんでた無法地帯に秩序をもたらすべくstrictに対応させていくのはなかなか大変です。 既存のコードに型を付けてい…
GoogleAppsScriptで毎日PV数をSlackに通知する
Google Apps ScriptsでTypescriptが超簡単に使えるようになった! - アクトインディ開発者ブログ tech.actindi.net 上記記事を読んでGoogle App Scriptをcliから管理できるようにっていたことを知ったので実際にやってみることにしました 以前から当ブログの…
よくあるリンクがアクティブかそうじゃないかみたいなのを判断してスタイルを変える機能に関しての備忘録 AngularだとrouterLinkActiveというものがあります 動作環境: Angular5.1 html <a [routerLink]="['/hoge', 'fuga', 'piyo']" routerLinkActive="is-active"> scss a.is-ctive { background-color: #CCC; } これでメニュー中の自</a>…
クエリパラメータをうけとって初期データなどを取得してからレンダリングしたいみたいなパターンの時、もしくは初期データをあらかじめ用意しておきたい場合など コンポーネントのonInitに書いていくと複雑になればなるほどコードが膨れ上がっていってしまい…
rxjs難しいですね 時間軸を変えたりキャッシュをしたり定期的に何かしたりなど。。。結構な数のオペレータがあるので組み合わせ次第で色々できるでしょう 今回は管理画面上のレポート(csvなど)をダウンロードするときの処理をrxjsでスマート()にしてみたいと…
やったこと、躓いたこと 環境 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をインスト…
angularのhttpクライアントは5系から@angular/httpではなく@angular/common/httpが推奨されています 既存のシステムが4系だったのでバージョンアップにあたり調査をしていたのですが少し詰まったところがあったのでメモを残しておきます HttpClient 基本的に…
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…
angularでクエリパラメータを扱う時のメモ 特定の結果を共有したいときとか、もともとgetのパラメータでやりとりしていればURLを共有するだけですが そうじゃない場合、意図的にURLにパラメータをつけてあげることで共有できるようにする必要があります レポ…