テトリス本番開発環境構築 さて、いよいよ、リリースのための開発環境を構築します。（今までのはデモ環境です。） 手順を整理します。 現在下記手順の「3.プロトタイプ構築」まで終わっている想定です。 以後、4方式設計以降を実施します。 完成したら、公開してurlを載せる予定です。 デモ版もきちんと動くのですが、テトリス以外にも色々なデモが混ざってるので、そのままではバンドルファイルをUPできないわけです。 それに、デモ版をまじめにレビューされても困るので。（デモ版に対して欠点を探すような、ひどいあげあし取りな人がいないとも限らない） 手順 要求定義 発注者の要望のヒアリング 使用目的、使用環境、使用者、予算、納期 要件定義 必要な機能の洗い出し プロトタイプ構築 HTMLモック構築 仮リアクト構築 デモンストレーション 方式設計 技術選定 言語選定 ハード、ソフト選定 性能比較、機能比較、予算比較 サーバー選定 見積比較、機能比較、性能比較 ライブラリ選定 バージョン選定 ライブラリ整合性確認 開発環境定義 コミュニケーションツール 開発用リポジトリ 開発用PC、デバイス 開発環境構築 開発用サーバー構築 開発用モック構築 開発用フロントエンド構築 基本設計 画面要素定義 イベント定義 開発準備 TypeScript定義 Storybook製造 APIモック構築 各種アカウント購入 詳細設計 データ定義 API定義 コンポーネント定義 内部ロジック定義 プログラミング TypeScript製造 React製造 自動テスト製造 DB製造 API製造 単体テスト 自動単体テスト 結合テスト 自動結合テスト 総合テスト 手動総合テスト デプロイ 4.1 技術選定 技術選定はReactで決定 WindowsでnodejsでOK 4.2 サーバー選定 格安のWebサーバーでOKだが、APIとDB積めること 4.3 ライブラリ選定 Storybookでカタログつくって早々に公開したい Storybookやるとpropsが複雑になるのでTypeScriptで型参照できると便利 Storybookに付随してCSS Moduleが相性いいので、loaderを積む サーバーは、とりあえずwebpack-dev-serverでOK 画面切り替えするからreact-router-dom必要 ゲームだしHooks使うからRedux不要 開発速度重視なので、yarn使って適当にバージョン決めればOK 4.4 開発環境定義 個人開発なのでGitLabの無料枠でOK ソース公開用に無料のGitHub使う 1人なのでコミュニケーションツール不要 5. 開発環境構築 コマンド npm init yarn add react react-dom yarn add typescript yarn add ts-loader css-loader sass-loader file-loader style-loader sass sass-loader yarn add webpack webpack-cli webpack-dev-server yarn add storybook yarn add eslint prettier git init touch .gitignore touch tsconfig.json touch .prettierrc touch .prettierignore touch src touch dist

divなどの親要素などがクリック、又はエンターキーを押された時に関数を実行する書き方をまとめました。 どう書くか lib/pressEnter.ts const PressEnter = (pressKey: string, callback: () => void) => { if (pressKey === "Enter") callback(); }; export default PressEnter; App.tsx import { useState } from "react"; import PressEnter from "./lib/pressEnter"; export const App = () => { const [countNum, setCountNum] = useState(0); return ( <div> <span tabIndex={1} onClick={() => setCountNum(countNum + 1)} onKeyDown={(event) => PressEnter(event.code, () => setCountNum(countNum + 1)) } > 押すと値が増えるよ </span> <p>{countNum}</p> </div> ); }; ちょっと例が分かりづらいですが、こんな感じで書くことができます。 event.code を引数として渡し、どのキーが押されたかを判定して、関数を実行するかどうかを見ています。 event.keyCode は非推奨のため、こちらを利用しています。 利点 このように記載する理由として、テストを書きやすくするメリットがあるかなと考えてます。以下を分けてテストできるようになるためです。 エンターキーを押して、関数が実行されるか(PressEnterでテストができる) 実行される関数は意図した挙動か 下記は Jest によるテストの例になります。 lib/pressEnter.test.ts import PressEnter from "./pressEnter"; describe("#PressEnter", () => { const mockCallback = jest.fn(); describe("when key pressed other than Enter", () => { PressEnter("KeyA", mockCallback); expect(mockCallback.mock.calls.length).toBe(0); }); describe("when Enter key pressed ", () => { PressEnter("Enter", mockCallback); expect(mockCallback.mock.calls.length).toBe(1); }); }); また、複数のcomponent上でエンターキーが押されたら、、、という関数を書く必要がなくなり、DRYに書くことができますね。 今回のコードは codesandbox にまとめてあります。 div 要素などにキーイベントを当てたい、などの場合の参考になればと思います。

