はじめに こんにちは、がんがんです。 Webサイトを作っていると、リンクの共有を行ってほしいなどのユースケースがあるかと思います。 SNSのアイコンを一から設定し、ボタンを実装していくのは非常に面倒ですよね。 そこで、今回はReact.jsで簡単にシェアボ…

こんにちは、がんがんです。 今回はuseSWRを用いたPagiNationに関する備忘録を書いていきます。 実装はNext.js + Material-uiで行います。 useSWRPagesが廃止されたので、新しく追加されたuseSWRInfiniteについても後述します。

はじめに こんにちは、がんがんです。 Next.jsでフロントの実装時、下記のようなWarningが表示されていました。 Warning: Each child in a list should have a unique "key" prop.エラーではないので処理しなくてもいいかもしれませんが、放置するのは気が引…

はじめに こんにちは、がんがんです。皆さんはSWRというライブラリをご存知ですか？ Next.jsを作っているVercel社(旧Zeit)が作られているライブラリです。 SWRの特徴はfetchしたデータのキャッシュを行えることです。 今回は実際に使ってみて備忘録としてま…

はじめに こんにちは、がんがんです。 Webアプリを作っていて面倒な実装といえば、「認証機能」が挙げられるかと思います。Auth0を使用したり、Firebase Authenticationを使用したり、はたまたフルスクラッチで実装したり... セキュリティの面も考慮すると非…

こんにちは、がんがんです。 Webアプリとかを作っているとお問い合わせフォームが必要になることがあるかと思います。簡単に実装できればいいものの、環境に合わせてお問い合わせフォームの実装は様々なやり方が存在しています。 そこで、今回はCloud Functi…

はじめに こんにちは、がんがんです。Material-uiのドキュメントを見ていると、スマホのスワイプっぽいタブを実装できることを知りました。 実際に今後のためにメモを残しておきます。material-ui.com

はじめに こんにちは、がんがんです。 最近Next.jsを使って遊びでアプリを作っております。 フロントの設計をしている際に、デザインや色はどのように設定していくのか気になりました。 Material-uiはマテリアルデザイン対応ということで、今回はマテリアル…

はじめに こんにちは、がんがんです。 直近の備忘録ではReact.jsやNext.jsの記事を書いていることが多いです。 【Next.js】Next.jsのHello World行ってみた - ganganの技術備忘録 【Next.js】Next.jsアプリ(静的サイト)をFirebase Hostingにデプロイしてみた…

はじめに こんにちは、がんがんです。前回まではMaterial-UIを用いて実装を行っていました。 gangannikki.hatenadiary.jpせっかくならログイン -> Homeの画面へ遷移というよくあるアプリの動作をさせてみたいなと思いました。 そこで今回はReact-Routerにつ…

はじめに こんにちは、がんがんです。 先日よりReact.jsを触っており、その過程でMaterial-UIについて触りました。Material-UIは比較的使用頻度の高いものをコンポーネントとして提供してくれているので非常に使いやすいライブラリです。 今回はそんなMateri…

はじめに こんにちは、がんがんです。 以前の記事でCloud Run・Cloud Buildについて触りました。各記事についてはこちらです。 gangannikki.hatenadiary.jp せっかくなら何か1つアプリを作りCloud Runで運用してみたいなと思いました。 今回はアーキテクチャ…

はじめに こんにちは、がんがんです。 前回の記事でReact.jsのDocker環境を構築しました。 今回はこの環境でMaterial-UIが使えるようにしていこうと思います。前回の記事はこちらです。 gangannikki.hatenadiary.jp

はじめに こんにちは、がんがんです。 インターンの方で最近React.jsを触っております。 自分自身でもReact.jsの練習をやりたいと思い、まずはDockerにて環境を構築しcreate-react-appをやってみたいと思います。