hiro08gh

ソフトウェアに関すること

Vim + textlintで良質なブログ記事を書こう!

Vim

こんにちはhiro08です。仕事で書くブログでは、ブログ記事を書き終える-> 記事をレビューしてもらう流れがあります。そこでよく指摘されたのが、用語の間違いや表記ゆれです。実際に私が指摘された例がこちらです。用語が正確ではない○ Cloud Functions ☓ cl…

Next.js(SSR)をCloud Runにデプロイしてみた

GCP

こんにちはかみむらです。Cloud Runの記事も3回目となりました。過去の記事はこちらです。 code-log.hatenablog.comcode-log.hatenablog.comそして今回はフロントエンド(Next.js) とCloud Runについての話題です。

React + Netlify FunctionsでStripeの決済処理を実装する

この記事はJAMstack Advent Calendar 2019 21日目の記事です。JAMstackのアドベントカレンダーは7日目も参加しています。 qiita.comこんにちはかみむらです。この記事ではReactでUIを作成して、Netlify Functionsを使ってStripeの決済処理を実装していきま…

Cloud Buildを使ってCloud Runの継続的デプロイ環境を作成する

GCP

こんにちはかみむらです。以前こんな記事を書きました。code-log.hatenablog.comこの記事では手動でCloud Runにデプロイしてました。しかし、実際に運用していく場合はCIを使ったテストやデプロイの自動化が必須になってきます。そこで今回はGCPのサービスの…

Parcelを使って数ステップでReact + TypeScriptの開発環境を構築する

こんにちはかみむらです。フロントエンド開発でのモジュールバンドラの第一候補はwebpackだと思います。webpackは柔軟に対応できるオプションやパフォーマンスを考慮したライブラリが充実しています。しかし非フロントエンドエンジニアにとっては学習コスト…

ReactでChrome Extensionを開発するために必要なwebpackのビルド設定

こんにちはhiro08です。お仕事でReact を使ってChrome Extensionを開発する機会がありました。初めはcreate-react-appをベースにしたプロジェクト構成で開発してましたが、Content ScriptsやBackground Scriptsを追加する時にwebpackのエントリーポイントを…

Cloud RunにContainer Registryを使ってデプロイするための一連の流れ

GCP

こんにちは、かみむらです。Cloud Runは少し前から気になっていましたが、中々触る機会がありませんでした。ですが、最近Cloud Runをフロントエンドで使う事例を目にして、すぐに触ってみたくなりました。Cloud RunとはDockerのコンテナをサーバレスな環境で…

Cloud BuildでReactアプリをGAEにデプロイする

こんにちはかみむらです。以前AWS Amplify ConsoleにReactアプリをホスティングする記事を書きました。 code-log.hatenablog.com今回はGAE(Google App Engine)にホスティングします。GAEとはGoogleが提供するPaaSです。nodejsや、Go、Pythonなど、様々な言語…

vimで検索ハイライトを消したい時のコマンド

Vim

vimの検索機能は非常に有効で、使う機会は多いのではないでしょうか?その時に、僕がvimを触り始めた時に、検索ハイライトを消す方法がよく分からなかったので、解決策を書いておきます。

AWS Amplify ConsoleにReactをデプロイする

最近静的サイトをホスティングするサービス(netlify、now etc...)が増えていますが、AWSにもAmplify Consoleというホスティングできるサービスがあることを知りました。ざっとドキュメントを読んだ感じ、非常に簡単に扱えそうなので、Reactアプリケーション…

react-snapを走らせるためのCircleCiの設定

ReactのクライアントレンダリングでOGPに対応させるときに、react-snapが簡単に導入できて便利です。しかし、build時にPuppeteerが走るので、CircleCiでビルドするときはあらかじめ設定が必要です。 以下個人的なconfigファイルの設定。Firebaseにデプロイす…

MacにCloud SDKをインストールする

GCP

GCPを使うためにローカルにCloud SDKを入れる必要があります。今まで何度かやっていますが、毎回インストール方法を忘れてしまうので、メモです。

Pulumiを使ってGCPのインフラ環境を構築する

インフラのコード化はDevOps界隈では常識で、インフラをコード化することによって、各環境で設定を使い回すことができるメリットがあります。現在一番有名なInfrastructure as Code(IaC)を実現するツールはterraformですが、個人的にpulumiも気になっていた…

React + FirebaseでTwitter認証の情報をfirestoreに保存する

firebaseでサービスを作るときに多くの場合twitterやgoogleなどのOAuthを使って、認証を作ると思います。その際にソーシャルの情報(例えばユーザーネームだったり説明文だったり)をそのままサービスに使いまわしたい時があります。それを実現するためにはfir…

Reactの外部サービス連携について(Google Analytics、Sentry、Hotjar)

Reactで外部サービスの連携で扱う方法をメモ書きしておきます。特にGoogle AnalyticsはWEBサービスを立ち上げる際に必須の設定となっています。しかし、ReactはSPAなので、普通の設定ではページごとのアクセスを記録することができません。その他にもでSentr…

