https://developercommunity.visualstudio.com/content/problem/625201/disappearing-cursor-in-text-editor-vs-2019.html
Could not load file or assembly 'Microsoft.VisualStudio.Web.PageInspector.Loader, Version=1.0.0.0, Culture=neutral, PublicKeyToken=b03f5f7f11d50a3a' or one of its dependencies. The system cannot find the file specified.
.App {
width: 100vw;
height: 100vh;
overflow: hidden;
}
style="overflow-y: hidden;"
meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,shrink-to-fit=no"
meta name="apple-mobile-web-app-capable" content="yes" meta name="mobile-web-app-capable" content="yes"
| { | |
| "compilerOptions": { | |
| "target": "es5", | |
| "lib": ["dom", "esnext", "webworker"], | |
| "allowJs": false, | |
| "skipLibCheck": true, | |
| "esModuleInterop": true, | |
| "listEmittedFiles": true, | |
| "allowSyntheticDefaultImports": true, | |
| "strict": true, | |
| "forceConsistentCasingInFileNames": true, | |
| "module": "none", | |
| "alwaysStrict": false, | |
| "strictFunctionTypes": false, | |
| "strictPropertyInitialization": false, | |
| "downlevelIteration": true, | |
| "removeComments": true, | |
| "outDir": "public" | |
| }, | |
| "include": ["src/players/*.worker.ts", "src/reversi.worker.ts"] | |
| } |
Workerを駆使するためのプロジェクト構成 with webpack - Qiita
https://qiita.com/_likr/items/d382dc120a942ba4c6fe
4パターンのWebWorker生成方法とインラインワーカーの技法 - Qiita
https://qiita.com/mohayonao/items/872166cf364e007cf83d
Two example projects which use WebWorker in TypeScript + Webpack environment.
https://github.com/Qwaz/webworker-with-typescript
--(...) SPA の場合、サイトで新しいページを読み込むときに、ページ全体を読み込むのではなくコンテンツを動的に読み込むため、analytics.js スニペット コードが実行されるのは一度だけとなります。つまり、以降のページビュー（仮想ページビュー）は、新しいコンテンツが読み込まれるときに手動でトラッキングする必要があります。
| import React, { Component } from 'react'; | |
| import { Head, withSiteData } from 'react-static'; | |
| // Reference URL | |
| // https://developers.google.com/analytics/devguides/collection/analyticsjs/single-page-applications | |
| // https://github.com/googleanalytics/autotrack#urlchangetracker | |
| class GoogleAnalytics extends Component { | |
| componentDidMount() { | |
| // Ignore if not running on browser. | |
| if (typeof document === 'undefined') return; | |
| // gaID is injected by withSiteData. It's supposed to be defined in the static.config.js file. | |
| const { gaID } = this.props; | |
| // Load analytics.js | |
| (function(i, s, o, g, r, a, m) { | |
| i.GoogleAnalyticsObject = r; | |
| (i[r] = | |
| i[r] || | |
| function() { | |
| (i[r].q = i[r].q || []).push(arguments); | |
| }), | |
| (i[r].l = 1 * new Date()); | |
| (a = s.createElement(o)), (m = s.getElementsByTagName(o)[0]); | |
| a.async = 1; | |
| a.src = g; | |
| m.parentNode.insertBefore(a, m); | |
| })(window, document, 'script', 'https://www.google-analytics.com/analytics.js', 'ga'); | |
| // Initialize Google Analytics. | |
| ga('create', gaID, 'auto'); | |
| ga('send', 'pageview'); | |
| // Enable auto-tracking for each time the URL changes after the first loading. | |
| ga('require', 'urlChangeTracker'); | |
| } | |
| render() { | |
| return ( | |
| <Head> | |
| <script async src="autotrack.custom.js" /> | |
| </Head> | |
| ); | |
| } | |
| } | |
| export default withSiteData(GoogleAnalytics); |
| const App = () => ( | |
| <React.Fragment> | |
| <GoogleAnalytics /> | |
| <Router> | |
| (...) | |
| </Router> | |
| </React.Fragment> | |
| ); |
| export default { | |
| getSiteData: () => ({ | |
| siteTitle: 'Example Site', | |
| gaID: 'UA-222333XXX-1' | |
| }), | |
| getRoutes: async () => { | |
| //(... omitted ...) | |
| } | |
| }; |
 |
