JavaScript

OpenStreetMapとNominatim APIで行政区の境界線を取得する

市や区の境界線の座標情報をJavaScriptで取得したいと思ったのでそのメモ。 今回はOpenStreetMap(OSM)を使ってやる。 OSMにはNominatimというものがあり、これが住所によるOSMのデータ検索やその逆を提供してくれます。詳細はこちら。 JA:Nominatim - OpenSt…

【挫折】React NativeでカーナビみたいなUIを実現してみる【未完】

メモです。でも結論からするとうまく行かずに挫折。この投稿はその失敗の記録である。 はじめに タイトルどおりなんですが、Mapboxにはカーナビみたいなturn by turnのナビゲーションを実現するためのNavigation SDKというものが存在しています。でもiOSとAn…

Nest.jsで認可処理を実装したい

今作ってるAPIでは初めてNest.jsを使ってるんだけど、認可処理をどうしようかと考えたのでそのメモ。 ちなみにこの投稿では簡単な定義として認証(Authentication)とは利用者の本人確認、つまり通信の相手が誰であるかの確認とする。一方、認可(Authorizatio…

既存のデータベースでPrisma migrateする。しかもPostGISを使う

既存のデータベースをPrismaでマイグレーションできるようにしたくなった。理由はいろいろあるがやはりローカル環境 → 開発環境 → ステージング環境 → 本番環境へとDBの定義を反映していくのが手作業はさすがにないなと思えてきたからだ。もちろん実際には毎…

AWS AppSyncのスキーマ情報からAmplify以外の方法でTypeScriptの型を生成する

メモです。 最近、GraphQLを使い始めた。AWSのAppSyncを使っている。 GraphQLではスキーマの情報をschema.graphqlとかschema.jsonとかってファイルで定義する。AppSyncをマネージメントコンソール上でポチポチと作った場合もこのファイルがダウンロードでき…

react-intlでReact Nativeアプリの国際化対応をする

はじめに だいぶ前にReact Nativeで開発中のアプリを国際化するにあたってreact-intlを使ったのでそのあたりのメモをブログに書いていたが、下書きのまま公開していなかった。今回、改めて別のアプリで同様のことをする必要があって過去の自分の下書きを見つ…

huskyとlint-stagedでコミット前に確実にLintを実行していく

はじめに コミット前にlint系のチェックをしたいケースってあると思います。特にチーム開発とかの場合、全員がlintをちゃんと実行してほしいとかあるかと。そういったときのためにコミットのタイミングでlint系のコマンドを実行するための仕組みとしてhusky…

Amazon Cognito Identity Poolの外部プロバイダとしてFirebase Authenticationを使う

はじめに AWSには認証・認可のサービスとしてAmazon Cognitoというものが存在します。ややこしいのですが、認証のためのコンポーネントがAmazon Cognito user pools(以下、user pool)で認可のためのコンポーネントがAmazon Cognito identity pools (以下、id…

React NativeでAWS Amplifyを使わずS3にファイルアップロードしたい - マルチパートアップロード編 -

はじめに マルチパートアップロードをするには さっそく実装する まとめ ソースコード はじめに こちらの投稿の続きにあたります。 React NativeでAWSのS3にファイルアップロードする処理を実装するにあたり、AWS Amplifyを使わずにAWS SDKを使って実装しよ…

React NativeでAWS Amplifyを使わずS3にファイルアップロードしたい

はじめに AWS Amplifyでアップロードする場合 なぜAWS Amplifyを使わずにアップロードしたいのか さっそくReact Nativeからアップロードしてみる 実行 まとめ ソースコード はじめに AWSのS3にファイルをアップロードするにあたり、今だとAWS Amplifyを使っ…

【超重要な追記あり】Docker Desktop for Macを使ってる人はみんな今すぐvirtiofsを使うんだ!

前提 はじめに virtiofsさっそく試す もうちょっとちゃんと計測してみる Named Volumeを試してみる まとめ 追記(超重要) 追記2 前提 特にVSCodeのRemote Containers使ってる人には耳寄りです。別に使ってなくてもMacでDocker Desktop使ってる人ならあては…

個人的に思うAWS Amplifyのいいところ、いまいちなところ

ちょっとそんな話をする機会があったのでついでにまとめておく。技術的な内容というよりはポエムに近いなぐり書きなので甘い部分は多々あると思う。 前提 大前提としてあくまでも僕個人の感覚だし、自分の置かれている状況を踏まえての話なのでフラットな比…

Nest.jsに入門する

今回、とあるAPIを試しに実装する機会があってPythonでFastAPIで作ろうかと思ったのだけれどせっかくなのでNest.jsを試してみることにしたのでそのメモ。 Nest.jsとは セットアップ Fastifyを使う Controllerを実装してみる パスパラメータ クエリパラメータ…

AWS Amplifyを使ったReact NativeなアプリをBitriseでビルド

はじめに 今回、React Nativeで開発しているとあるアプリでAWS Amplifyを使ったのですがBitriseでビルドしたりチーム開発で使うにあたってちょっと困ったりしたのでメモ。 はじめに 前提 なぜAmplifyを使ったか Bitriseでビルドする ではどう対応するか Bitr…

Amplify ConsoleでNode.jsのバージョンをアップデートする (追記あり)

(Update)このブログは最後の追記だけを見れば事足ります。 Amplify ConsoleでとあるReact、Next.jsベースのアプリケーションをホストしているんだけど、最新のプッシュで動いたデプロイがビルドのフェーズで落ちてしまった。 ログは以下。 2022-01-12T01:2…

Macで使うVS CodeとRemote Containerの性能を大幅改善

はじめに なぜ遅いのか 何をやるのか 計測 名前付きボリュームを使ってない場合 Named Volumeを使う場合 Macからどう見えているか 結論とまとめ はじめに 以前からいろんなところで話していますが、僕は普段、手元のMacには言語系のランタイムとかは入れてお…

Firebase CrashlyticsとSentryで悩んでみる

React Nativeで開発しているモバイルアプリのモニタリングをどうするかなってところで簡単に調べたのでまとめ。 選択肢としては概ねFirebase CrashlyticsとSentryの2種類。どちらもこれまでモバイルアプリを主戦場としてこなかった僕でも知ってるレベルの有…

patch-packageでnpmにパッチあてる。しかも簡単に

React Nativeのアプリにとあるライブラリを入れたところビルドが失敗するようになってしまった。 実はこのライブラリってのがもうあまり活発に動いていないライブラリなんだけれど、同様の機能を持つ有償パッケージを入れるか、自前で作るかみたいな事情なの…

テストのないReact Nativeの環境に後からJestをセットアップする

先日タイトルの内容で久しぶりに勉強会で発表してきました。といっても10分のLTですが。React Native Meetupは過去に1回だけ参加したことがあって発表するのは初めてです。 ここ数年はAWSクラウドおよびサーバーレス関連での発表がほとんどだったのでそれも…

JavaScriptで配列の中身を全部消すにはlengthを0にすればいいよ(追記あり)

タイトルどおりの小ネタです。知ってる人には何を今さらって言われる気もしますが。 とある要件でconstで宣言された配列の中身を全部消してしまいたいことがありました。でもconstで宣言されてるのでnullを入れると当然Uncaught TypeError: Assignment to co…

JavaScriptで正確な時を刻む

ちょっと大げさなタイトルだけど単にJavaScriptで時間を計測するような処理を実装しようとしたら上手く行かなかった話。 最初は普通に1秒おきにカウントしていけばいいだけなんじゃないの?と思って安直にこんな感じで書いてみた。 //ゼロ埋め const padding…

Next.jsのIncremental Static RegenerationをVercel以外でやってみる

本記事はNext.js Advent Calendar 2020の9日目です。 tl;dr Vercel以外でもIncremental Static Regenerationは可能 試した範囲ではフルに機能するのはコンテナで動かした場合のみ AWSのサーバーレスで動かすのは現時点で絶望的 はじめに 早速ですが、みなさ…

AWS Amplifyを無理して使わなくてもいいケースについて挙げてみる

AWS AmplifyといえばAWSが提供しているフロントエンド開発者向けのライブラリやツールセットです。今回はそんなAWS Amplifyについてです。 はじめに おさらい AWS Amplifyはフロントエンド開発者にとっての銀の弾なのか 無理して使わなくてもいいケース バッ…

Microsoft Edge Tools for VS Codeを試したらいい感じだったが消化不良に終わった

はじめに Microsoft Edge Tools for VS Code Microsoft Edge やってみる Pros / Cons Pros Cons まとめ はじめに React.jsとかVue.jsとか使ったアプリケーションの開発にはVS Codeを使っています。最近発表されたMicrosoft Edge Tools for VS Codeを試したら…

AWS LambdaとNuxt.jsでServer Side Renderingする(2020年版)

サーバーレスでサーバーサイドレンダリング(SSR)の後編です。前編はこちら。 www.keisuke69.net なお、同内容をこちらのイベントでも話す予定ですので興味あるかたはぜひこちらも。 serverless-newworld.connpass.com はじめに サンプルアプリ serverless.…

Gridsomeで作ったサイトをせっかくなのでちゃんとホスティングしてみる、Amplify Consoleで。

はじめに Shifter Gridsome Amplify Console ここらへんが気になる はじめに 先日、Gridsomeを試したわけですがせっかくなのでホスティングしてみようと思いついたため、サクッと試してみようと思ったらサクッとできたのでメモ。 www.keisuke69.net ホスティ…

Vue.jsのサイトジェネレータGridsomeが最高かもしれない

はじめに Gridsome どんな感じで動くのか やってみる データソースとかもろもろ設定してみる ビルドする Wordpressをデータソースに設定してみる まとめ はじめに 前回、Docker + Remote Containersを最高だと紹介したわけですが、今回はGridsomeを紹介しま…

©Keisuke Nishitani, 2023   プライバシーポリシー