murasukeのブックマーク - はてなブックマーク

ReactのSPAアプリケーションでContextとHooksを使ってGoogle認証を実装する
ReactのSPAアプリケーションにおいて、ContextとHooksを使うことでGoogle認証の処理をラップして利用するというサンプルを作成しました。 Google Cloud Consoleでアプリケーションを登録する https://console.cloud.google.com/ OAuth consent screenを設定する OAuth client IDを作成する Create React AppでReactアプリケーションを作成する npx create-react-app project-namecd project-name public/index.html を編集する WebアプリケーションでGoogle認証を利用するための最もシンプルなサンプルコードがこちらにあります。 Google Sign-In for Websites | Google Devel
murasuke 2021/07/04
react
リンク
データベース不要！ ReactとGoogle Drive APIで任意のデータを保存する
前回はReactアプリにGoogle認証を組み込む方法を試しました。今回はそのコードを使いながら、さらにGoogle Drive APIを使って任意のデータをログインしているユーザーのGoogle Driveに保存することに挑戦してみました。完全にブラウザのみで動作するReactアプリケーションなので、バックエンドサーバは不要です。Netlifyなど静的サイトのホスティングサービスを使ってデプロイすることが可能です。 Google Drive内の所定のフォルダからファイル一覧を表示。ファイル名がクリックされるとその内容（テキストデータ）を表示。テキストを入力・編集して保存ボタンを押し、ファイル名を入力するとGoogle Driveにテキストデータを保存。ということを行っています。２つのContextプロバイダー認証状態とアプリケーション固有の状態を分けて2つのContextプロバ
murasuke 2021/07/04
react
リンク
Create React AppでWeb Workerを使うには
「Web Worker」を使うと、ブラウザ上のJavascriptでも複数のスレッドを使うことが出来るようになります。 Web Worker を使用する - Web API | MDN https://developer.mozilla.org/ja/docs/Web/API/Web_Workers_API/Using_web_workers#Web_Workers_API これによって、CPU負荷の高い計算処理などを別スレッドで実行することで、画面の反応が鈍くなったりするのを防ぐことが出来ます。今回は、Create React Appで作成したプロジェクトでWeb Workerを使う方法を調査しました。 1. publicフォルダにWorkerのJSファイルを配置して読み込む。 ⇒　最も基本的で単純な方法です。publicフォルダに配置したファイルはそのままデプロイされるので下の方法で
murasuke 2021/07/04
リンク
1