TypeScriptはJavaScriptに静的型を付けることができるAltJSです。2015年9月に登場したTypeScript 1.6ではJSXのサポートが搭載され、.tsxという拡張子を用いることでJSXを含むコードを書いたり型チェックしたりすることができます。 JSXはJavaScriptに対してHTML（あるいはXML）のタグのような構文を導入する拡張記法です。以下の例のようにJavaScriptプログラム中に式としてタグを書くことができます（https://facebook.github.io/jsx/ から引用）： // Using JSX to express UI components. var dropdown = <Dropdown> A dropdown list <Menu> <MenuItem>Do Something</MenuItem> <MenuItem>

よく使うデータへのアクセスを高速化するために、そういったデータを高速な記憶媒体に保持しておくことを、キャッシュすると言ったりします。 高速な記憶媒体はそれ相応に高い*1ので、大容量と両立することはできません。 そこで、よく使うデータを選別して、それだけをキャッシュにおいておくことが全体の高速化につながります。 具体的にどのデータが頻繁にアクセスされるかが事前にわかっている場合は、選別を最適化することができます。 しかし、オンライン的にアクセスがくる場合、未来予知をする必要があるため、最適解を求めることは不可能です。 最適解を近似するアルゴリズムに、LRUアルゴリズムがあります。 これは、キャッシュに入っていないデータへのアクセスが来た時、最も古いデータは捨てて代わりにそれを入れるというものです。 最近使っていないデータへのアクセスは、今後も来ないだろうと考えるのが常識的であり、それを採用し

はじめに 最近 Google Cloud Platform の Cloud Run が GA となったのが話題に上がりました。また gcloud コマンドを GitHub Actions 上で簡単に扱うための GoogleCloudPlatform/github-actions もリリースされました。これまで使われることの多かった actions/gcloud は deprecated となりアーカイブされています。 これらのサービス、ツールを使うことでかなり簡単に Docker コンテナを動かす環境を構築できます。そのユースケースの一つとして、実際に僕が携わっているプロジェクトでレビューコスト低減のために行っている、Pull Request (以下 PR) 単位で独立したプレビュー環境を起動する方法についてメモがてらブログにまとめようと思います。 前提 以下のようなアプリケーション、プロ

これは TypeScript Advent Calendar 2019 23日目の記事です。 みなさん「any」使ってますか？え？お前はどうかって？それはもうね…つ、使ってませんよ（ドキドキ）👮‍♂️「あなたanyですね？署までご同行願います」🙋‍♂️「ぐぬぬ…マウスオーバーされてないのに何故バレた！」‬ 隠れた any を探せ👮‍♀️！ TypeScript を使っていると、意図せず any が紛れこんでくることがあります。例えば、ライブラリが提供する関数が any をデリバリーしてきて、それがそのまま伝搬してしまう様なケースです。このように any が紛れてしまうと、grep ではもちろん、コードレビューの目もすり抜けてしまいます。 import { greet } from './utils' const message = greet() // 隠れany function

この記事は GraphQL Advent Calendar 2019 の22日目の記事です。 qiita.com こんにちは。 vivit株式会社というアウトドア関係のサービスを提供している会社で主にフロントエンドを担当している中村です。 本記事では、fly.ioでGraphQLのキャッシュサーバを立てて高速化した話をします。 はじめに 弊社では、Go + React(TypeScript)で開発しておりAPIにはGraphQLを採用しています。 今回は下記の理由でGraphQLのQuery結果をキャッシュするサーバを実装してみました。 社内向け管理画面で呼び出しているQueryの応答時間が5秒ほどかかっているものがあり、開発時、オペレーション時にストレスが発生している。 技術的な興味 本記事では、 GraphQLをどのようにキャッシュするのか fly.ioでGraphQLのキャッシュサー