概要 firestoreから取得した情報をreactで表示する方法 参考にした記事 https://future-architect.github.io/articles/20200819/ 詰まったところ firestoreから取得したデータをtypescripではなく、javascriptで扱う際の、データの扱い方がわからなかった。 詰まったコード const [loading, setLoading] = useState(true); const [users, setUsers] = useState([]); useEffect(() => { const searchUsers = async () => { const res = await firebaseStore.collection('users').get(); if (res.empty) return []; const userList = []; res.forEach(doc => { userList.push(doc.data()); }) setUsers(userList); } searchUsers(); setLoading(false); }, []); いくつか自分なりに調整 1 user初期値をオブジェクトの空配列に変える const [users, setUsers] = useState([{}]); 2 データを配列に入れるときに、keyを設定してあげる res.forEach(doc => { const data = doc.data(); userList.push({ id: doc.id, name: data.name }); }) 3 mapでwarningが出ていた。returnすると表示できた。 return ( <div className="App"> {users.map((user) => { return <li key={user.name.toString()}>{user.name}</li> }) } </div> );

Reactのチュートリアルで躓いた人 公式のReactのチュートリアルで躓いた人は結構いるんじゃないかと思っています。実際僕も僕の周りも躓いている人は多い印象でした。 今回はその理由を提示したうえで、何から勉強すればいいのかを考えてみた 状態管理機能 Reactのチュートリアルで躓く人の大半は、状態管理の部分で躓いていると思ってる。 そもそもReactには2種類の書き方があり、 クラスコンポーネント 関数コンポーネント の二つでコンポーネントを記述出来る。 元々Reactの状態管理やライフサイクルの機能はクラスコンポーネントにしかなかった。 その為stateやpropsを用いて状態管理をするにはクラスコンポーネントを使うしかなかった過去がある。 現状ではReact Hooksを用いて関数コンポーネントでも状態管理やライフサイクルの機能を使えるようになった。 そしてReact Hooksを用いた関数コンポーネントでは、クラスコンポーネントと比べてコード量も少なく、読みやすくなり、状態管理等が理解しやすくなった 実際にReactの開発チームも「フック、クラスのいずれを使うべきですか、あるいはその両方でしょうか？」という問いに対して 長期的には、フックが React のコンポーネントを書く際の第一選択となることを期待しています。 https://ja.reactjs.org/docs/hooks-faq.html#should-i-use-hooks-classes-or-a-mix-of-both と述べている。 長々続けてもあれなのでここらでざっくりと説明すると Reactの状態管理を一から学ぶなら、クラスコンポーネントではなく、関数コンポーネントで学ぶ方が、導入としては分かりやすい ということ。 ただ注意点として hooksを用いた関数コンポーネントは、互換性のないサードパーティ製のライブラリがあったり、componentDidCatch と　getDerivedStateFromError　これら二つのライフサイクルが使えないという問題点がある。 結論 コード数が少なく比較的読みやすいReact Hooksを用いた関数コンポーネントから学習し、必要になったタイミングでクラスコンポーネントの学習に移行するのが良いのでは無いか？ 次のpartでは関数コンポーネントを実際に見てみる。

create-react-appで環境構築した後に。。。 コマンド npm install @typescript-eslint/parser@4.1.0　(versionは4.2.0未満であること) npx yarn add -D @types/react npx yarn add eslint-config-react-app

コマンド npm install @typescript-eslint/parser@4.1.0　(versionは4.2.0未満であること) npx yarn add -D @types/react npx yarn add eslint-config-react-app

