{"id":2615,"date":"2024-05-28T19:03:15","date_gmt":"2024-05-28T10:03:15","guid":{"rendered":"https:\/\/weblog.hirohiro716.com\/?p=2615"},"modified":"2024-06-02T15:38:56","modified_gmt":"2024-06-02T06:38:56","slug":"electron%ef%bc%8breact%e3%81%a7%e3%82%a2%e3%83%97%e3%83%aa%e3%82%92%e9%96%8b%e7%99%ba%e3%81%99%e3%82%8b%e6%ba%96%e5%82%99","status":"publish","type":"post","link":"https:\/\/weblog.hirohiro716.com\/?p=2615","title":{"rendered":"Electron\uff0bReact\u3067\u30a2\u30d7\u30ea\u3092\u958b\u767a\u3059\u308b"},"content":{"rendered":"<pre class=\"brush: plain; gutter: false; title: \u74b0\u5883; notranslate\" title=\"\u74b0\u5883\">\r\n\u30fbdebian 12.6\r\n\u30fbvscode 1.89.1\r\n\u30fbnode 20.13.1\r\n\u30fbtypescript 5.4.5\r\n\u30fbvite 5.2.12\r\n\u30fbreact 18.3.3\r\n\u30fbelectron 30.0.9\r\n<\/pre>\n<p style=\"margin-top:2em;\">\nvite\u3067\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u3092\u4f5c\u6210\u3059\u308b\u3002\n<\/p>\n<pre class=\"brush: plain; title: ; notranslate\" title=\"\">\r\n$ npm create vite sample-app -- --template react-ts\r\n<\/pre>\n<p style=\"margin-top:2em;\">\nelectron\u3092\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u3059\u308b\u3002\n<\/p>\n<pre class=\"brush: plain; title: ; notranslate\" title=\"\">\r\n$ cd sample-app\r\n$ npm install --save-dev electron electron-builder\r\n<\/pre>\n<p style=\"margin-top:2em;\">\nelectron\u7528\u306e\u30c7\u30a3\u30ec\u30af\u30c8\u30ea\u3092\u4f5c\u6210\u3059\u308b\u3002\n<\/p>\n<pre class=\"brush: plain; title: ; notranslate\" title=\"\">\r\n$ mkdir electron\/\r\n<\/pre>\n<p style=\"margin-top:2em;\">\nelectron\u306b\u5fc5\u8981\u306a\u30d5\u30a1\u30a4\u30eb\u3092\u4f5c\u6210\u3059\u308b\u3002\n<\/p>\n<ul style=\"margin-left:1em;\">\n<li>\n        <a href=\"javascript:;\" onclick=\"popupElement('.electron_main');\">electron\/main.ts<\/a>\n    <\/li>\n<li>\n        <a href=\"javascript:;\" onclick=\"popupElement('.electron_preload');\">electron\/preload.ts<\/a>\n    <\/li>\n<li>\n        <a href=\"javascript:;\" onclick=\"popupElement('.electron_tsconfig');\">electron\/tsconfig.json<\/a>\n    <\/li>\n<\/ul>\n<p style=\"margin-top:2em;\">\n\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u30eb\u30fc\u30c8\u306b\u3042\u308btsconfig.json\u306b\u4f5c\u6210\u3057\u305f\u30c7\u30a3\u30ec\u30af\u30c8\u30ea\u3092\u8ffd\u52a0\u3059\u308b\u3002\n<\/p>\n<pre class=\"brush: plain; title: tsconfig.json; notranslate\" title=\"tsconfig.json\">\r\n    \u2026\r\n    &quot;include&quot;: &#x5B;&quot;src&quot;, &quot;electron&quot;],\r\n    \u2026\r\n<\/pre>\n<p style=\"margin-top:2em;\">\npreload.ts\u306b\u5b9a\u7fa9\u3055\u308c\u305fAPI\u306e\u52d5\u4f5c\u78ba\u8a8d\u306e\u305f\u3081\u3001App.tsx\u306e\u9069\u5f53\u306a\u5834\u6240\u306b\u4e0b\u8a18\u3092\u8ffd\u8a18\u3059\u308b\u3002\n<\/p>\n<pre class=\"brush: plain; title: src\/App.tsx; notranslate\" title=\"src\/App.tsx\">\r\n    \u2026\r\n    &lt;button onClick={() =&gt; { alert(window.counterAPI.count()) }}&gt;\r\n        counting via API\r\n    &lt;\/button&gt;\r\n    \u2026\r\n<\/pre>\n<p style=\"margin-top:2em;\">\nvite.config.ts\u306b\u76f8\u5bfe\u30d1\u30b9\u3092\u4f7f\u7528\u3059\u308b\u5b9a\u7fa9\u3068\u3001React\u306e\u30d3\u30eb\u30c9\u51fa\u529b\u5148\u306e\u5b9a\u7fa9\u3092\u8ffd\u8a18\u3059\u308b\u3002\n<\/p>\n<pre class=\"brush: plain; title: vite.config.ts; notranslate\" title=\"vite.config.ts\">\r\n\u2026\r\nexport default defineConfig({\r\n  plugins: &#x5B;react()],\r\n  base: &quot;.\/&quot;,\r\n  build: {\r\n    outDir: &quot;build\/&quot;\r\n  }\r\n})\r\n<\/pre>\n<p style=\"margin-top:2em;\">\npackage.json\u306btype\u3068main\u3092\u5b9a\u7fa9\u3059\u308b\u3002type\u306f\u30c7\u30d5\u30a9\u30eb\u30c8\u3067cjs\u306a\u306e\u3067\u524a\u9664\u3057\u3066\u3057\u307e\u3063\u3066\u3082\u826f\u3044\u3002\n<\/p>\n<pre class=\"brush: plain; title: package.json; notranslate\" title=\"package.json\">\r\n    \u2026\r\n    &quot;type&quot;: &quot;commonjs&quot;,\r\n    &quot;main&quot;: &quot;build\/electron\/main.js&quot;,\r\n    \u2026\r\n<\/pre>\n<p style=\"margin-top:2em;\">\npackage.json\u306b\u958b\u767a\u7528\u3068\u30d3\u30eb\u30c9\u7528\u306e\u30b9\u30af\u30ea\u30d7\u30c8\u3092\u8ffd\u8a18\u3059\u308b\u3002\n<\/p>\n<pre class=\"brush: plain; title: package.json; notranslate\" title=\"package.json\">\r\n    \u2026\r\n    &quot;scripts&quot;: {\r\n        \u2026\r\n        &quot;electron:dev&quot;: &quot;tsc -p electron\/ &amp;&amp; electron . &amp; vite&quot;,\r\n        &quot;electron:build&quot;: &quot;tsc &amp;&amp; vite build &amp;&amp; tsc -p electron\/ &amp;&amp; electron-builder --dir&quot;\r\n    },\r\n    \u2026\r\n<\/pre>\n<p style=\"margin-top:2em;\">\npackage.json\u306b\u30d3\u30eb\u30c9\u306b\u5fc5\u8981\u306a\u60c5\u5831\u3092\u8ffd\u8a18\u3059\u308b\u3002\n<\/p>\n<pre class=\"brush: plain; title: package.json; notranslate\" title=\"package.json\">\r\n    \u2026\r\n    &quot;build&quot;: {\r\n        &quot;appId&quot;: &quot;com.example.sample-app&quot;,\r\n        &quot;productName&quot;: &quot;SampleApp&quot;,\r\n        &quot;files&quot;: &#x5B;\r\n            &quot;build\/**\/*&quot;\r\n        ]\r\n    },\r\n    \u2026\r\n<\/pre>\n<p style=\"margin-top:2em;\">\nreact\u306e\u30db\u30c3\u30c8\u30ea\u30ed\u30fc\u30c9\u3092\u5229\u7528\u3057\u3066\u958b\u767a\u7528\u306b\u30a2\u30d7\u30ea\u3092\u8d77\u52d5\u3059\u308b\u3002\n<\/p>\n<pre class=\"brush: plain; title: ; notranslate\" title=\"\">\r\n$ npm run electron:dev\r\n<\/pre>\n<p style=\"margin-top:2em;\">\n\u30a2\u30d7\u30ea\u3092\u30d3\u30eb\u30c9\u3059\u308b\u3002\n<\/p>\n<pre class=\"brush: plain; title: ; notranslate\" title=\"\">\r\n$ npm run electron:build\r\n<\/pre>\n<div class=\"electron_main\" style=\"display:none;\">\n<pre class=\"brush: jscript; title: electron\/main.ts; notranslate\" title=\"electron\/main.ts\">\r\n    import { app, BrowserWindow } from &quot;electron&quot;;\r\n    import path from &quot;path&quot;;\r\n    import URL from &quot;url&quot;;\r\n    \r\n    const createWindow = () =&gt; {\r\n        const window = new BrowserWindow({\r\n            width: 800,\r\n            height: 600,\r\n            webPreferences: {\r\n                preload: path.join(__dirname, &quot;preload.js&quot;),\r\n            },\r\n        });\r\n        window.loadURL(app.isPackaged\r\n            ? URL.format({\r\n                pathname: path.join(__dirname, &quot;..\/index.html&quot;),\r\n                protocol: &quot;file:&quot;,\r\n                slashes: true\r\n            })\r\n            : &quot;http:\/\/localhost:5173&quot;\r\n        );\r\n        if (app.isPackaged === false) {\r\n            window.webContents.openDevTools();\r\n        }\r\n    };\r\n    \r\n    app.on('ready', createWindow);\r\n    \r\n    app.on(&quot;window-all-closed&quot;, () =&gt; {\r\n        app.quit();\r\n    });\r\n    <\/pre>\n<\/div>\n<div class=\"electron_preload\" style=\"display:none;\">\n<pre class=\"brush: jscript; title: electron\/preload.ts; notranslate\" title=\"electron\/preload.ts\">\r\n    import { contextBridge } from &quot;electron&quot;;\r\n    \r\n    declare global {\r\n        interface Window {\r\n            counterAPI: {\r\n                count: () =&gt; number;\r\n            };\r\n        }\r\n    }\r\n\r\n    let counted = 0;\r\n\r\n    contextBridge.exposeInMainWorld(&quot;counterAPI&quot;, {\r\n        count: () =&gt; {\r\n            return ++counted;\r\n        },\r\n    });\r\n    <\/pre>\n<\/div>\n<div class=\"electron_tsconfig\" style=\"display:none;\">\n<pre class=\"brush: plain; title: electron\/tsconfig.json; notranslate\" title=\"electron\/tsconfig.json\">\r\n    {\r\n        &quot;compilerOptions&quot;: {\r\n            &quot;target&quot;: &quot;ES2020&quot;,\r\n            &quot;module&quot;: &quot;CommonJS&quot;,\r\n            &quot;strict&quot;: true,\r\n            &quot;rootDir&quot;: &quot;..\/&quot;,\r\n            &quot;outDir&quot;: &quot;..\/build\/&quot;,\r\n            &quot;esModuleInterop&quot;: true\r\n        },\r\n        &quot;include&quot;: &#x5B;\r\n            &quot;*.ts&quot;\r\n        ]\r\n    }\r\n    <\/pre>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>\u30fbdebian 12.6 \u30fbvscode 1.89.1 \u30fbnode 20.13.1 \u30fbtypescript 5.4.5 \u30fbvite 5.2.12 \u30fbreact 18.3.3 \u30fbelectron 30.0.9 vite\u3067\u30d7 [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[35],"tags":[],"class_list":["post-2615","post","type-post","status-publish","format-standard","hentry","category-typescript"],"views":1061,"_links":{"self":[{"href":"https:\/\/weblog.hirohiro716.com\/index.php?rest_route=\/wp\/v2\/posts\/2615","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/weblog.hirohiro716.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/weblog.hirohiro716.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/weblog.hirohiro716.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/weblog.hirohiro716.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=2615"}],"version-history":[{"count":84,"href":"https:\/\/weblog.hirohiro716.com\/index.php?rest_route=\/wp\/v2\/posts\/2615\/revisions"}],"predecessor-version":[{"id":2707,"href":"https:\/\/weblog.hirohiro716.com\/index.php?rest_route=\/wp\/v2\/posts\/2615\/revisions\/2707"}],"wp:attachment":[{"href":"https:\/\/weblog.hirohiro716.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2615"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/weblog.hirohiro716.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=2615"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/weblog.hirohiro716.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=2615"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}