ラベル React.js の投稿を表示しています。 すべての投稿を表示
ラベル React.js の投稿を表示しています。 すべての投稿を表示
2020年7月30日

Parcelでasync/awaitを使うと「regeneratorRuntime is not defined」エラーが出る場合の対処法

›
Parcel  を使ってJavaScriptアプリケーションを書いているときに、async/awaitを使おうとすると下のエラーが出ました。 Uncaught ReferenceError: regeneratorRuntime is not defined 調べたところ、次のサ...
2020年6月16日

データベース不要！ ReactとGoogle Drive APIで任意のデータを保存する

›
前回 はReactアプリにGoogle認証を組み込む方法を試しました。 今回はそのコードを使いながら、さらに Google Drive API を使って任意のデータをログインしているユーザーのGoogle Driveに保存することに挑戦してみました。 完全にブラウザのみで動作する...
2020年6月14日

ReactのSPAアプリケーションでContextとHooksを使ってGoogle認証を実装する

›
ReactのSPAアプリケーションにおいて、ContextとHooksを使うことでGoogle認証の処理をラップして利用するというサンプルを作成しました。 Google Cloud Consoleでアプリケーションを登録する https://console.cloud.googl...
2020年5月7日

Next.jsで静的サイトを出力してFirebase Hostingでホスティングする

›
まずは公式のドキュメントにしたがってNext.jsのアプリケーションを作成しましょう。 Create a Next.js App | Learn Next.js     https://nextjs.org/learn/basics/create-nextjs-app packa...
2020年5月4日

ReactでSVGファイルをコンポーネントとしてレンダリングする

›
egghead.io のレッスンを観ていて良さそうなものがあったので、メモしておきます。 Add SVGs as React Components with Create React App 2.0 https://egghead.io/lessons/react-add...
2020年4月20日

AWS AmplifyとDynamoDBでサーバーレスなREST APIを構築する

›
前回 はユーザー認証機能を付けましたが、まだデータの永続化が出来ていないのでTodoアプリとしては未完成です。   1)  Next.jsでスタティック・エクスポートしたサイトをAWS Amplify Consoleでホスティングする   2)  AWS Amplif...
2020年4月17日

AWS AmplifyでReactアプリにユーザー認証機能を追加する

›
前回 はNext.jsでエクスポートしたWebアプリをAmplify Consoleでホスティングするところまで行いました。 今回はこのアプリに AWS Cognito によるユーザー認証を追加したいと思います。 まず amplify status で現在の状態を確...
2020年4月16日

Next.jsでスタティック・エクスポートしたサイトをAWS Amplify Consoleでホスティングする

›
今回は、Next.jsから（SSR無しの）スタティックなSPAとしてエクスポートしたサイトを、Amplify Consoleでホスティングしてみます。 サンプルReactアプリの作成 npm init -y npm i -S react react-dom next...
2020年4月14日

AWS AmplifyでReactアプリ開発を試してみた

›
時間があったので前から気になっていた AWS Amplify を試してみることにしました。 とりあえず作ったのは、Todoリスト。React (Next.js) によるWebアプリです。 username / password でログインすると、DynamoDB...
2019年3月22日

React/TypeScriptでリバーシゲームを作る (5) - アニメーション

›
前回 でようやくそれなりに強い思考ルーチンを実装することが出来たので、今回は仕上げとして石を裏返すときのアニメーションと、画面遷移時のアニメーションを実装します。 こちら を開くと実際に遊べます。 https://reversi-d1kqojbar.now.sh/ ...
2019年3月7日

React/TypeScriptでリバーシゲームを作る (4) - 思考ルーチンその2

›
前回 でコンピュータの思考ルーチンの枠組みは出来ましたが、まだ単純なルールで動いているだけなので全く強くありませんでした。 今回は、そこそこ強い思考ルーチンを作ることに挑戦してみました。 出来たソースコードはこちらにあります。 https://github.com/mi...
2019年2月16日

React StaticでGoogle Analyticsを使うには

›
React Static でSPAアプリケーションを作ったときに、Google Analyticsでアクセス解析をするにはどうすればよいか、というメモです。 Reactだと react-ga というライブラリがよく使われているようです。これを使うとGoogle Analyt...
2019年1月13日

React/TypeScriptでリバーシゲームを作る (3) - 思考ルーチンその1

›
前回 はリバーシのルールを実装して、人対人の対戦が出来るようになりました。 今回は、一人でも遊べるようにコンピュータの思考ルーチンを実装します。 動くものはこちらです。 https://reversi-d1kqojbar.now.sh/ タイトル画面でレ...
2018年11月15日

Create React AppでWeb Workerを使うには

›
「Web Worker」を使うと、ブラウザ上のJavascriptでも複数のスレッドを使うことが出来るようになります。 Web Worker を使用する - Web API | MDN https://developer.mozilla.org/ja/docs/Web/A...
2018年11月4日

React/TypeScriptでリバーシゲームを作る (2) - ゲームロジック

›
前回 はボード上に石を配置するまでを実装しましたが、今回はさらに リバーシのルール を実装して実際に遊べるようにしたいと思います。 実際に動いているものはこちらで試すことが出来ます。 https://reversi-d1kqojbar.now.sh/ ゲームのル...