この記事は Angular #2 Advent Calendar 2019 の 17 日目の記事です。 はじめに あるプロジェクトで結構複雑めなフォームを作った時にReactive Formsを体系的に調べていたのですが、その中でReactive Formsに型欲しいなと感じたので、型をつけていきます。 備忘録も兼ねて、AngularのTemplate-driven Formsの書き方とも比較したりしながらまとめていきます。 初Advent Calendarということで、周りの先輩方の記事を模倣しながら、いい感じに記事をかけていけたらと思いま〜す！ Angularにおけるフォームの実装 ログインフォーム、決済フォーム、会員登録フォームなどみなさん一度はフォームを実装したことがあると思います。 Angularにはフォームを実装する方法が２つ用意されており、それぞれ特徴があるので、どちらが自分

だんだんとクリスマスが近づいてきましたね アドベントカレンダー21日目、今日はAngular製社内ツールのパフォーマンス改善をした記録を残します。 初期状態 (16) 今回は手っ取り早くライトハウスの計測スコアを指標しながら進めていきたいと思います。最初の状態の計測では16でした。背景情報として、今回のパフォーマンス改善対象はピュアにAngular+NgRxで構成されていて、しがらみや闇のIE対応もないプロジェクトだったので比較的スコアは上げやすい状況だったと思います。 依存ライブラリの見直し (16 → 54) ここはちょっとAngularとはあまり関係ない話になりますが、手始めにサイズが大きすぎる依存ライブラリを見直すことにしました。 以前別のプロジェクトで重すぎるmoment.jsをdayjsに置き換えたことがあったので、まずはそこから手をつけることに。調べてみるとプロジェクト内で一

こんにちは、クソアプリ Advent Calendar 2019の 19 日目は、@sandessOjisanがやっていきます。この記事では 俳句力を鍛えるための babel-plugin 開発 について記事を書きます。早速使いたい方はこちらからどうぞ。なお、季語はありませんが、無季俳句として俳句としてカウントされるようです。 背景 なんでこんなものを作ったかというと、それは自身の俳句を読む力を鍛えたかったからです。 俳句とプログラミング みなさんの周りにも、ダジャレ・韻、そして 俳句 を言うのがやたら上手い人っていませんか。私の周りにはそういう人がたくさんいます。そして、そういう人に限ってプログラミング能力も非常に高いと感じています。もちろん、「俳句ができるからプログラミングもできる」なのか「プログラミングができるから俳句ができる」のどちらなのかはわかりませんし、そもそも因果関係があるこ

非同期がJavascriptの特徴で、そして難しいどころです。この記事がNodeJSのAsync Hooks機能で非同期操作を監視することを紹介したいです。 私がJia Liと申します。非同期について大好きで、angular/zone.jsという非同期管理のライブラリのCode Ownerです、一応NodeJSのAsyncHooksのCollaboratorとしてZone.jsとAsyncHooksの連携もやっています。 この記事がNodeJSのAsyncHooksの機能を紹介したいです。 なんで非同期を監視したいですか？ 機能を紹介する前に、まずUseCaseを紹介したいです。 非同期性能を計測 非同期のDebug・Tracing 非同期ユーザ操作の追跡 非同期でContext/Namespaceのようなものがほしい ということです。 性能の計測 例えば、下記のコードでの非同期操作の性能

Predictive Prefetching、PrefetchとGuess.js、時々、AngularAngularResourceHintsGuess.js こんにちは、川上です。 今年もAngularアドベントカレンダー盛り上がっていますね！ 僕もAngularカレンダーに参加することができてたいへん興奮しております。 この記事で紹介したいこと Predictive PrefetchingライブラリであるGuess.jsをAngularアプリに導入するまでを紹介いたします。しかし、そもそもPredictive Prefetchingがわからないので、その前提にある仕様から紹介していこうと思います！ それでは少しの購読時間、あずからせていただきます！ 記事のタイトルについて タイトルに深い意味はなくて記事を書き進めていくうちにキーワードが多くなってしまい。。記事タイトルを悩んでいた僕へは