| タイトル画面でレベル1〜3が選べるようになっています。 （現段階ではどれを選んでも実際には難易度は同じです。） |
 |
| ゲーム画面は前回と同じですが、コンピュータの手番になると自動的に思考ルーチンが呼び出され、 結果が出るとその座標に石を配置します。 |
Create React AppでWeb Workerを使うには
| const thinkProc = () => { | |
| self.addEventListener( | |
| 'message', | |
| function(e) { | |
| console.log('Worker called: ', e.data); | |
| const board: BoardState = e.data.board; | |
| let result = { row: -1, col: -1 }; | |
| const placeableCells: CellState[] = []; | |
| board.cells.forEach((row) => { | |
| row.forEach((cell) => { | |
| if (cell.placeable) placeableCells.push(cell); | |
| }); | |
| }); | |
| if (placeableCells.length) { | |
| const index = Math.floor(Math.random() * placeableCells.length); | |
| const cell = placeableCells[index]; | |
| result = { row: cell.row, col: cell.col }; | |
| } | |
| postMessage(result); | |
| }, | |
| false | |
| ); | |
| }; | |
| const thinkWorker = createWorker(thinkProc); | |
| export default function(name?: string): Player { | |
| return { | |
| name: name || 'CPU-1', | |
| isHuman: false, | |
| think: async (board: BoardState) => { | |
| const result = await thinkWorker.execute({ board: { cells: board.cells } }); | |
| await wait(WAIT_MSEC); | |
| return result as Position; | |
| }, | |
| }; | |
| } |
const thinkWorker = createWorker(thinkProc);
const result = await thinkWorker.execute({ board: { cells: board.cells } });
const myWorker = new Worker("worker.js");
myWorker.postMessage("hoge");
import HelloWorker from './hello.worker.js';
const helloWorker = new HelloWorker();
helloWorker.postMessage('hoge');
Add support for WebWorker with worker-loader (#3660) by iansu · Pull Request #3934 · facebook/create-react-app
const worker = new Worker('./worker', { type: 'module' });
worker.postMessage('hoge');
Add support for WebWorker with worker-plugin by Krivega · Pull Request #5464 · facebook/create-react-app
let code = worker.toString();
code = code.substring(code.indexOf("{")+1, code.lastIndexOf("}"));
const blob = new Blob([code], {type: "application/javascript"});
const worker = new Worker(URL.createObjectURL(blob));
| export default (workerFunc: () => void) => { | |
| let code = workerFunc.toString(); | |
| code = code.substring(code.indexOf('{') + 1, code.lastIndexOf('}')); | |
| const blob = new Blob([code], { type: 'application/javascript' }); | |
| return new Worker(URL.createObjectURL(blob)); | |
| }; |
| /* eslint no-restricted-globals: ["error"] */ | |
| export default () => { | |
| let count = 0; | |
| self.addEventListener( | |
| 'message', | |
| function(e) { | |
| if (e.data.action === 'count') { | |
| count++; | |
| } | |
| if (e.data.action === 'clear') { | |
| count = 0; | |
| } | |
| postMessage({ msg: 'count' + count, count: count }); | |
| }, | |
| false | |
| ); | |
| }; |
import createWorker from './createWorker';
import myWorkerFunc from './myWorker';
const myWorker = createWorker(myWorkerFunc);
| import React from 'react'; | |
| import ReactDOM from 'react-dom'; | |
| import './index.css'; | |
| import App from './App'; | |
| import createWorker from './createWorker'; | |
| import myWorkerFunc from './myWorker'; | |
| ReactDOM.render(<App />, document.getElementById('root')); | |
| // Testing Web Worder | |
| const myWorker = createWorker(myWorkerFunc); | |
| myWorker.addEventListener('message', (m: any) => { | |
| console.log('msg', m.data.msg); | |
| if (m.data.count >= 10) { | |
| console.log('clearing'); | |
| myWorker.postMessage({ action: 'clear' }); | |
| } | |
| }); | |
| setInterval(() => { | |
| myWorker.postMessage({ action: 'count' }); | |
| }, 400); |