こんにちはhiro08です。仕事で書くブログでは、ブログ記事を書き終える-> 記事をレビューしてもらう流れがあります。そこでよく指摘されたのが、用語の間違いや表記ゆれです。実際に私が指摘された例がこちらです。用語が正確ではない○ Cloud Functions ☓ cl…
こんにちはかみむらです。Cloud Runの記事も3回目となりました。過去の記事はこちらです。 code-log.hatenablog.comcode-log.hatenablog.comそして今回はフロントエンド(Next.js) とCloud Runについての話題です。
この記事はJAMstack Advent Calendar 2019 21日目の記事です。JAMstackのアドベントカレンダーは7日目も参加しています。 qiita.comこんにちはかみむらです。この記事ではReactでUIを作成して、Netlify Functionsを使ってStripeの決済処理を実装していきま…
こんにちはかみむらです。以前こんな記事を書きました。code-log.hatenablog.comこの記事では手動でCloud Runにデプロイしてました。しかし、実際に運用していく場合はCIを使ったテストやデプロイの自動化が必須になってきます。そこで今回はGCPのサービスの…
こんにちはかみむらです。フロントエンド開発でのモジュールバンドラの第一候補はwebpackだと思います。webpackは柔軟に対応できるオプションやパフォーマンスを考慮したライブラリが充実しています。しかし非フロントエンドエンジニアにとっては学習コスト…
こんにちはhiro08です。お仕事でReact を使ってChrome Extensionを開発する機会がありました。初めはcreate-react-appをベースにしたプロジェクト構成で開発してましたが、Content ScriptsやBackground Scriptsを追加する時にwebpackのエントリーポイントを…
こんにちは、かみむらです。Cloud Runは少し前から気になっていましたが、中々触る機会がありませんでした。ですが、最近Cloud Runをフロントエンドで使う事例を目にして、すぐに触ってみたくなりました。Cloud RunとはDockerのコンテナをサーバレスな環境で…
こんにちはかみむらです。以前AWS Amplify ConsoleにReactアプリをホスティングする記事を書きました。 code-log.hatenablog.com今回はGAE(Google App Engine)にホスティングします。GAEとはGoogleが提供するPaaSです。nodejsや、Go、Pythonなど、様々な言語…
vimの検索機能は非常に有効で、使う機会は多いのではないでしょうか?その時に、僕がvimを触り始めた時に、検索ハイライトを消す方法がよく分からなかったので、解決策を書いておきます。
最近静的サイトをホスティングするサービス(netlify、now etc...)が増えていますが、AWSにもAmplify Consoleというホスティングできるサービスがあることを知りました。ざっとドキュメントを読んだ感じ、非常に簡単に扱えそうなので、Reactアプリケーション…
ReactのクライアントレンダリングでOGPに対応させるときに、react-snapが簡単に導入できて便利です。しかし、build時にPuppeteerが走るので、CircleCiでビルドするときはあらかじめ設定が必要です。 以下個人的なconfigファイルの設定。Firebaseにデプロイす…
GCPを使うためにローカルにCloud SDKを入れる必要があります。今まで何度かやっていますが、毎回インストール方法を忘れてしまうので、メモです。
インフラのコード化はDevOps界隈では常識で、インフラをコード化することによって、各環境で設定を使い回すことができるメリットがあります。現在一番有名なInfrastructure as Code(IaC)を実現するツールはterraformですが、個人的にpulumiも気になっていた…
firebaseでサービスを作るときに多くの場合twitterやgoogleなどのOAuthを使って、認証を作ると思います。その際にソーシャルの情報(例えばユーザーネームだったり説明文だったり)をそのままサービスに使いまわしたい時があります。それを実現するためにはfir…
Reactで外部サービスの連携で扱う方法をメモ書きしておきます。特にGoogle AnalyticsはWEBサービスを立ち上げる際に必須の設定となっています。しかし、ReactはSPAなので、普通の設定ではページごとのアクセスを記録することができません。その他にもでSentr…
こんにちはかみむらです。去年、Firestoreを少し触って、理解した気になっていました。しかし、今年に入って個人開発でFirestoreを使おうとしたところ、だいぶ忘れていました。なので、とりあえずリンク漁って、ためになりそうなFirestoreのリンクを集めまし…
storybookはコンポーネントを作るライブラリで、特にデザイナーとエンジニアとのデザインコミュニケーションの手段として最適です。今回はstorybookでatomic designを管理するための構成を作成していきます。
決済処理をフルスクラッチで書く場合非常に大変な作業になってしまいます。そこでReactで決済処理を行いたいならstripeが便利です。今回はhooksやTypeScriptといったモダンな技術を使いつつstripeの決済処理を実装していきます。予めstripeのアカウントを作…
こんにちはかみむらです。React + TypeScriptでcanvas属性を扱いたかったが、getContextがTypeScriptの型エラーに引っかかってしまい解決するのに時間がかかってしまいました。なので今回はReact + TypeScriptでcanvas属性を扱うためのテンプレートを残して…
Expressを書いてたらTypeError: express_1.default is not a functionというエラーが出たのでその解消方法tsconfig.jsonに2つの設定項目追加したら直りました。
こんにちはかみむらです。react-router-domはReactでSPAを作るときに必須のライブラリで、history apiを使ってURLベースのページ遷移を実現するライブラリです。いくつか便利なapiが用意されていますが、今回はwithRouterについての説明です。
こんにちはかみむらです。Gitのバージョンが上がって、新規機能がいくつか追加されたみたいです。なので、下記のgithub blogの記事を参考にしてためそうと思いましたが、gitのバージョンを上げるのが初めてだったので、若干つまずきました。
React + TypeScrptの開発時にCannot find name 'process'とエラーを吐いたので、その対処方法。
私はキーボードにあまりこだわりはなく、HHKB Liteを使ってるのですが、ある日caps lockがオンになったみたいで、マウスはスクロールはできなくなるわ、大文字しか打てなくなるわで大変でした。 今回は自分と同じ組み合わせ(HHKB Lite + Mac)を使ってる方向…
Linuxを開発環境としてる場合、面倒になってくるのがパッケージ管理だと思います。そこで大活躍してくれるのが、Homebre on Linuxです。MacユーザーにとってはおなじみのHomebrewは、Linuxにも対応しています。そこで今回はUbuntuにHomebrew on Linuxをイン…
こんにちはかみむらです。私は開発用PCがノートパソコンとデスクトップパソコンの2台(片方はmacOSで片方はUbuntu)で開発しているのですが、Gitを使って別々のパソコンで開発していくと、Repository not foundというエラーが出てしまいました。今回はこのエ…
create-react-appでnetlifyにそのままデプロイしたらsource mapが有効になっていました。source mapが有効になっていると、下記の画像のように、DeveloperツールでReactアプリケーションのソースコードが丸見えになってしまいます。 souce mapは開発時のデバ…
Reactのアプリケーションでフォームのバリデーションを行い時はyupを使っています。yupはフォームのバリデーションを簡単に入れることができます。特にformikと相性が良く、私もフォーム処理にはformik + yupで行なっています。今回正規表現の入れ方に少し戸…
例えば何らかのPATHを通したいときに下記のようなコマンドをよくみますが、これを削除したい場合の対処法がよくわからなかったので調べてみました。 export PATH=”hoge/fuga/bin:$PATH” 結論から言うとunsetすればいい $なしで指定したPATH名を入力するだけ …
ubuntuのサーバーにpostgres-11をインストールしようとしたら、下記のエラーがでた。 postgresql-10 : Depends: libicu55 (>= 55.1-1~) but it is not installable とりあえず調べてみたところ、postgresはlibicu55以降に対応してるからインストールしろとの…