1passwordのアイテム編集画面で、フィールドタイプを眺めててふと思った。「ワンタイムパスワードってあるけど、これ、AWSで多要素認証するときの『仮想MFAデバイス』に使えるのでは」と。結論から言えば、使えた。快適。でもこれは多分「人をダメにするナントカ」的な快適さだ。やっちゃいけないやつだ。 AWSでは、AWSアカウントの管理者であるrootユーザー（メールアドレスでログインする人）と、利用者であるIAMユーザー（ユーザーIDでログインする人）のどちらでも、多要素認証（MFA：Multi-Factor Authentication）を設定して認証を強化できる。 認証方法はパスワード認証＋ワンタイムパスワード（当人が知っていること＋当人が持っているもの） ワンタイムパスワードの生成には、専用のデバイスであるU2FセキュリティキーやハードウェアMFAデバイス、スマホアプリである仮想MFA

この記事は JX 通信社アドベントカレンダー、GraphQL アドベントカレンダーの4日目です こんにちは、JX通信社の小笠原(@yamitzky)です。普段はエンジニア部門の統括をしています。 弊社の NewsDigest ではアプリ向けのバックグラウンド API として GraphQL を使っています(サーバーは gqlgen、アプリはライブラリなし)。 tech.jxpress.net GraphQL の技術スタックとしては Apollo というライブラリが有名だと思うのですが、弊社では使ったことがありませんでした。そこで、今年の 9 月に箱根で開催した開発合宿にて、Apollo Client(React) と Apollo Server の検証を行いました。 Apollo Client を使うときに唯一鬼門だったのが、Apollo の持っているキャッシュ機構です。本日は、Apoll

この記事は Node.js Advent Calendar 2019 - Qiita の2日目の記事です。遅くなってしまいました。 Node.js本体へのコントリビュート解説記事です。この記事は不足している情報や更新があれば、モチベーションが続く限り更新していきたいと思っています。 JSConf JPのスタッフの打ち上げのときに日本人のNode.jsへのコミットしている人が少ないという話がでました。 Node.jsに限らずOSSへのコミット経験があるという人は私の周りには少ないです。 もちろんOSSにコミットしているから良い悪いという話ではなく、Node.jsやOSSにコミットしてみたいと相談いただくことが時々あるので僕の経験でよければ伝えたいと思いました。 私の経験からNode.jsへのコントリビュート方法の解説とOSSへの貢献を通じて得たものについて書き残しておきたいと思います。 言葉

はじめに 11 月の頭に Visual regression testing のツールを提供する Organization である reg-viz 全体のブランディングを心機一転しました。 この対応をする少し前の 9 月後半に reg-cli の Report UI は刷新 していましたが、その変更に次ぐ形でのリリースです。 いざリブランディングをしようと決意して、実際に着手するまでは以前の記事と同様なので割愛します。 思いの外時間の掛かってしまったタスクでしたが、せっかくリリースまで漕ぎつけたので、変更内容や過程について軽く記事にしておきたいと思います。 背景 そもそもの発端は Report UI の改修 Quramy さんに相談したら、ついでにロゴも変えちゃっていいですよ！という流れに ロゴを変えるなら全体のリブランディングをしたいですね〜 若干記憶が曖昧ですが、おおよそこのくらいの軽

東京大学大学院情報学環に所属する特定短時間勤務・有期雇用教職員が、SNSなどによって特定個人、あるいは特定の国やその国籍をもつ人々に対して、極めて不適切な書き込みを行った事実が判明しました。 本部局の設立から一貫して関わってきた一教員として、まずは心からお詫び申し上げます。 ちなみに「特定短時間勤務・有期雇用教職員」という職名を巡ってもネット上に様々な意見が出回っているようですが、単なる呼称に過ぎず、何の他意もないものです。 「内閣総理大臣」を「首相」とも略称するのと同様で、単なる呼称にすぎません。 まず冒頭に、問題になったツイートの例を引用しておきます。 「そもそも中国人って時点で面接に呼びません。書類で落とします」 目を疑いました。 「資本主義の文脈において、パフォーマンスの低い労働者は差別されて然るべきです」 さらに 「歴史は雑学だと思って切り捨てたんだわ。ごめんな」 「なんか日本語