Megumi Shimabukuro

はじめにこの記事では、GraphQL のデータソースに microCMS を利用する方法を書いてみます。GraphQL は BFF として利用するケースも多いですが、GraphQL としては、データがどこから来たのかは重要ではありません。データベースや RESTful API、マイクロサービスから取得するといった選択肢があります。今回は microCMS をデータ取得元にすることを想定し、その構成や構築手順を書いていきます。（以下の図の REST API の部分が mciroCMS になるイメージです。）GraphQL is data source agnostic出典: h...

GraphQL のデータソースに microCMS を 使う

はじめにこの記事は モニクル Advent Calendar 2023 の 6 日目の記事です。この記事では、立ち上げ初期のチームにモブプログラミングを取り入れてみたら、チームビルディングが促進されたり、チームの課題と感じていた属人化が防げるようになった話を紹介したいと思います。 対象読者立ち上げ初期のチーム[1]で、これからチームをよくしていきたいと考えてる人個人分担で開発が進み担当者の属人化が課題と感じてる人 モブプロとはモブプログラミングとは、複数人で一つのコンピューターの前に集まって、みんなで協力しながら問題を解決していくことです。タイピスト(ドライバー)...

立ち上げ初期のチームとモブプログラミング

はじめにこの記事は Datadog に入門してみたいと思った筆者が、Datadog APM を触ってみた記録です。入門するにあたって、CloudRun で動いてる Rails のアプリケーションのログやトレースを Datadog に送ったり、ログとトレースの紐付けを試してみたりしました。基本的には Datadog のドキュメントを読んで試してみただけですが、自分の理解のためにもまとめておきます。 対象読者Datadog に入門したい人CloudRun で動いてる Rails のアプリケーションのログやトレースを Datadog に送りたい人ドキュメントを軽く読んでみたけ...

Datadog APM を触ってみるぞ

はじめにこの記事は Cloud Trace を導入したときに調べたことをまとめたものです。Cloud Trace は、Google Cloud の分散トレーシングシステムで、アプリケーションのパフォーマンス問題を特定、解析できるサービスです。例えば、リクエストを受け取った後にシステム内で行われる各処理にどれぐらいの時間がかかったか、どんなクエリが実行されたかなどを知ることができます。GCP のコンソールの画面では、以下のように各処理の時間を知ることができます。/posts のエンドポイントにリクエストがあったときにリクエスト内で行われる処理時間以下、導入までに調べたことをま...

Cloud Traceでボトルネックを追ってみるぞ

はじめにこの記事は、運用している Cloud Run のコストが思っていたより高かったので、あらためてリソースを見直したときに調べたことをまとめたものです。今回見直した結果、最小インスタンスの設定が 1 になっているリビジョンがいくつかあり、実質使っていないリビジョンも請求稼働対象時間に含まれてしまっていたため、思ったよりコストが高くなっていました。後述する内容は、基本的に既存のドキュメントから抽出したものですが、あらためて CloudRun の料金について調べていて特に役立つと感じた箇所をまとめてみました。 Cloud Run の料金基本的に使用したリソースに対して課金...

Cloud Runの請求対象時間についてあらためて調べてみたぞ

はじめにこの記事では、NestJS と Prisma で作ったアプリケーションを、Github Actions を利用し、GCP 環境にデプロイするまでの流れをまとめてみました。似たような環境を構築しようとする際に参考になれば幸いです。この記事でやることサンプルアプリケーションの準備（nestjs、prisma）GCP リソースの作成（terraform）Github Actions の設定構成は以下の通りで、Cloud Run と Cloud SQL を使ったシンプルな構成の環境です。この環境を作っていきます。構成構成を考えた時に参考にしたドキュメントまとめ...

NestJS + Prisma のアプリケーションを Github Actions でGCP環境にデプロイするぞ

はじめにこの記事は CODE BASE OKINAWA Advent Calendar 2022 2日目の記事です。今回は最近気になっていた Figmaのデザインからreactのコードを生成するツールclapyを試してみたことについて書きました。思っていたよりも生成されたコードの精度が高くて便利そうだったので紹介したいと思います。https://clapy.co/ clapyとはFigmaのデザインから reactのコードを自動生成する Figma Pluginです。インストールや使い方の詳細は公式ドキュメントにおまかせしますが、通常のFigmaのプラグインと同じよう...

FigmaデザインからReactコンポーネントを生成するツール clapyを試してみた

!現在( 2023/04/19 )、この記事の情報は古くなっており、以下のバージョンで修正されたようです。🌸 Segmentation fault and TLS connection error fixhttps://github.com/prisma/prisma/releases/tag/4.13.0https://twitter.com/prisma/status/1648376590349352970 はじめにNestJS と Prisma のイメージを CloudRun にデプロイしたら、クラッシュして起動しなくなったので、原因について調べたことまとめです。...