Firestoreを設計するときに参考になったリンク

こんにちはかみむらです。去年、Firestoreを少し触って、理解した気になっていました。しかし、今年に入って個人開発でFirestoreを使おうとしたところ、だいぶ忘れていました。なので、とりあえずリンク漁って、ためになりそうなFirestoreのリンクを集めまし…

React + StorybookでAtomic Designするための構成

storybookはコンポーネントを作るライブラリで、特にデザイナーとエンジニアとのデザインコミュニケーションの手段として最適です。今回はstorybookでatomic designを管理するための構成を作成していきます。

React + ExpressでStripeの決済処理を実装する

決済処理をフルスクラッチで書く場合非常に大変な作業になってしまいます。そこでReactで決済処理を行いたいならstripeが便利です。今回はhooksやTypeScriptといったモダンな技術を使いつつstripeの決済処理を実装していきます。予めstripeのアカウントを作…

React + TypeScriptでcanvas属性を扱う方法

こんにちはかみむらです。React + TypeScriptでcanvas属性を扱いたかったが、getContextがTypeScriptの型エラーに引っかかってしまい解決するのに時間がかかってしまいました。なので今回はReact + TypeScriptでcanvas属性を扱うためのテンプレートを残して…

ExpressでTypeError: express_1.default is not a function エラーの解消方法

Expressを書いてたらTypeError: express_1.default is not a functionというエラーが出たのでその解消方法tsconfig.jsonに2つの設定項目追加したら直りました。

react-router-domのwithRouter apiを使う場面

こんにちはかみむらです。react-router-domはReactでSPAを作るときに必須のライブラリで、history apiを使ってURLベースのページ遷移を実現するライブラリです。いくつか便利なapiが用意されていますが、今回はwithRouterについての説明です。

UbuntuのGitを最新バージョンにあげる

こんにちはかみむらです。Gitのバージョンが上がって、新規機能がいくつか追加されたみたいです。なので、下記のgithub blogの記事を参考にしてためそうと思いましたが、gitのバージョンを上げるのが初めてだったので、若干つまずきました。

React + TypeScriptでwebpackがCannot find name 'process'とエラーを吐いた時の対処方法

React + TypeScrptの開発時にCannot find name 'process'とエラーを吐いたので、その対処方法。

HHKB Lite + Macの組み合わせでcaps lockがオンになってしまった時の対処法

私はキーボードにあまりこだわりはなく、HHKB Liteを使ってるのですが、ある日caps lockがオンになったみたいで、マウスはスクロールはできなくなるわ、大文字しか打てなくなるわで大変でした。 今回は自分と同じ組み合わせ(HHKB Lite + Mac)を使ってる方向…

Homebrew on Linuxをubuntuにインストールする

Linuxを開発環境としてる場合、面倒になってくるのがパッケージ管理だと思います。そこで大活躍してくれるのが、Homebre on Linuxです。MacユーザーにとってはおなじみのHomebrewは、Linuxにも対応しています。そこで今回はUbuntuにHomebrew on Linuxをイン…

git pushまたは、cloneの時にRepository not foundと言われてしまった時の対処方法

こんにちはかみむらです。私は開発用PCがノートパソコンとデスクトップパソコンの2台(片方はmacOSで片方はUbuntu)で開発しているのですが、Gitを使って別々のパソコンで開発していくと、Repository not foundというエラーが出てしまいました。今回はこのエ…

create-react-appでのbuildデプロイしたらsource mapが有効になっていたときの対処法

create-react-appでnetlifyにそのままデプロイしたらsource mapが有効になっていました。source mapが有効になっていると、下記の画像のように、DeveloperツールでReactアプリケーションのソースコードが丸見えになってしまいます。 souce mapは開発時のデバ…

yupでフォームのバリデーションに正規表現を追加したい

Reactのアプリケーションでフォームのバリデーションを行い時はyupを使っています。yupはフォームのバリデーションを簡単に入れることができます。特にformikと相性が良く、私もフォーム処理にはformik + yupで行なっています。今回正規表現の入れ方に少し戸…

ubuntuで環境変数を削除したいときにunsetコマンドが便利だった

例えば何らかのPATHを通したいときに下記のようなコマンドをよくみますが、これを削除したい場合の対処法がよくわからなかったので調べてみました。 export PATH=”hoge/fuga/bin:$PATH” 結論から言うとunsetすればいい $なしで指定したPATH名を入力するだけ …

Depends: libicu55 (>= 55.1-1~) but it is not installableと言われてしまった時の対処法

ubuntuのサーバーにpostgres-11をインストールしようとしたら、下記のエラーがでた。 postgresql-10 : Depends: libicu55 (>= 55.1-1~) but it is not installable とりあえず調べてみたところ、postgresはlibicu55以降に対応してるからインストールしろとの…