　create-react-appで作成されない create-react-appで二度目以降、 固まって ... yarn eject Removes this tool and copies build dependencies, configuration files and scripts into the app directory. If you do this, you can’t go back! We suggest that you begin by typing: cd myapp yarn start Happy hacking! のところまでいかず ... Done in ~s と出て何も変わらない人向けの記事です。 ちなみに一度固まったらいくら待っても installing とはなりません。ご注意を。 　上のメッセージに関わらず、きちんと実行できないときの対策 1.後述 2.グローバルにcreate-react-appを過去installした場合 →https://qiita.com/dhythm/items/92b3188d32ab5a5fd0e2 理由は知りませんがcreate-react-appはグローバルにインストールしない方がよさそうです。 3. package.jsonがどこかしら残ってる場合。 消しましょう。アプリは専用のホームディレクトリでなく専用フォルダを作って実装した方が良いらしいです。 4.npmのキャッシュが多すぎる場合 下のコマンドを実行 npm cache clean --force 5.エラーメッセージ：npm, yarnでインストールに時間がかかります！と出た場合。 into There appears to be trouble with your network connection . Retrying... yarn installを行うディレクトリで .yarnrcというファイルを作り中に network-timeout 600000 と記述する。もしくは下記のコマンドを実行。 yarn add YourPackageHere --network-timeout 100000 6.1~5まででは解決できなかった場合 npx の後に--ignore-existing を挟むと上手くいくことがある 例：npx --ignore-existing create-react-app my-app --template typescript 7.nodeのヴァージョンが古すぎたり、新しすぎると上手くいかない。こともあるらしい 8.最後の手段 フォルダ内のデータをすべて削除、create-react-appグローバルもローカルもアンインストール、npm, yarnアンインストール、nodeアンインストールしてもう一度色々とインストール。(でもウィンドウズだと結構メンドクサイ。。。) 1 参照先→https://stackoverflow.com/questions/58738299/cannot-create-react-app-template-npm-hangs/64535070#64535070?newreg=5c66d561771e4371ba76a29623b107bb デスクトップ左下の検索欄から「リソースモニター」を実行。 そのCPUタグを押したうえで create-react-appコマンドを実行。 それで中断したcmd.exeを右クリックして「プロセスの再開」をクリック。 原因 多分ずぼらな性格のせいで、勝手に作動するセキュリティソフト？ByteFenceを放置していたから。 最後 役に立ったらグッド反応ください。

React app(ポートフォリオサイト)をやっとデプロイできた 最終的に成功した時に参考にしたサイト 試した中でこのページ以外のやり方だと、なぜかエラーが出てデプロイできなかった。 エラーメッセージ npm ERR! missing script: build npm ERR! A complete log of this run can be found in: npm ERR! /Users/kakizakimanato/.npm/_logs/2021-06-07T14_05_58_985Z-debug.log npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! portfolio@0.1.0 deploy: `npm run build && gh-pages -d build` npm ERR! Exit status 1 npm ERR! npm ERR! Failed at the portfolio@0.1.0 deploy script. npm ERR! This is probably not a problem with npm. There is likely additional logging output above. npm ERR! A complete log of this run can be found in: npm ERR! /Users/kakizakimanato/.npm/_logs/2021-06-07T14_05_59_032Z-debug.log kakizakimanato@kakiMacBook-Air portfolio % npm run deploy > portfolio@0.1.0 deploy /Users/kakizakimanato/deploy/portfolio > npm run build && gh-pages -d build npm ERR! missing script: build npm ERR! A complete log of this run can be found in: npm ERR! /Users/kakizakimanato/.npm/_logs/2021-06-07T14_06_57_636Z-debug.log npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! portfolio@0.1.0 deploy: `npm run build && gh-pages -d build` npm ERR! Exit status 1 npm ERR! npm ERR! Failed at the portfolio@0.1.0 deploy script. npm ERR! This is probably not a problem with npm. There is likely additional logging output above. npm ERR! A complete log of this run can be found in: npm ERR! /Users/kakizakimanato/.npm/_logs/2021-06-07T14_06_57_690Z-debug.log まだ自分がデプロイできるかわからない時は、ファイルをコピーしてデプロイテスト用のディレクトリ内で試すといいかもしれません (色々な方法試しているうちにpackage.jsonファイルなどぐちゃぐちゃになります...) 少し追加でやらないといけないこと GitHubのアカウント情報を紐付ける $ git remote add origin https://github.com/<GitHubアカウント名>/<GitHubリポジトリ名>.git を実行する前に、GitHubアカウントの情報を設定する必要があった $ git config --global user.name "[githubユーザー名]" $ git config --global user.email "[githubで使用しているメールアドレス]" これでgit remote add originができる GitHub Pagesの設定 ソースブランチをmasterに設定し、rootファイルをdocsに変更し、["Save"]をクリック 数分待ってURLをクリックすると、成功していればWebサイトが見られるはず 次はファイルを編集後、再デプロイできるようになりたい