Upgrade to Pro — share decks privately, control downloads, hide ads and more …



2024/04/23に行われたTechBrew in 東京〜業務外で取り組む 個人開発での学び〜で発表した資料です。

Kazuhiro Ebara

April 23, 2024

More Decks by Kazuhiro Ebara

Other Decks in Technology


  1. Reactの導入 VSCodeのWebview部分の開発がすごいやりづらい。 function getWebviewContent() { return `<!DOCTYPE html>   <html lang="en">

      <head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>Cat Coding</title>   </head>   <body>    <img src="https://media.giphy.com/media/JIX9t2j0ZTN9S/giphy.gif" width="300" />   </body>  </html>`; }
  2. index.tsx import { createRoot } from "react-dom/client"; import { App

    } from "./App"; const root = createRoot(document.getElementById("app")!); root.render(<App />); Reactの導入 index.tsx作成
  3. extension.ts function getWebviewContent() { return ` <!DOCTYPE html> <html lang="ja">

    <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body class="bg-white text-slate-900"> <div id="app"></div> </body> </html>`; } Reactの導入 HTML Contentの更新
  4. webpack.config.js const webviewConfig = { ...baseConfig, target: ["web", "es2020"], entry:

    "./src/index.tsx", experiments: { outputModule: true }, output: { path: path.resolve(__dirname, "dist"), filename: "webview.js", libraryTarget: "module", chunkFormat: "module", }, }; Reactの導入 webpack.config.jsの更新
  5. Slack APIでのCORS問題 現状VSCode側ではサポートされていない? There is no vscode support for changing

    this. You should think of the webview more as an html view (one that does not have any server or origin) rather than a webpage Posters on stackoverflow may have suggestions for workarounds https://github.com/microsoft/vscode/issues/72900#issuecomment-487140263