NestJSとPrismaのイメージをCloudRunにデプロイしたらクラッシュしてコンテナが起動しなくなったので調べたこと

はじめにNestJSで、GraphQL、Prisma、Passportの素振りをしたまとめ記事です。NestJSとPrismaの連携でDBにアクセスするNestJSでGraphQLを利用してデータの取得更新するNestJSとPassportの連携して認証、認可の処理実装する（Cookie / Session による認証）はじめてNestJSを触ってみたときに認証やGraphQLなどを試したいと思っている人の参考になれば幸いです。https://github.com/shimabukuromeg/sample-nestjs 試してみるぞ以下の順番で試していきます。...

NestJSでGraphQLとPrismaとPassportの素振り

はじめにこの記事は Figma Plugin に入門してみたくなって、いろいろと試したことをまとめた記事ですFigma Plugin に入門したくなったモチベーションデザイナーさんといい感じに仕事できるようにFigmaの知識を持っておきたかったFigma Plugin がどういう仕組みで動いてるのか気になってたCreate Figma Plugin が気になってたCreate Figma Plugin を使って Figma Plugin を開発してみたい人の参考になれば嬉しいです Figma PluginとはFigmaは、プラグインをインストールして機能...

Create Figma Plugin を使って Figma Plugin 開発に入門してみるぞ

はじめにTerraformで書かれたコードの読み方が全体的によくわからなかなかったので、調べたことを整理してまとめた記事です。（特にモジュールや全体的なコードの読み方）ファイルとディレクトリ構成、モジュール、変数 あたりのドキュメントをちゃんと読むと、モジュールの仕組みの理解が深まったので、整理してまとめました。アプリケーションエンジニアが Terraform のコード読んでインフラ構成を理解できるようになるぞ！！！が目標です。環境構築などの事前準備関連メモ手元の環境（Mac）でterraformを使う準備$ brew install tfenv$ tfenv --ve...

Terraformを使ってインフラと触れ合いたいぞ

はじめにTerraformでSpotifyのPlaylistを作成する記事が面白かったので、同じことをCDK for Terraformで試してみました。https://learn.hashicorp.com/tutorials/terraform/spotify-playlisthttps://github.com/conradludgate/terraform-provider-spotify CDK for TerraformとはTerraformの定義をHCLではなくプラグラミング言語を使って定義できる（C#、Python、TypeScript、Java、または...

CDK for TerraformでSpotifyのPlaylistを作ってみるぞ

はじめに先日GraphiQLのv2がリリースされたそうです。この記事では、GraphiQLのカスタマイズやプラグインについて、あらためて調べたことをまとめてみました。graphiql-explorer 導入してるdemoがすごく便利そうだったので、手元の環境で動かしてみるところまで試してみました。https://twitter.com/GraphiQL/status/1562561433585733633https://twitter.com/GraphiQL/status/1562579102535544832V2リリースの変更点https://github.com/g...

あらためてGraphiQLをさわってみるぞ

はじめにこの記事は、urqlについて調べたことをまとめた記事です。以下、調べようと思ったモチベーションです。urqlが気になっているかたの参考になれば幸いです。Apollo Client 以外のGraphQLクライアントをを試してみたかったurqlのドキュメントキャッシュがよさそう、という記事を読んだので試してみたかったApollo Clientからurqlに乗り換えた、という記事が話題になっていたので気になっていた urqlとはまずはドキュメントを見てみます。カスタマイズ性と汎用性の高さが推されているようです。urqlとはThe highly custom...

urqlをさわってみるぞ

はじめにSupabaseをローカル開発環境で構築し、GraphqQLのクエリを叩いてみるところまでやってみた記事です。Supabaseはローカル開発環境構築のためのCLIが提供されており、コマンドを何回か叩くだけで環境を用意できます。docker-composeの設定なども必要ありません。GraphQLのサポートはPostgreSQLの拡張機能を有効にして、スキーマを再構築するだけで利用できるようです。基本的に ドキュメントの Local Development の章をなぞっているだけですが、Supabaseをローカル環境で動かしたい、手元にGraphQLが動かせる環境を用意...

Supabaseのローカル開発環境でGraphQLを動かしてみるぞ

はじめに技術ブログの記事やドキュメントを書くなど、文章でアウトプットする機会は多いが、自分の書いた記事が伝わりやすい文章になっているか、いまいち自信がないかたは意外と多いのではないでしょうか。読者や目的に合わせて技術をわかりやすく伝える手法を、テクニカルライティングというそうです。アウトプットするときに、より伝わりやすい文章を書くために、テクニカルライティングについて調べてみました。この記事では、調べた際に参考になった記事をいくつか紹介しようと思います。伝えやすい文章を書きたい、テクニカルライティングについて知りたい、と思っている人の参考になれば幸いです。 良かった記事...

