こんにちはかみむらです。一応フロントエンドエンジニアをやっていますが、CSSやマークアップは苦手です。なので、できるだけ構造化されたものを使いたいです。そこで、検討されるのがCSSフレームワークです。現在CSSフレームワークはたくさんありますが、特…

こんにちはhiro08です。Reactアプリケーションを多言語化するときに、react-i18nextが便利です。react-i18nextは、Reactに特化したローカリゼーションフレームワークです。i18nextと一緒に使います。

こんにちはかみむらです。半実験的にフロントエンド(React)のエラートラッキングに、Bugsnagを導入してみました。そもそもなぜエラートラッキングを必要とするのでしょうか？ほとんどのアプリケーションでは、障害による機会損失を避けるため最良の設計をし…

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

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

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

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

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

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

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

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

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

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

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

Reactを書いてる時にjsx内にコメントを残したいと思ったので、jsのコメントを使ったらエラーが出たのでメモ。jsxのテンプレート内でのコメントは下記のように書く。 {/* コメント */}