フロントエンド
こんにちはかみむらです。最近、GatsbyJSの注目度が高くなってると感じます。私はまだキャッチアップできていませんでしたが、色々学習リソースを調べてみたところ「The Great Gatsby Bootcamp」を見つけました。Webサイト高速化のための 静的サイトジェネレ…
こんにちはかみむらです。先日Designfindというサービスを作りました。このサービスはNext.js(静的サイト) + 外部のAPIで構成されていて、Jamstackアーキテクチャーを採用しています。そして、ホスティング先にFirebaseを利用しています。
こんにちはかみむらです。一応フロントエンドエンジニアをやっていますが、CSSやマークアップは苦手です。なので、できるだけ構造化されたものを使いたいです。そこで、検討されるのがCSSフレームワークです。現在CSSフレームワークはたくさんありますが、特…
こんにちはかみむらです。最近は、React + TypeScriptをよく書いているのですが、下記のようなエラーが発生しました。ここでやりたかったことは、Chromeでサポートされたimgのプロパティで、Loading Attributeを使って画像を遅延読み込みしようとしました。 …
こんにちはかみむらです。現在Next.js + microCMSでポートフォリオを作成していて、ホスティングサービスにNowを利用しています。NowはNext.jsと同じZeit社が運営しています。特徴として、NowのCLIライブラリを使えば、Next.jsアプリケーションを1コマンドで…
こんにちはかみむらです。個人的な肌感で、Jamstackアーキテクチャーの構成でWEBサイトを公開する企業が増えてきた気がします。最近では日本製Headless CMS「microCMS」も登場して、だいぶ日本でも採用しやすい環境が整ってきました。私もJamstackアーキテク…
こんにちはかみむらです。もしReactベースのフレームワークで、スタイルを構成する場合はCSS in JSライブラリを検討する思います。特に人気なのが、styled-componentsです。最近では採用しているプロダクトが増えてきています。自分もstyled-componentsを利…
こんにちはかみむらです。最近はTypeScriptを採用する企業が増えてきました。TypeScriptの型システムは、サーバーサイドだけでなく、フロントエンドでも恩恵を受けることができます。そのため、各フロントエンドのフレームワークで、TypeScriptを簡単に導入…
こんにちはかみむらです。JAMstackアーキテクチャーや、静的なウェブサイトにお問い合わせフォームを実装するときは、Static Formsで作成できます。
こんにちはかみむらです。Next.js 8.1以降から、ウェブページをAMP化できるAPIが登場しました。AMPとはAccelerated Mobile Pagesの頭文字を取った言葉です。AMP対応をすることで、高速なモバイルページを実現できます。一般的に遅いウェブページは直帰率が非…
こんにちはhiro08です。Reactアプリケーションを多言語化するときに、react-i18nextが便利です。react-i18nextは、Reactに特化したローカリゼーションフレームワークです。i18nextと一緒に使います。
こんにちはかみむらです。半実験的にフロントエンド(React)のエラートラッキングに、Bugsnagを導入してみました。そもそもなぜエラートラッキングを必要とするのでしょうか?ほとんどのアプリケーションでは、障害による機会損失を避けるため最良の設計をし…
こんにちはかみむらです。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の決済処理を実装していきま…
こんにちはかみむらです。フロントエンド開発でのモジュールバンドラの第一候補はwebpackだと思います。webpackは柔軟に対応できるオプションやパフォーマンスを考慮したライブラリが充実しています。しかし非フロントエンドエンジニアにとっては学習コスト…
最近静的サイトをホスティングするサービス(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属性を扱うためのテンプレートを残して…
こんにちはかみむらです。Qiitaを眺めていた時にJAMstackアーキテクチャーというワードを見つけました。最近はReactやvueなどのSPAフロントエンドばかり開発していたのに、JAMStackというアーキテクチャを明確には知りませんでした。 なので今回はJAMstackが…