テクニカルライティングについて学ぶぞ

はじめにNestJS入門してみようとしたら、アットマークから始まる記述を知らなかったので調べたことを簡単にまとめた記事です（デコレーターのことよくわかってなかった）デコレーターの仕様は、過去にいろいろと変わって現在に至っているようでしたが、ようやく最近 ECMAScript では Stage 3 になり、TypeScript では今も実験的なサポート experimentalDecorators を使えますが、バージョン 4.8 で TC39 の Decorators を実装することが検討されているようです！この記事は、TypeScriptのドキュメントのサンプルコードを動か...

あらためてデコレーターを学ぶぞ

はじめに途中から参加したプロジェクトで、オンボーディングを兼ねたペアプロをしてもらったらすごくよかったという話です。その振り返りを書いてみました。（オンボーディングを受ける側）ペアプロ・モブプロの目的はいろいろとあると思いますが、今回のペアプロはオンボーディングの時にやったペアプロというイメージで書いてます。転職やプロジェクト移動など、新しい環境に移った人に参考になれば嬉しいです！https://twitter.com/20092014/status/1543948623184273410 環境や前提開発メンバー全員がリモートのチーム（オンラインで常時接続）リ...

オンボーディングでのペアプロがすごくよかった話

はじめにRTK-Queryは、無限ローディングの機能がサポートされてないようで、どうやって実装するのか気になったので試したことをまとめました。!機能のサポートはされていないようでしたが、無限ローディングの実装については、Issueやディスカッションが上がっており、以下の内容が実装の参考になりました。https://github.com/reduxjs/redux-toolkit/issues/1159https://github.com/reduxjs/redux-toolkit/discussions/1171https://github.com/reduxjs/re...

RTK-Queryで無限ローディングを実装してみた

はじめにreact-content-loader を使ったスケルトンスクリーンの実装について書いた記事です。Create React Content Loader のページでコードも生成され、すごく便利ツールだったので試したことをまとめました。https://github.com/danilowoz/react-content-loaderhttps://skeletonreact.com/ スケルトンスクリーンとは画面に表示するデータが読み込まれるまでの間、そのコンテンツの枠組みだけを事前に表示させるUIのことです。こういうやつです。https://skeleto...

Megumi Shimabukuro

GraphQL のデータソースに microCMS を使う

立ち上げ初期のチームとモブプログラミング

Datadog APM を触ってみるぞ

Cloud Traceでボトルネックを追ってみるぞ

Cloud Runの請求対象時間についてあらためて調べてみたぞ

NestJS + Prisma のアプリケーションを Github Actions でGCP環境にデプロイするぞ

FigmaデザインからReactコンポーネントを生成するツール clapyを試してみた

NestJSとPrismaのイメージをCloudRunにデプロイしたらクラッシュしてコンテナが起動しなくなったので調べたこと

NestJSでGraphQLとPrismaとPassportの素振り

Create Figma Plugin を使って Figma Plugin 開発に入門してみるぞ

Terraformを使ってインフラと触れ合いたいぞ

CDK for TerraformでSpotifyのPlaylistを作ってみるぞ

あらためてGraphiQLをさわってみるぞ

urqlをさわってみるぞ

Supabaseのローカル開発環境でGraphQLを動かしてみるぞ

テクニカルライティングについて学ぶぞ

あらためてデコレーターを学ぶぞ

オンボーディングでのペアプロがすごくよかった話

RTK-Queryで無限ローディングを実装してみた

スケルトンスクリーンを実装してみた

GraphQL のデータソースに microCMS を 使う

立ち上げ初期のチームとモブプログラミング

Datadog APM を触ってみるぞ

Cloud Traceでボトルネックを追ってみるぞ

Cloud Runの請求対象時間についてあらためて調べてみたぞ

NestJS + Prisma のアプリケーションを Github Actions でGCP環境にデプロイするぞ

FigmaデザインからReactコンポーネントを生成するツール clapyを試してみた

NestJSとPrismaのイメージをCloudRunにデプロイしたらクラッシュしてコンテナが起動しなくなったので調べたこと

NestJSでGraphQLとPrismaとPassportの素振り

Create Figma Plugin を使って Figma Plugin 開発に入門してみるぞ

Terraformを使ってインフラと触れ合いたいぞ

CDK for TerraformでSpotifyのPlaylistを作ってみるぞ

あらためてGraphiQLをさわってみるぞ

urqlをさわってみるぞ

Supabaseのローカル開発環境でGraphQLを動かしてみるぞ

テクニカルライティングについて学ぶぞ

あらためてデコレーターを学ぶぞ

オンボーディングでのペアプロがすごくよかった話

RTK-Queryで無限ローディングを実装してみた

スケルトンスクリーンを実装してみた

GraphQL のデータソースに microCMS を使う