{"id":53,"date":"2023-02-08T19:51:23","date_gmt":"2023-04-06T05:43:22","guid":{"rendered":"https:\/\/www.silicloud.com\/ja\/blog\/index.php\/2023\/11\/30\/vite%e3%82%92%e4%bd%bf%e3%81%a3%e3%81%9freact%e3%83%97%e3%83%ad%e3%82%b8%e3%82%a7%e3%82%af%e3%83%88%e3%81%ae%e3%82%bb%e3%83%83%e3%83%88%e3%82%a2%e3%83%83%e3%83%97%e6%96%b9%e6%b3%95\/"},"modified":"2025-07-31T13:41:26","modified_gmt":"2025-07-31T04:41:26","slug":"vite%e3%82%92%e4%bd%bf%e3%81%a3%e3%81%9freact%e3%83%97%e3%83%ad%e3%82%b8%e3%82%a7%e3%82%af%e3%83%88%e3%81%ae%e3%82%bb%e3%83%83%e3%83%88%e3%82%a2%e3%83%83%e3%83%97%e6%96%b9%e6%b3%95","status":"publish","type":"post","link":"https:\/\/www.silicloud.com\/ja\/blog\/vite%e3%82%92%e4%bd%bf%e3%81%a3%e3%81%9freact%e3%83%97%e3%83%ad%e3%82%b8%e3%82%a7%e3%82%af%e3%83%88%e3%81%ae%e3%82%bb%e3%83%83%e3%83%88%e3%82%a2%e3%83%83%e3%83%97%e6%96%b9%e6%b3%95\/","title":{"rendered":"Vite\u3092\u4f7f\u3063\u305fReact\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u306e\u30bb\u30c3\u30c8\u30a2\u30c3\u30d7\u65b9\u6cd5"},"content":{"rendered":"

\u8457\u8005\u306f\u3001Write for Donations \u30d7\u30ed\u30b0\u30e9\u30e0\u306e\u4e00\u74b0\u3068\u3057\u3066\u3001Code.org\u306b\u5bc4\u4ed8\u3092\u3059\u308b\u3053\u3068\u3092\u9078\u3073\u307e\u3057\u305f\u3002<\/p>\n

\u306f\u3058\u3081\u306b<\/h3>\n

\u901a\u5e38\u3001Create React App\u3092\u4f7f\u7528\u3057\u3066\u65b0\u3057\u3044\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u3092\u4f5c\u6210\u3059\u308b\u3053\u3068\u304c\u3042\u308a\u307e\u3059\u304c\u3001140 MB\u4ee5\u4e0a\u306e\u4f9d\u5b58\u95a2\u4fc2\u3092\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u3059\u308b\u306e\u306b\u304b\u306a\u308a\u306e\u6642\u9593\u304c\u304b\u304b\u308b\u3053\u3068\u304c\u3042\u308a\u307e\u3059\u3002Vite\u306f31 MB\u306e\u4f9d\u5b58\u95a2\u4fc2\u3092\u4f7f\u7528\u3059\u308b\u8efd\u91cf\u306a\u30c4\u30fc\u30eb\u3067\u3001\u65b0\u3057\u3044\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u3092\u59cb\u3081\u308b\u969b\u306b\u6642\u9593\u3092\u7bc0\u7d04\u3059\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002Vite\u306f\u307e\u305f\u3001\u30d6\u30e9\u30a6\u30b6\u30cd\u30a4\u30c6\u30a3\u30d6\u306eES\uff08ECMAScript\uff09\u30e2\u30b8\u30e5\u30fc\u30eb\u3092\u4f7f\u7528\u3057\u3066JavaScript\u30d5\u30a1\u30a4\u30eb\u306b\u30ea\u30f3\u30af\u3057\u3001\u5404\u30d5\u30a1\u30a4\u30eb\u5909\u66f4\u5f8c\u306b\u30d0\u30f3\u30c9\u30eb\u5168\u4f53\u3092\u518d\u30d3\u30eb\u30c9\u3057\u306a\u3044\u305f\u3081\u3001\u3088\u308a\u9ad8\u901f\u306a\u4f53\u9a13\u3092\u63d0\u4f9b\u3057\u307e\u3059\u3002\u3053\u308c\u3089\u306e\u9055\u3044\u306b\u3088\u308a\u3001Vite\u3092\u4f7f\u7528\u3057\u3066React\u30a2\u30d7\u30ea\u306e\u4f5c\u6210\u3001\u66f4\u65b0\u3001\u30d3\u30eb\u30c9\u304c\u3088\u308a\u9ad8\u901f\u306b\u884c\u3048\u307e\u3059\u3002<\/p>\n

\u3053\u306e\u30c1\u30e5\u30fc\u30c8\u30ea\u30a2\u30eb\u3067\u306f\u3001Vite\u30c4\u30fc\u30eb\u3092\u4f7f\u7528\u3057\u3066\u65b0\u3057\u3044React\u30a2\u30d7\u30ea\u3092\u4f5c\u6210\u3057\u307e\u3059\u3002\u65b0\u3057\u3044\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3001CSS\u3001\u304a\u3088\u3073\u753b\u50cf\u30d5\u30a1\u30a4\u30eb\u3092\u6301\u3064\u57fa\u672c\u7684\u306a\u30a2\u30d7\u30ea\u3092\u4f5c\u6210\u3057\u3001\u5c55\u958b\u7528\u306b\u6700\u9069\u5316\u3055\u308c\u305f\u30d0\u30f3\u30c9\u30eb\u3092\u6e96\u5099\u3057\u307e\u3059\u3002<\/p>\n

\n

Info<\/p>\n

\u30c7\u30b8\u30bf\u30eb\u30aa\u30fc\u30b7\u30e3\u30f3\u306e\u30a2\u30d7\u30ea\u30d7\u30e9\u30c3\u30c8\u30d5\u30a9\u30fc\u30e0\u3092\u4f7f\u7528\u3057\u3066\u3001React\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u306e\u30c7\u30d7\u30ed\u30a4\u3092\u7c21\u5358\u306b\u884c\u3044\u307e\u3057\u3087\u3046\u3002\u6570\u5206\u3067GitHub\u304b\u3089React\u3092\u76f4\u63a5\u30c7\u30d7\u30ed\u30a4\u3057\u307e\u3059\u3002<\/div>\n<\/div>\n

\u524d\u63d0\u6761\u4ef6<\/h2>\n

\u3053\u306e\u30c1\u30e5\u30fc\u30c8\u30ea\u30a2\u30eb\u306b\u5f93\u3046\u305f\u3081\u306b\u306f\u3001\u4ee5\u4e0b\u306e\u3082\u306e\u304c\u5fc5\u8981\u3067\u3059\u3002<\/p>\n

    \n
  • Node.js version 12.2.0 or higher installed on your machine. You can install the latest version of Node.js with our tutorial on How To Install Node.js.<\/li>\n
  • Yarn package manager version 1.22.0 or higher installed on your machine. You can install Install Yarn with Step 1 in How To Install and Use the Yarn Package Manager for Node.js.<\/li>\n
  • Familiarity with HTML, CSS, and modern JavaScript. It also helps to know modern JS used in React.<\/li>\n
  • A foundational knowledge of React, which you can learn with the How To Code in React series.<\/li>\n
  • A mobile phone connected to the same Wifi network as your computer so you can preview your app from mobile.<\/li>\n<\/ul>\n

    \u30b9\u30c6\u30c3\u30d71- Vite\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u306e\u4f5c\u6210<\/h2>\n

    \u3053\u306e\u30b9\u30c6\u30c3\u30d7\u3067\u306f\u3001\u30b3\u30de\u30f3\u30c9\u30e9\u30a4\u30f3\u304b\u3089Vite\u30c4\u30fc\u30eb\u3092\u4f7f\u7528\u3057\u3066\u65b0\u3057\u3044React\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u3092\u4f5c\u6210\u3057\u307e\u3059\u3002\u30b9\u30af\u30ea\u30d7\u30c8\u306e\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u3068\u5b9f\u884c\u306b\u306f\u3001yarn\u30d1\u30c3\u30b1\u30fc\u30b8\u30de\u30cd\u30fc\u30b8\u30e3\u3092\u4f7f\u7528\u3057\u307e\u3059\u3002<\/p>\n

    \u65b0\u3057\u3044Vite\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u3092\u4f5c\u6210\u3059\u308b\u305f\u3081\u306b\u3001\u30bf\u30fc\u30df\u30ca\u30eb\u3067\u6b21\u306e\u30b3\u30de\u30f3\u30c9\u3092\u5b9f\u884c\u3057\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n

    <\/code><\/pre>\n
      \n
    1. yarn<\/span> create vite<\/li>\n<\/ol>\n
      <\/code><\/pre>\n
       <\/p>\n
      <\/code><\/pre>\n
      \u3053\u306e\u30b3\u30de\u30f3\u30c9\u306f\u3001\u30ea\u30e2\u30fc\u30c8\u306enpm\u30ea\u30dd\u30b8\u30c8\u30ea\u304b\u3089Vite\u306e\u5b9f\u884c\u53ef\u80fd\u30d5\u30a1\u30a4\u30eb\u3092\u5b9f\u884c\u3057\u307e\u3059\u3002React\u306e\u30ed\u30fc\u30ab\u30eb\u958b\u767a\u74b0\u5883\u3092\u69cb\u7bc9\u3059\u308b\u305f\u3081\u306b\u5fc5\u8981\u306a\u30c4\u30fc\u30eb\u3092\u8a2d\u5b9a\u3057\u307e\u3059\u3002\u6700\u5f8c\u306b\u3001\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u8a2d\u5b9a\u3084\u8a00\u8a9e\u30bf\u30a4\u30d7\u306e\u305f\u3081\u306e\u30b3\u30de\u30f3\u30c9\u30e9\u30a4\u30f3\u30e1\u30cb\u30e5\u30fc\u3092\u958b\u304d\u307e\u3059\u3002<\/p>\n
      \u30b9\u30af\u30ea\u30d7\u30c8\u304c\u7d42\u4e86\u3059\u308b\u3068\u3001\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u540d\u306e\u5165\u529b\u3092\u6c42\u3081\u3089\u308c\u307e\u3059\u3002<\/p>\n
      <\/code><\/pre>\n
      Output<\/div>\n
      <\/code><\/pre>\n
      yarn create v1.22.10 [1\/4] Resolving packages… [2\/4] Fetching packages… [3\/4] Linking dependencies… [4\/4] Building fresh packages… success Installed “create-vite@2.9.0” with binaries: – create-vite – cva ? Project name: \u00bb vite-project<\/mark><\/p>\n
      <\/code><\/pre>\n
      \u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u306e\u540d\u524d\u3092\u5165\u529b\u3057\u3066\u304f\u3060\u3055\u3044\uff08\u3053\u306e\u30c1\u30e5\u30fc\u30c8\u30ea\u30a2\u30eb\u3067\u306f\u3001digital-ocean-vite \u3092\u4f8b\u3068\u3057\u3066\u4f7f\u7528\u3057\u307e\u3059\uff09\u3002<\/p>\n
      <\/code><\/pre>\n
        \n
      1. digital-ocean-vite<\/mark><\/li>\n<\/ol>\n
        <\/code><\/pre>\n
         <\/p>\n
        <\/code><\/pre>\n
        \u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u540d\u3092\u5165\u529b\u3057\u305f\u5f8c\u3001Vite\u306f\u30d5\u30ec\u30fc\u30e0\u30ef\u30fc\u30af\u3092\u9078\u629e\u3059\u308b\u3088\u3046\u306b\u4fc3\u3057\u307e\u3059\u3002<\/p>\n
        <\/code><\/pre>\n
        Output<\/div>\n
        <\/code><\/pre>\n
        ? Select a framework: \u00bb – Use arrow-keys. Return to submit. Vanilla Vue > React<\/mark> Preact Lit Svelte Others<\/p>\n
        <\/code><\/pre>\n
        Vite\u306f\u3001React\u3060\u3051\u3067\u306a\u304f\u3001\u3055\u307e\u3056\u307e\u306a\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u30bf\u30a4\u30d7\u3092\u7c21\u5358\u306b\u30b9\u30bf\u30fc\u30c8\u3055\u305b\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002\u73fe\u5728\u3001React\u3001Preact\u3001Vue\u3001Lit\u3001Svelte\u3001\u304a\u3088\u3073\u30d0\u30cb\u30e9\u306eJavaScript\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u3092\u30b5\u30dd\u30fc\u30c8\u3057\u3066\u3044\u307e\u3059\u3002<\/p>\n
        \u30ad\u30fc\u30dc\u30fc\u30c9\u306e\u77e2\u5370\u30ad\u30fc\u3092\u4f7f\u7528\u3057\u3066\u3001React\u3092\u9078\u629e\u3057\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n
        React\u30d5\u30ec\u30fc\u30e0\u30ef\u30fc\u30af\u3092\u9078\u629e\u3057\u305f\u5f8c\u3001Vite\u306f\u8a00\u8a9e\u306e\u30bf\u30a4\u30d7\u3092\u9078\u3076\u3088\u3046\u306b\u4fc3\u3057\u307e\u3059\u3002\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u3067JavaScript\u307e\u305f\u306fTypeScript\u3092\u4f7f\u7528\u3067\u304d\u307e\u3059\u3002<\/p>\n
        JavaScript\u3092\u9078\u629e\u3059\u308b\u305f\u3081\u306b\u77e2\u5370\u30ad\u30fc\u3092\u4f7f\u7528\u3057\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n
        <\/code><\/pre>\n
        Output<\/div>\n
        <\/code><\/pre>\n
        ? Select a variant: \u00bb – Use arrow-keys. Return to submit. > JavaScript<\/mark> TypeScript JavaScript + SWC TypeScript + SWC<\/p>\n
        <\/code><\/pre>\n
        \u30d5\u30ec\u30fc\u30e0\u30ef\u30fc\u30af\u3092\u30bb\u30c3\u30c8\u30a2\u30c3\u30d7\u3057\u305f\u5f8c\u3001\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u306e\u8a2d\u8a08\u304c\u5b8c\u4e86\u3057\u305f\u3053\u3068\u3092\u51fa\u529b\u3067\u78ba\u8a8d\u3067\u304d\u307e\u3059\u3002\u305d\u306e\u5f8c\u3001Vite\u306fYarn\u3092\u4f7f\u7528\u3057\u3066\u4f9d\u5b58\u95a2\u4fc2\u3092\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u3059\u308b\u3088\u3046\u6307\u793a\u3057\u307e\u3059\u3002<\/p>\n
        <\/code><\/pre>\n
        Output<\/div>\n
        <\/code><\/pre>\n
        Done: Scaffolding project in path\\to\\digital-ocean-vite… Done. Now run: cd digital-ocean-vite yarn yarn dev Done in 129.89s.<\/p>\n
        <\/code><\/pre>\n
        \u6307\u793a\u901a\u308a\u306b\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u30d5\u30a9\u30eb\u30c0\u306b\u79fb\u52d5\u3057\u3066\u304f\u3060\u3055\u3044\u3002 (Shiji doori ni purojekuto fora ni id\u014d shite kudasai.)<\/p>\n
        <\/code><\/pre>\n
          \n
        1. cd<\/span> digital-ocean-vite<\/li>\n<\/ol>\n
          <\/code><\/pre>\n
           <\/p>\n
          <\/code><\/pre>\n
          \u305d\u306e\u5f8c\u3001\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u306e\u4f9d\u5b58\u95a2\u4fc2\u3092\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u3059\u308b\u305f\u3081\u306b\u3001yarn\u30b3\u30de\u30f3\u30c9\u3092\u4f7f\u7528\u3057\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n
          <\/code><\/pre>\n
            \n
          1. yarn<\/span><\/li>\n<\/ol>\n
            <\/code><\/pre>\n
             <\/p>\n
            <\/code><\/pre>\n
            \u7d42\u4e86\u3059\u308b\u3068\u3001\u4f9d\u5b58\u95a2\u4fc2\u306e\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u306b\u304b\u304b\u3063\u305f\u6642\u9593\u306e\u51fa\u529b\u304c\u8fd4\u3055\u308c\u307e\u3059\u3002<\/p>\n
            <\/code><\/pre>\n
            Output<\/div>\n
            <\/code><\/pre>\n
            success Saved lockfile. Done in 43.26s.<\/p>\n
            <\/code><\/pre>\n
            \u73fe\u5728\u3001React\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u3092Vite\u3092\u4f7f\u3063\u3066\u65b0\u3057\u304f\u30bb\u30c3\u30c8\u30a2\u30c3\u30d7\u3057\u3001React\u3068Vite\u306b\u5fc5\u8981\u306a\u30d1\u30c3\u30b1\u30fc\u30b8\u3092\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u3057\u307e\u3057\u305f\u3002<\/p>\n
            \u6b21\u306b\u3001\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u3092\u30c6\u30b9\u30c8\u3059\u308b\u305f\u3081\u306b\u958b\u767a\u30b5\u30fc\u30d0\u30fc\u3092\u8d77\u52d5\u3057\u307e\u3059\u3002<\/p>\n
            \u30b9\u30c6\u30c3\u30d72 \u2014 \u958b\u767a\u30b5\u30fc\u30d0\u30fc\u306e\u8d77\u52d5<\/h2>\n
            \u3053\u306e\u30b9\u30c6\u30c3\u30d7\u3067\u306f\u3001\u3059\u3079\u3066\u304c\u6b63\u5e38\u306b\u52d5\u4f5c\u3057\u3066\u3044\u308b\u304b\u3092\u78ba\u8a8d\u3059\u308b\u305f\u3081\u306b\u3001\u958b\u767a\u30b5\u30fc\u30d0\u30fc\u3092\u8d77\u52d5\u3057\u307e\u3059\u3002<\/p>\n
            \u30c7\u30b8\u30bf\u30eb\u30fb\u30aa\u30fc\u30b7\u30e3\u30f3\u30fb\u30d0\u30a4\u30c8\u306e\u30d5\u30a9\u30eb\u30c0\u5185\u304b\u3089\u3001\u958b\u767a\u30b5\u30fc\u30d0\u30fc\u3092\u5b9f\u884c\u3059\u308b\u305f\u3081\u306b\u4ee5\u4e0b\u306e\u30b3\u30de\u30f3\u30c9\u3092\u4f7f\u7528\u3057\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n
            <\/code><\/pre>\n
              \n
            1. yarn<\/span> run dev<\/li>\n<\/ol>\n
              <\/code><\/pre>\n
               <\/p>\n
              <\/code><\/pre>\n
              \u3053\u306e\u30b3\u30de\u30f3\u30c9\u306f\u3001vite\u30b3\u30de\u30f3\u30c9\u306e\u30a8\u30a4\u30ea\u30a2\u30b9\u3067\u3059\u3002\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u3092\u958b\u767a\u30e2\u30fc\u30c9\u3067\u5b9f\u884c\u3057\u307e\u3059\u3002<\/p>\n
              \u4ee5\u4e0b\u306e\u51fa\u529b\u3092\u53d7\u3051\u53d6\u308a\u307e\u3059\u3002<\/p>\n
              <\/code><\/pre>\n
              Output<\/div>\n
              <\/code><\/pre>\n
              VITE v4.0.4 ready in 847 ms \u279c Local: http:\/\/localhost:5173\/ \u279c Network: use –host to expose \u279c press h to show help<\/p>\n
              <\/code><\/pre>\n
              \u6b21\u306b\u3001\u30d6\u30e9\u30a6\u30b6\u3092\u958b\u304d\u3001http:\/\/localhost:5173\/\u306b\u30a2\u30af\u30bb\u30b9\u3057\u3066\u304f\u3060\u3055\u3044\u3002\u30c7\u30d5\u30a9\u30eb\u30c8\u306eReact\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u304c\u30dd\u30fc\u30c85173\u3067\u5b9f\u884c\u3055\u308c\u307e\u3059\u3002<\/p>\n
              \"Default<\/div>\n
              \u3053\u306e\u30a2\u30d7\u30ea\u304c\u8d77\u52d5\u3057\u3066\u3044\u308b\u306e\u3092\u898b\u308b\u3068\u3001React\u3068Vite\u306e\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u304c\u6210\u529f\u3057\u3066\u3044\u307e\u3059\u3002\u6b21\u306b\u3001\u30e2\u30d0\u30a4\u30eb\u96fb\u8a71\u304b\u3089\u30a2\u30d7\u30ea\u3092\u30d7\u30ec\u30d3\u30e5\u30fc\u3057\u307e\u3059\u3002<\/p>\n
              \u30b9\u30c6\u30c3\u30d73 – \u30b9\u30de\u30fc\u30c8\u30d5\u30a9\u30f3\u304b\u3089\u30a2\u30d7\u30ea\u3092\u30d7\u30ec\u30d3\u30e5\u30fc\u3059\u308b<\/h2>\n
              \u30c7\u30d5\u30a9\u30eb\u30c8\u3067\u306f\u3001Vite\u306f\u958b\u767a\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u3092\u30cd\u30c3\u30c8\u30ef\u30fc\u30af\u306b\u516c\u958b\u3057\u307e\u305b\u3093\u3002\u3053\u306e\u30b9\u30c6\u30c3\u30d7\u3067\u306f\u3001\u30a2\u30d7\u30ea\u3092\u30ed\u30fc\u30ab\u30eb\u30cd\u30c3\u30c8\u30ef\u30fc\u30af\u306b\u516c\u958b\u3057\u3001\u30e2\u30d0\u30a4\u30eb\u96fb\u8a71\u304b\u3089\u30d7\u30ec\u30d3\u30e5\u30fc\u3059\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002<\/p>\n
              \u30ed\u30fc\u30ab\u30eb\u30cd\u30c3\u30c8\u30ef\u30fc\u30af\u4e0a\u3067\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u3092\u5b9f\u884c\u3059\u308b\u306b\u306f\u3001\u307e\u305a\u73fe\u5728\u306e\u30b5\u30fc\u30d0\u30fc\u3092\u505c\u6b62\u3059\u308b\u5fc5\u8981\u304c\u3042\u308a\u307e\u3059\u3002\u30bf\u30fc\u30df\u30ca\u30eb\u3067\u3001\u73fe\u5728\u5b9f\u884c\u4e2d\u306e\u958b\u767a\u30b5\u30fc\u30d0\u30fc\u3092\u7d42\u4e86\u3059\u308b\u306b\u306fCTRL+C\u3092\u4f7f\u7528\u3057\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n
              \u6b21\u306b\u3001\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u3092\u5b9f\u884c\u3059\u308b\u305f\u3081\u306b\u3001\u6b21\u306e\u30b3\u30de\u30f3\u30c9\u3092\u4f7f\u7528\u3057\u3066\u304f\u3060\u3055\u3044\u3002 (Tsugini, purojekuto o jikk\u014d suru tame ni, tsugi no komando o shiy\u014d shite kudasai.)<\/p>\n
              <\/code><\/pre>\n
                \n
              1. yarn<\/span> run dev –host<\/span><\/li>\n<\/ol>\n
                <\/code><\/pre>\n
                 <\/p>\n
                <\/code><\/pre>\n
                –host\u30d5\u30e9\u30b0\u306f\u3001Vite\u306b\u3088\u3063\u3066\u30a2\u30d7\u30ea\u3092\u30ed\u30fc\u30ab\u30eb\u30cd\u30c3\u30c8\u30ef\u30fc\u30af\u306b\u516c\u958b\u3059\u308b\u3088\u3046\u306b\u6307\u793a\u3057\u307e\u3059\u3002<\/p>\n
                \u30bf\u30fc\u30df\u30ca\u30eb\u3067\u3053\u306e\u51fa\u529b\u3092\u53d7\u3051\u53d6\u308a\u307e\u3059\u3002<\/p>\n
                <\/code><\/pre>\n
                Output<\/div>\n
                <\/code><\/pre>\n
                VITE v4.0.4 ready in 747 ms \u279c Local: http:\/\/localhost:5173\/ \u279c Network: http:\/\/your_ip_address:5173\/<\/mark> \u279c press h to show help<\/p>\n
                <\/code><\/pre>\n
                \u3053\u308c\u306f\u3001\u3042\u306a\u305f\u306e\u30b3\u30f3\u30d4\u30e5\u30fc\u30bf\u30fc\u30cd\u30c3\u30c8\u30ef\u30fc\u30af\u3084\u30eb\u30fc\u30bf\u30fc\u306b\u56fa\u6709\u306e\u30ed\u30fc\u30ab\u30ebIP\u30a2\u30c9\u30ec\u30b9\u3067\u3059\u3002<\/p>\n
                \u3042\u306a\u305f\u306e\u643a\u5e2f\u96fb\u8a71\u3067\u30d6\u30e9\u30a6\u30b6\u3092\u958b\u304d\u3001\u5148\u307b\u3069\u306eIP\u30a2\u30c9\u30ec\u30b9\u3068\u30dd\u30fc\u30c8\u3092\u5165\u529b\u3057\u3066\u3001\u3042\u306a\u305f\u306eVite\u30a2\u30d7\u30ea\u306e\u30d7\u30ec\u30d3\u30e5\u30fc\u306b\u643a\u5e2f\u96fb\u8a71\u304b\u3089\u30a2\u30af\u30bb\u30b9\u3057\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n
                \"React<\/div>\n
                \u958b\u767a\u74b0\u5883\u3067\u30a2\u30d7\u30ea\u3092\u5b9f\u884c\u3057\u3001\u6b63\u5e38\u306b\u52d5\u4f5c\u3092\u78ba\u8a8d\u3057\u307e\u3057\u305f\u3002\u6b21\u306e\u30b9\u30c6\u30c3\u30d7\u3067\u306f\u3001Vite\u306b\u4ed8\u5c5e\u3057\u3066\u3044\u308b\u3072\u306a\u578b\u30b3\u30fc\u30c9\u3092\u524a\u9664\u3057\u307e\u3059\u3002<\/p>\n
                \u30b9\u30c6\u30c3\u30d74- \u30c7\u30d5\u30a9\u30eb\u30c8\u306e\u30dc\u30a4\u30e9\u30fc\u30d7\u30ec\u30fc\u30c8\u3092\u524a\u9664\u3059\u308b\u3002<\/h2>\n
                \u3053\u306e\u624b\u9806\u3067\u306f\u3001src\/\u30c7\u30a3\u30ec\u30af\u30c8\u30ea\u304b\u3089Vite\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u306e\u30dc\u30a4\u30e9\u30fc\u30d7\u30ec\u30fc\u30c8\u30d5\u30a1\u30a4\u30eb\u3092\u524a\u9664\u3057\u3001\u65b0\u3057\u3044\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u306e\u30bb\u30c3\u30c8\u30a2\u30c3\u30d7\u3092\u884c\u3046\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002\u307e\u305f\u3001\u73fe\u5728\u306e\u30a2\u30d7\u30ea\u306e\u30c7\u30d5\u30a9\u30eb\u30c8\u306e\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u69cb\u9020\u306b\u3082\u6163\u308c\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002<\/p>\n
                \u4ee5\u4e0b\u306e\u30b3\u30de\u30f3\u30c9\u3092\u4f7f\u7528\u3057\u3066\u3001src\/\u30c7\u30a3\u30ec\u30af\u30c8\u30ea\u306e\u5185\u5bb9\u3092\u8868\u793a\u3057\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n
                <\/code><\/pre>\n
                  \n
                1. ls<\/span> src\/<\/li>\n<\/ol>\n
                  <\/code><\/pre>\n
                   <\/p>\n
                  <\/code><\/pre>\n
                  \u51fa\u529b\u306f\u5229\u7528\u53ef\u80fd\u306a\u3059\u3079\u3066\u306e\u30d5\u30a1\u30a4\u30eb\u3092\u4e00\u89a7\u8868\u793a\u3057\u307e\u3059\u3002<\/p>\n
                  <\/code><\/pre>\n
                  Output<\/div>\n
                  <\/code><\/pre>\n
                  App.css App.jsx assets index.css main.jsx<\/p>\n
                  <\/code><\/pre>\n
                  \u30d5\u30a1\u30a4\u30eb\u3084\u30c7\u30a3\u30ec\u30af\u30c8\u30ea\u3092\u524a\u9664\u3059\u308b\u306b\u306f\u3001rm\u30b3\u30de\u30f3\u30c9\u3092\u4f7f\u7528\u3057\u3066\u304f\u3060\u3055\u3044\u3002\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u304b\u3089\u30c7\u30d5\u30a9\u30eb\u30c8\u306e\u30d5\u30a1\u30a4\u30eb\u3092\u524a\u9664\u3059\u308b\u305f\u3081\u306b\u306f\u3001\u4ee5\u4e0b\u306e\u30b3\u30de\u30f3\u30c9\u3092\u4f7f\u7528\u3057\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n
                  <\/code><\/pre>\n
                    \n
                  1. rm<\/span> src\/App.css<\/li>\n
                  2. rm<\/span> src\/App.jsx<\/li>\n
                  3. rm<\/span> src\/index.css<\/li>\n<\/ol>\n
                    <\/code><\/pre>\n
                     <\/p>\n
                    <\/code><\/pre>\n
                    \u4ee5\u4e0b\u306e\u30b3\u30de\u30f3\u30c9\u3092\u4f7f\u7528\u3057\u3066\u3001\u30a2\u30bb\u30c3\u30c8\u30c7\u30a3\u30ec\u30af\u30c8\u30ea\u3092\u524a\u9664\u3057\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n
                    <\/code><\/pre>\n
                      \n
                    1. rm<\/span> -r<\/span> src\/assets<\/li>\n<\/ol>\n
                      <\/code><\/pre>\n
                       <\/p>\n
                      <\/code><\/pre>\n
                      -r\u30d5\u30e9\u30b0\u306f\u3001\u30c7\u30a3\u30ec\u30af\u30c8\u30ea\u3068\u305d\u306e\u5185\u5bb9\u3092\u524a\u9664\u3059\u308b\u969b\u306b\u5fc5\u8981\u306a\u518d\u5e30\u7684\u306a\u64cd\u4f5c\u3067\u3059\u3002<\/p>\n
                      \u3053\u308c\u3089\u306e\u30d5\u30a1\u30a4\u30eb\u3092\u524a\u9664\u3057\u305f\u5f8c\u3001src\/\u30c7\u30a3\u30ec\u30af\u30c8\u30ea\u306b\u306fmain.jsx\u306e\u307f\u304c\u6b8b\u308a\u307e\u3059\u3002\u518d\u5ea6ls src\/\u30b3\u30de\u30f3\u30c9\u3092\u5b9f\u884c\u3057\u3066\u3001\u6b8b\u308a\u306e\u30d5\u30a1\u30a4\u30eb\u3092\u78ba\u8a8d\u3057\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n
                      <\/code><\/pre>\n
                        \n
                      1. ls<\/span> src\/<\/li>\n<\/ol>\n
                        <\/code><\/pre>\n
                         <\/p>\n
                        <\/code><\/pre>\n
                        \u4eca\u5f8c\u3001\u30c7\u30a3\u30ec\u30af\u30c8\u30ea\u306b\u306fmain.jsx\u30d5\u30a1\u30a4\u30eb\u306e\u307f\u304c\u542b\u307e\u308c\u307e\u3059\u3002<\/p>\n
                        <\/code><\/pre>\n
                        Output<\/div>\n
                        <\/code><\/pre>\n
                        main.jsx<\/p>\n
                        <\/code><\/pre>\n
                        \u4ed6\u306e\u3059\u3079\u3066\u306e\u30d5\u30a1\u30a4\u30eb\u3092\u524a\u9664\u3057\u305f\u305f\u3081\u3001main.jsx\u5185\u306e\u524a\u9664\u3055\u308c\u305fCSS\u30d5\u30a1\u30a4\u30eb\u3078\u306e\u53c2\u7167\u3082\u524a\u9664\u3059\u308b\u5fc5\u8981\u304c\u3042\u308a\u307e\u3059\u3002<\/p>\n
                        \u4ee5\u4e0b\u306e\u30b3\u30de\u30f3\u30c9\u3092\u4f7f\u7528\u3057\u3066\u3001main.jsx\u3092\u7de8\u96c6\u3059\u308b\u305f\u3081\u306b\u958b\u3044\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n
                        <\/code><\/pre>\n
                          \n
                        1. nano<\/span> src\/main.jsx<\/li>\n<\/ol>\n
                          <\/code><\/pre>\n
                           <\/p>\n
                          <\/code><\/pre>\n
                          \u30cf\u30a4\u30e9\u30a4\u30c8\u3055\u308c\u305f\u884c\u3092\u524a\u9664\u3057\u3066\u3001CSS\u30d5\u30a1\u30a4\u30eb\u3078\u306e\u30ea\u30f3\u30af\u3092\u89e3\u9664\u3057\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n
                          \/src\/main.jsx\u3092\u65e5\u672c\u8a9e\u3067\u81ea\u7136\u306b\u8a00\u3044\u63db\u3048\u3066\u304f\u3060\u3055\u3044\uff081\u3064\u3060\u3051\u5fc5\u8981\u3067\u3059\uff09\uff1a
                          \n\/main.jsx\u306e\u30bd\u30fc\u30b9\u30b3\u30fc\u30c9\u3067\u3059\u3002<\/div>\n
                          import<\/span> React<\/span><\/span> from<\/span> 'react'<\/span>\r\nimport<\/span> ReactDOM<\/span><\/span> from<\/span> 'react-dom\/client'<\/span>\r\nimport<\/span> App<\/span><\/span> from<\/span> '.\/App'<\/span>\r\nimport<\/span> \".\/index.css\"<\/span><\/mark>\r\n\r\nReactDOM<\/span>.<\/span>createRoot<\/span>(<\/span>document<\/span>.<\/span>getElementById<\/span>(<\/span>'root'<\/span>)<\/span>)<\/span>.<\/span>render<\/span>(<\/span>\r\n<<\/span>React.StrictMode<\/span><\/span>><\/span><\/span>\r\n<<\/span>App<\/span><\/span> \/><\/span><\/span>\r\n<\/<\/span>React.StrictMode<\/span><\/span>><\/span><\/span>,<\/span>\r\n)<\/span>\r\n<\/code><\/pre>\n
                          main.jsx\u30d5\u30a1\u30a4\u30eb\u3092\u4fdd\u5b58\u3057\u3066\u9589\u3058\u308b\u3002<\/p>\n
                          \u4ee5\u4e0b\u306e\u30b3\u30de\u30f3\u30c9\u3092\u4f7f\u7528\u3057\u3066\u3001src\/\u30c7\u30a3\u30ec\u30af\u30c8\u30ea\u306e\u4e0b\u306bApp.jsx\u3068\u3044\u3046\u65b0\u3057\u3044\u30d5\u30a1\u30a4\u30eb\u3092\u4f5c\u6210\u3057\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n
                          <\/code><\/pre>\n
                            \n
                          1. nano<\/span> src\/App.jsx<\/li>\n<\/ol>\n
                            <\/code><\/pre>\n
                             <\/p>\n
                            <\/code><\/pre>\n
                            App.jsx\u30d5\u30a1\u30a4\u30eb\u306b\u6b21\u306e\u30b3\u30fc\u30c9\u3092\u8ffd\u52a0\u3057\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n
                            \/src\/App.jsx\u306e\u4ee5\u4e0b\u3092\u65e5\u672c\u8a9e\u3067\u4e00\u3064\u306e\u30aa\u30d7\u30b7\u30e7\u30f3\u3067\u8a00\u3044\u63db\u3048\u3066\u304f\u3060\u3055\u3044\u3002<\/div>\n
                            export<\/span> default<\/span> function<\/span> App<\/span><\/span>(<\/span>)<\/span> {<\/span>\r\nreturn<\/span> (<\/span>\r\n<<\/span><\/span>><\/span><\/span>\r\n<<\/span>div<\/span>><\/span><\/span>Hello World<\/span><\/<\/span>div<\/span>><\/span><\/span>\r\n<\/<\/span><\/span>><\/span><\/span>\r\n)<\/span>;<\/span>\r\n}<\/span>\r\n<\/code><\/pre>\n
                            \u4ee5\u4e0b\u306e\u30b3\u30fc\u30c9\u306f\u3001App\u3068\u3044\u3046\u65b0\u3057\u3044\u6a5f\u80fd\u6027\u306e\u3042\u308bReact\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3092\u4f5c\u6210\u3057\u307e\u3059\u3002export default\u306e\u63a5\u982d\u8f9e\u306f\u3001\u3053\u306e\u95a2\u6570\u3092\u30c7\u30d5\u30a9\u30eb\u30c8\u30a8\u30af\u30b9\u30dd\u30fc\u30c8\u3068\u3057\u3066JavaScript\u306b\u30a8\u30af\u30b9\u30dd\u30fc\u30c8\u3059\u308b\u3088\u3046\u6307\u793a\u3057\u307e\u3059\u3002\u95a2\u6570\u306e\u672c\u4f53\u306b\u306f\u3001\u300cHello World\u300d\u3068\u3044\u3046\u30c6\u30ad\u30b9\u30c8\u3092\u542b\u3080<\/p>\n
                            \n
                            \u304c\u3042\u308a\u307e\u3059\u3002<\/p>\n
                            App.jsx \u30d5\u30a1\u30a4\u30eb\u3092\u4fdd\u5b58\u3057\u3066\u9589\u3058\u308b\u3002<\/p>\n
                            \u958b\u767a\u30b5\u30fc\u30d0\u30fc\u3092\u518d\u8d77\u52d5\u3059\u308b\u305f\u3081\u306b\u3001\u4ee5\u4e0b\u306e\u30b3\u30de\u30f3\u30c9\u3092\u4f7f\u7528\u3057\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n
                            <\/code><\/pre>\n
                              \n
                            1. yarn<\/span> run dev –host<\/span><\/li>\n<\/ol>\n
                              <\/code><\/pre>\n
                               <\/p>\n
                              <\/code><\/pre>\n
                              \u30d6\u30e9\u30a6\u30b6\u3067http:\/\/localhost:3000\u3092\u958b\u3044\u3066\u3001\u7a7a\u306e\u30da\u30fc\u30b8\u306b\u300cHello World\u300d\u3068\u3044\u3046\u30c6\u30ad\u30b9\u30c8\u304c\u8868\u793a\u3055\u308c\u308b\u3088\u3046\u306b\u3001\u30da\u30fc\u30b8\u3092\u30ea\u30ed\u30fc\u30c9\u3057\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n
                              \"React<\/div>\n
                              \u3053\u306e\u30b9\u30c6\u30c3\u30d7\u3067\u306f\u3001Vite\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u304b\u3089\u3044\u304f\u3064\u304b\u306e\u30c7\u30d5\u30a9\u30eb\u30c8\u30d5\u30a1\u30a4\u30eb\u3092\u524a\u9664\u3057\u307e\u3057\u305f\u3002\u6b21\u306b\u3001\u65b0\u3057\u3044\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3001CSS\u30d5\u30a1\u30a4\u30eb\u3001\u304a\u3088\u3073\u753b\u50cf\u30d5\u30a1\u30a4\u30eb\u3092\u4f7f\u7528\u3057\u3066\u57fa\u672c\u7684\u306a\u30a2\u30d7\u30ea\u3092\u4f5c\u6210\u3057\u307e\u3059\u3002<\/p>\n
                              \u30b9\u30c6\u30c3\u30d75 – \u57fa\u672c\u30a2\u30d7\u30ea\u306e\u4f5c\u6210<\/h2>\n
                              \u3053\u306e\u30b9\u30c6\u30c3\u30d7\u3067\u306f\u3001\u57fa\u672c\u7684\u306a\u30a2\u30d7\u30ea\u3092\u4f5c\u6210\u3059\u308b\u3053\u3068\u3067\u3001\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3092\u4f5c\u6210\u3057\u3001CSS\u30d5\u30a1\u30a4\u30eb\u3092\u8ffd\u52a0\u3057\u3001\u753b\u50cf\u306b\u30ea\u30f3\u30af\u3092\u4f5c\u6210\u3057\u307e\u3059\u3002\u307e\u305a\u3001\u958b\u767a\u30b5\u30fc\u30d0\u30fc\u3092\u7d42\u4e86\u3057\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n
                              \u4ee5\u4e0b\u306e\u30b5\u30d6\u30bb\u30af\u30b7\u30e7\u30f3\u3067\u306f\u3001React\u30a2\u30d7\u30ea\u306e\u65b0\u3057\u3044\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3092\u4f5c\u6210\u3057\u307e\u3059\u3002<\/p>\n
                              \u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306e\u4f5c\u6210<\/h3>\n
                              \u65b0\u3057\u3044\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3092\u4f5c\u6210\u3059\u308b\u3053\u3068\u3067\u3001\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u306b\u30e2\u30b8\u30e5\u30fc\u30eb\u6027\u304c\u8ffd\u52a0\u3055\u308c\u307e\u3059\u3002\u3059\u3079\u3066\u306e\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3092\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u30c7\u30a3\u30ec\u30af\u30c8\u30ea\u306b\u8ffd\u52a0\u3057\u3066\u6574\u7406\u3057\u307e\u3059\u3002<\/p>\n
                              \u4ee5\u4e0b\u306e\u30b3\u30de\u30f3\u30c9\u3092\u4f7f\u7528\u3057\u3066\u3001src\/\u5185\u306b\u65b0\u3057\u3044\u30c7\u30a3\u30ec\u30af\u30c8\u30ea\u300ccomponents\u300d\u3092\u4f5c\u6210\u3057\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n
                              <\/code><\/pre>\n
                                \n
                              1. mkdir<\/span> src\/components<\/li>\n<\/ol>\n
                                <\/code><\/pre>\n
                                 <\/p>\n
                                <\/code><\/pre>\n
                                \u6b21\u306b\u3001\u4ee5\u4e0b\u306e\u30b3\u30de\u30f3\u30c9\u3067src\/components\/\u30c7\u30a3\u30ec\u30af\u30c8\u30ea\u5185\u306bWelcome.jsx\u3068\u3044\u3046\u65b0\u3057\u3044\u30d5\u30a1\u30a4\u30eb\u3092\u4f5c\u6210\u3057\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n
                                <\/code><\/pre>\n
                                  \n
                                1. nano<\/span> src\/components\/Welcome.jsx<\/li>\n<\/ol>\n
                                  <\/code><\/pre>\n
                                   <\/p>\n
                                  <\/code><\/pre>\n
                                  Welcome.jsx\u30d5\u30a1\u30a4\u30eb\u306b\u6b21\u306e\u30b3\u30fc\u30c9\u3092\u8ffd\u52a0\u3057\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n
                                  \/src\/components\/Welcome.jsx \u306e\u5185\u5bb9\u3092\u65e5\u672c\u8a9e\u3067\u8a00\u3044\u63db\u3048\u308b\u3068\u3001\u6b21\u306e\u901a\u308a\u3067\u3059\uff1a
                                  \n\u300c\/src\/components\/Welcome.jsx\u300d<\/div>\n
                                  export<\/span> default<\/span> function<\/span> Welcome<\/span><\/span>(<\/span>)<\/span> {<\/span>\r\nreturn<\/span> (<\/span>\r\n<<\/span><\/span>><\/span><\/span>\r\n<<\/span>div<\/span> className<\/span>=<\/span>\"<\/span>wrapper\"<\/span><\/span>><\/span><\/span>\r\n<<\/span>h1<\/span>><\/span><\/span>Welcome To My App<\/span><\/<\/span>h1<\/span>><\/span><\/span>\r\n<<\/span>p<\/span>><\/span><\/span>This is going to be the coolest app in the world!<\/span><\/<\/span>p<\/span>><\/span><\/span>\r\n<\/<\/span>div<\/span>><\/span><\/span>\r\n<\/<\/span><\/span>><\/span><\/span>\r\n)<\/span>;<\/span>\r\n}<\/span>\r\n<\/code><\/pre>\n
                                  \u4e0a\u8a18\u306e\u30b3\u30fc\u30c9\u306f\u3001Welcome\u3068\u3044\u3046\u65b0\u3057\u3044\u6a5f\u80fd\u7684\u306aReact\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3092\u4f5c\u6210\u3057\u307e\u3059\u3002export default\u30d7\u30ec\u30d5\u30a3\u30c3\u30af\u30b9\u306f\u3001JavaScript\u306b\u3053\u306e\u95a2\u6570\u3092\u30c7\u30d5\u30a9\u30eb\u30c8\u306e\u30a8\u30af\u30b9\u30dd\u30fc\u30c8\u3068\u3057\u3066\u30a8\u30af\u30b9\u30dd\u30fc\u30c8\u3059\u308b\u3088\u3046\u6307\u793a\u3057\u307e\u3059\u3002<\/p>\n
                                  \u30af\u30e9\u30b9\u540d\u304c”wrapper”\u306ediv\u30bf\u30b0\u306f\u3001CSS\u3067\u3053\u306e\u30bb\u30af\u30b7\u30e7\u30f3\u3092\u6307\u5b9a\u3059\u308b\u305f\u3081\u306b\u4f7f\u7528\u3067\u304d\u307e\u3059\u3002h1\u30bf\u30b0\u3068p\u30bf\u30b0\u306f\u3001\u30e1\u30c3\u30bb\u30fc\u30b8\u3092\u753b\u9762\u4e0a\u306b\u8868\u793a\u3057\u307e\u3059\u3002<\/p>\n
                                  \u30d5\u30a1\u30a4\u30eb\u3092\u4fdd\u5b58\u3057\u3066\u9589\u3058\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n
                                  \u6b21\u306b\u3001App.jsx\u30d5\u30a1\u30a4\u30eb\u3067\u3053\u306e\u65b0\u3057\u3044\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3092\u53c2\u7167\u3057\u307e\u3059\u3002<\/p>\n
                                  \u4ee5\u4e0b\u306e\u30b3\u30de\u30f3\u30c9\u3067App.jsx\u3092\u958b\u304f\uff1a<\/p>\n
                                  <\/code><\/pre>\n
                                    \n
                                  1. nano<\/span> src\/App.jsx<\/li>\n<\/ol>\n
                                    <\/code><\/pre>\n
                                     <\/p>\n
                                    <\/code><\/pre>\n
                                    \u4ee5\u4e0b\u306e\u30b3\u30fc\u30c9\u3067App.jsx\u306e\u5185\u5bb9\u3092\u66f4\u65b0\u3057\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n
                                    \/src\/App.jsx\u3092\u65e5\u672c\u8a9e\u3067\u8868\u73fe\u3059\u308b\u3068\u3046\u3088\u3046\u306a\u3082\u306e\u306f\u6b21\u306e\u901a\u308a\u3067\u3059\uff1a\u300c\/src\/App.jsx\u300d<\/div>\n
                                    import<\/span> Welcome<\/span><\/span> from<\/span> \".\/components\/Welcome\"<\/span><\/mark>\r\n\r\nexport<\/span> default<\/span> function<\/span> App<\/span><\/span>(<\/span>)<\/span> {<\/span>\r\nreturn<\/span> (<\/span>\r\n<<\/span><\/span>><\/span><\/span>\r\n<<\/span>Welcome<\/span><\/span> \/><\/span><\/span><\/mark>\r\n<\/<\/span><\/span>><\/span><\/span>\r\n)<\/span>\r\n}<\/span>\r\n<\/code><\/pre>\n
                                    \u3053\u306e\u30b3\u30fc\u30c9\u884c\u306f\u3001Welcome.jsx\u3092\u30a2\u30d7\u30ea\u306b\u30a4\u30f3\u30dd\u30fc\u30c8\u3057\u3001\u65b0\u3057\u3044\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3092\u95a2\u6570\u672c\u4f53\u306b\u30ea\u30f3\u30af\u3057\u307e\u3059\u3002\u4f5c\u696d\u304c\u7d42\u308f\u3063\u305f\u3089\u3001\u30d5\u30a1\u30a4\u30eb\u3092\u4fdd\u5b58\u3057\u3066\u9589\u3058\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n
                                    \u6b21\u306e\u30b5\u30d6\u30bb\u30af\u30b7\u30e7\u30f3\u3067\u306f\u3001\u30a2\u30d7\u30ea\u306b\u753b\u50cf\u3092\u8ffd\u52a0\u3057\u307e\u3059\u3002<\/p>\n
                                    \u753b\u50cf\u3092\u8ffd\u52a0\u3059\u308b<\/h3>\n
                                    React\u306b\u304a\u3044\u3066\u3001\u753b\u50cf\u3092\u8ffd\u52a0\u3059\u308b\u3053\u3068\u306f\u30a2\u30d7\u30ea\u958b\u767a\u306e\u4e00\u822c\u7684\u306a\u7528\u9014\u3067\u3059\u3002<\/p>\n
                                    src\/\u30c7\u30a3\u30ec\u30af\u30c8\u30ea\u306e\u4e0b\u306bimg\u3068\u3044\u3046\u65b0\u3057\u3044\u30c7\u30a3\u30ec\u30af\u30c8\u30ea\u3092\u4f5c\u6210\u3059\u308b\u305f\u3081\u306b\u3001\u4ee5\u4e0b\u306e\u30b3\u30de\u30f3\u30c9\u3092\u4f7f\u7528\u3057\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n
                                    <\/code><\/pre>\n
                                      \n
                                    1. mkdir<\/span> src\/img<\/li>\n<\/ol>\n
                                      <\/code><\/pre>\n
                                       <\/p>\n
                                      <\/code><\/pre>\n
                                      \u3053\u306e\u30b3\u30de\u30f3\u30c9\u3092\u4f7f\u7528\u3057\u3066\u3001src\/img \u30c7\u30a3\u30ec\u30af\u30c8\u30ea\u306b\u79fb\u52d5\u3057\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n
                                      <\/code><\/pre>\n
                                        \n
                                      1. cd<\/span> src\/img<\/li>\n<\/ol>\n
                                        <\/code><\/pre>\n
                                         <\/p>\n
                                        <\/code><\/pre>\n
                                        \u300csrc\/img\u300d\u306b\u3053\u306e\u30b5\u30df\u30fc\u306e\u753b\u50cf\u3092\u30c0\u30a6\u30f3\u30ed\u30fc\u30c9\u3057\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n
                                        \"Sammy<\/div>\n
                                        wget\u3092\u4f7f\u7528\u3057\u3066\u753b\u50cf\u3092\u30c0\u30a6\u30f3\u30ed\u30fc\u30c9\u3057\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n
                                        <\/code><\/pre>\n
                                          \n
                                        1. wget<\/span> https:\/\/html.sammy-codes.com\/images\/small-profile.jpeg<\/li>\n<\/ol>\n
                                          <\/code><\/pre>\n
                                           <\/p>\n
                                          <\/code><\/pre>\n
                                          \u4ee5\u4e0b\u306e\u30b3\u30de\u30f3\u30c9\u3092\u4f7f\u3063\u3066\u753b\u50cf\u306e\u540d\u524d\u3092\u5909\u66f4\u3057\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n
                                          <\/code><\/pre>\n
                                            \n
                                          1. mv<\/span> small-profile.jpeg sammy.jpeg<\/li>\n<\/ol>\n
                                            <\/code><\/pre>\n
                                             <\/p>\n
                                            <\/code><\/pre>\n
                                            \u3053\u306e\u30b3\u30de\u30f3\u30c9\u306f\u3001\u5f8c\u3067\u7c21\u5358\u306b\u53c2\u7167\u3059\u308b\u305f\u3081\u306b\u3001\u5c0f\u3055\u306a\u30d7\u30ed\u30d5\u30a1\u30a4\u30eb\u753b\u50cf\u306e\u30d5\u30a1\u30a4\u30eb\u540d\u3092 small-profile.jpeg \u304b\u3089 sammy.jpeg \u306b\u5909\u66f4\u3057\u307e\u3059\u3002<\/p>\n
                                            \u3053\u306e\u30b3\u30de\u30f3\u30c9\u3092\u4f7f\u7528\u3057\u3066\u3001\u30eb\u30fc\u30c8\u30c7\u30a3\u30ec\u30af\u30c8\u30ea\u306b\u623b\u3063\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n
                                            <\/code><\/pre>\n
                                              \n
                                            1. cd<\/span> ..<\/span>\/..<\/span>\/<\/li>\n<\/ol>\n
                                              <\/code><\/pre>\n
                                               <\/p>\n
                                              <\/code><\/pre>\n
                                              \u6b21\u306b\u3001Welcome.jsx\u30d5\u30a1\u30a4\u30eb\u3092\u66f4\u65b0\u3057\u3066\u3001\u3053\u306e\u753b\u50cf\u306b\u30ea\u30f3\u30af\u3092\u8cbc\u308a\u307e\u3059\u3002\u30d5\u30a1\u30a4\u30eb\u3092\u958b\u3044\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n
                                              <\/code><\/pre>\n
                                                \n
                                              1. nano<\/span> src\/components\/Welcome.jsx<\/li>\n<\/ol>\n
                                                <\/code><\/pre>\n
                                                 <\/p>\n
                                                <\/code><\/pre>\n
                                                \u30cf\u30a4\u30e9\u30a4\u30c8\u3055\u308c\u305f\u884c\u3092\u8ffd\u52a0\u3057\u3066\u3001Welcome.jsx \u30d5\u30a1\u30a4\u30eb\u3092\u66f4\u65b0\u3057\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n
                                                \/src\/components\/Welcome.jsx\u3092\u65e5\u672c\u8a9e\u3067\u8a00\u3044\u63db\u3048\u308b\u3068\u3001\u6b21\u306e\u3088\u3046\u306b\u306a\u308a\u307e\u3059\u3002
                                                \n\u300c\/src\/components\/Welcome.jsx\u300d<\/div>\n
                                                import<\/span> Sammy<\/span><\/span> from<\/span> \"..\/img\/sammy.jpeg\"<\/span><\/mark>\r\n\r\nexport<\/span> default<\/span> function<\/span> Welcome<\/span><\/span>(<\/span>)<\/span> {<\/span>\r\nreturn<\/span> (<\/span>\r\n<<\/span><\/span>><\/span><\/span>\r\n<<\/span>div<\/span> className<\/span>=<\/span>\"<\/span>wrapper\"<\/span><\/span>><\/span><\/span>\r\n<<\/span>h1<\/span>><\/span><\/span>Welcome To My App<\/span><\/<\/span>h1<\/span>><\/span><\/span>\r\n<<\/span>p<\/span>><\/span><\/span>This is going to be the coolest app in the world!<\/span><\/<\/span>p<\/span>><\/span><\/span>\r\n<<\/span>img<\/span> src<\/span>=<\/span>{<\/span>Sammy<\/span>}<\/span><\/span> alt<\/span>=<\/span>\"<\/span>Sammy Image\"<\/span><\/span> width<\/span>=<\/span>{<\/span>200<\/span>}<\/span><\/span> height<\/span>=<\/span>{<\/span>200<\/span>}<\/span><\/span> \/><\/span><\/span><\/mark>\r\n<\/<\/span>div<\/span>><\/span><\/span>\r\n<\/<\/span><\/span>><\/span><\/span>\r\n)<\/span>\r\n}<\/span>\r\n\r\n<\/code><\/pre>\n
                                                \u6700\u521d\u306e\u884c\u306f\u3001\u753b\u50cf\u3092React\u306b\u30e2\u30b8\u30e5\u30fc\u30eb\u3068\u3057\u3066\u30a4\u30f3\u30dd\u30fc\u30c8\u3057\u307e\u3059\u3002<\/p>\n
                                                \u95a2\u6570\u672c\u4f53\u306e\u5225\u306e\u884c\u3067\u306f\u3001\u65b0\u3057\u3044\u30bf\u30b0\u304c\u4f5c\u6210\u3055\u308c\u3001src\u5c5e\u6027\u304c\u5148\u307b\u3069\u30a4\u30f3\u30dd\u30fc\u30c8\u3057\u305f\u753b\u50cf\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306b\u30ea\u30f3\u30af\u3055\u308c\u307e\u3059\u3002width\u3068height\u306e\u30d7\u30ed\u30d1\u30c6\u30a3\u306f\u3001\u5bfe\u5fdc\u3059\u308b\u753b\u50cf\u5c5e\u6027\u3092200\u30d4\u30af\u30bb\u30eb\u306b\u8a2d\u5b9a\u3057\u307e\u3059\u3002<\/p>\n
                                                Welcome.jsx\u30d5\u30a1\u30a4\u30eb\u3092\u4fdd\u5b58\u3057\u3066\u9589\u3058\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n
                                                \u6b21\u306b\u3001\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u306bCSS\u3092\u8ffd\u52a0\u3057\u307e\u3059\u3002 (Tsugi ni, purojekuto ni CSS o tsuika shimasu.)<\/p>\n
                                                CSS \u3092\u8ffd\u52a0\u3059\u308b<\/h3>\n
                                                \u3053\u306e\u30b5\u30d6\u30bb\u30af\u30b7\u30e7\u30f3\u3067\u306f\u3001\u30a2\u30d7\u30ea\u3092\u30b9\u30bf\u30a4\u30eb\u4ed8\u3051\u3059\u308b\u305f\u3081\u306b\u3001\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u306b\u30ab\u30b9\u30bf\u30e0CSS\u30d5\u30a1\u30a4\u30eb\u3092\u8ffd\u52a0\u3057\u307e\u3059\u3002<\/p>\n
                                                \u6b21\u306e\u30b3\u30de\u30f3\u30c9\u3092\u4f7f\u7528\u3057\u3066\u3001src\/\u30c7\u30a3\u30ec\u30af\u30c8\u30ea\u306e\u4e0b\u306bcss\u3068\u3044\u3046\u65b0\u3057\u3044\u30c7\u30a3\u30ec\u30af\u30c8\u30ea\u3092\u4f5c\u6210\u3057\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n
                                                <\/code><\/pre>\n
                                                  \n
                                                1. mkdir<\/span> src\/css<\/li>\n<\/ol>\n
                                                  <\/code><\/pre>\n
                                                   <\/p>\n
                                                  <\/code><\/pre>\n
                                                  \u4eca\u3001src\/css\u3068\u3044\u3046\u30c7\u30a3\u30ec\u30af\u30c8\u30ea\u306bmain.css\u3068\u3044\u3046\u65b0\u3057\u3044CSS\u30d5\u30a1\u30a4\u30eb\u3092\u4f5c\u6210\u3057\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n
                                                  <\/code><\/pre>\n
                                                    \n
                                                  1. nano<\/span> src\/css\/main.css<\/li>\n<\/ol>\n
                                                    <\/code><\/pre>\n
                                                     <\/p>\n
                                                    <\/code><\/pre>\n
                                                    \u30e1\u30a4\u30f3\u306eCSS\u30d5\u30a1\u30a4\u30eb\u306b\u4ee5\u4e0b\u306e\u30b3\u30fc\u30c9\u3092\u8ffd\u52a0\u3057\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n
                                                    \u4ee5\u4e0b\u306f\u3001\u65e5\u672c\u8a9e\u3067\u306e\u30d1\u30e9\u30d5\u30ec\u30fc\u30ba\u4f8b\u3067\u3059\uff1a\u300c\/src\/css\/main.css\u300d<\/div>\n
                                                    body<\/span> {<\/span>\r\ndisplay<\/span>:<\/span> grid;<\/span>\r\nplace-items<\/span>:<\/span> center;<\/span>\r\nbackground-color<\/span>:<\/span> #b4a7d6<\/span>;<\/span>\r\nfont-family<\/span>:<\/span> Arial,<\/span> Helvetica,<\/span> sans-serif;<\/span>\r\n}<\/span>\r\n\r\n.wrapper<\/span><\/span> {<\/span>\r\nbackground-color<\/span>:<\/span> #fff9e6<\/span>;<\/span>\r\npadding<\/span>:<\/span> 20<\/span>px<\/span>;<\/span>\r\nborder-radius<\/span>:<\/span> 10<\/span>px<\/span>;<\/span>\r\n}<\/span>\r\n\r\nh1<\/span> {<\/span>\r\ncolor<\/span>:<\/span> #8873be<\/span>;<\/span>\r\n}<\/span>\r\n<\/code><\/pre>\n
                                                    \u4e0a\u8a18\u306eCSS\u3067\u306f\u3001\u30dc\u30c7\u30a3\u306b\u30b0\u30ea\u30c3\u30c9\u30c7\u30a3\u30b9\u30d7\u30ec\u30a4\u3092\u8a2d\u5b9a\u3057\u3001\u30a2\u30a4\u30c6\u30e0\u3092\u4e2d\u592e\u306b\u914d\u7f6e\u3057\u307e\u3059\u3002\u307e\u305f\u3001\u30d5\u30a9\u30f3\u30c8\u30d5\u30a1\u30df\u30ea\u30fc\u3068\u80cc\u666f\u8272\u3082\u6307\u5b9a\u3057\u3066\u3044\u307e\u3059\u3002<\/p>\n
                                                    .wrapper\u30af\u30e9\u30b9\u306f\u3001Welcome.jsx\u30d5\u30a1\u30a4\u30eb\u5185\u306ewrapper\u30c7\u30a3\u30d3\u30b8\u30e7\u30f3\u3092\u9078\u629e\u3057\u307e\u3059\u3002\u3053\u306e\u30af\u30e9\u30b9\u306e\u30b9\u30bf\u30a4\u30eb\u306f\u3001\u4ee5\u4e0b\u306e\u3088\u3046\u306a\u52d5\u4f5c\u3092\u3057\u307e\u3059\u3002<\/p>\n
                                                      \n
                                                    • Set a background color.<\/li>\n
                                                    • Add padding of 20 pixels.<\/li>\n
                                                    • Add rounder corners of 10 pixels.<\/li>\n<\/ul>\n
                                                      h1 \u30bb\u30ec\u30af\u30bf\u306fHTML\u5185\u306e\u30bf\u30b0\u3092\u30bf\u30fc\u30b2\u30c3\u30c8\u306b\u3057\u3001\u305d\u306e\u8272\u3092\u7d2b\u306e\u8272\u8abf\u306b\u8a2d\u5b9a\u3057\u307e\u3059\u3002<\/p>\n
                                                      \u7d42\u4e86\u3057\u305f\u3089\u3001main.css\u30d5\u30a1\u30a4\u30eb\u3092\u4fdd\u5b58\u3057\u3066\u9589\u3058\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n
                                                      \u6b21\u306b\u3001Welcome.jsx\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u304b\u3089\u65b0\u3057\u3044CSS\u30d5\u30a1\u30a4\u30eb\u3092\u53c2\u7167\u3057\u307e\u3059\u3002Welcome.jsx\u30d5\u30a1\u30a4\u30eb\u3092\u958b\u3044\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n
                                                      <\/code><\/pre>\n
                                                        \n
                                                      1. nano<\/span> src\/components\/Welcome.jsx<\/li>\n<\/ol>\n
                                                        <\/code><\/pre>\n
                                                         <\/p>\n
                                                        <\/code><\/pre>\n
                                                        \u30cf\u30a4\u30e9\u30a4\u30c8\u3055\u308c\u305f\u884c\u3067\u30d5\u30a1\u30a4\u30eb\u306e\u5185\u5bb9\u3092\u66f4\u65b0\u3057\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n
                                                        \/src\/components\/Welcome.jsx\u306e\u5185\u5bb9\u3092\u65e5\u672c\u8a9e\u3067\u8a00\u3044\u63db\u3048\u308b\u3068\u3001\u6b21\u306e\u3088\u3046\u306b\u306a\u308a\u307e\u3059\uff1a\u300c\/src\/components\/Welcome.jsx\u30d5\u30a1\u30a4\u30eb\u306e\u4e2d\u8eab\u300d<\/div>\n
                                                        import<\/span> Sammy<\/span><\/span> from<\/span> \"..\/img\/sammy.jpeg\"<\/span>\r\nimport<\/span> \"..\/css\/main.css\"<\/span><\/mark>\r\n\r\nexport<\/span> default<\/span> function<\/span> Welcome<\/span><\/span>(<\/span>)<\/span> {<\/span>\r\nreturn<\/span> (<\/span>\r\n<<\/span><\/span>><\/span><\/span>\r\n<<\/span>div<\/span> className<\/span>=<\/span>\"<\/span>wrapper\"<\/span><\/span>><\/span><\/span>\r\n<<\/span>h1<\/span>><\/span><\/span>Welcome To My App<\/span><\/<\/span>h1<\/span>><\/span><\/span>\r\n<<\/span>p<\/span>><\/span><\/span>This is going to be the coolest app in the world!<\/span><\/<\/span>p<\/span>><\/span><\/span>\r\n<<\/span>img<\/span> src<\/span>=<\/span>{<\/span>Sammy<\/span>}<\/span><\/span> alt<\/span>=<\/span>\"<\/span>Sammy Image\"<\/span><\/span> width<\/span>=<\/span>{<\/span>200<\/span>}<\/span><\/span> height<\/span>=<\/span>{<\/span>200<\/span>}<\/span><\/span> \/><\/span><\/span>\r\n<\/<\/span>div<\/span>><\/span><\/span>\r\n<\/<\/span><\/span>><\/span><\/span>\r\n)<\/span>\r\n}<\/span>\r\n<\/code><\/pre>\n
                                                        \u3053\u306e\u884c\u306f\u3001CSS\u30d5\u30a1\u30a4\u30eb\u3092\u3042\u306a\u305f\u306e\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306e\u30e2\u30b8\u30e5\u30fc\u30eb\u3068\u3057\u3066\u30a4\u30f3\u30dd\u30fc\u30c8\u3057\u307e\u3059\u3002\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u30d5\u30a9\u30eb\u30c0\u306e\u6b63\u3057\u3044\u30d5\u30a1\u30a4\u30eb\u30d1\u30b9\u3067\u3053\u306e\u884c\u3092\u66f4\u65b0\u3059\u308b\u5fc5\u8981\u304c\u3042\u308b\u304b\u3082\u3057\u308c\u307e\u305b\u3093\u3002<\/p>\n
                                                        \u4f5c\u696d\u304c\u7d42\u308f\u3063\u305f\u3089\u3001Welcome.jsx\u30d5\u30a1\u30a4\u30eb\u3092\u4fdd\u5b58\u3057\u3066\u9589\u3058\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n
                                                        \u4e0b\u306e\u30b5\u30d6\u30bb\u30af\u30b7\u30e7\u30f3\u3067\u306f\u3001\u30a2\u30d7\u30ea\u306e\u30bf\u30a4\u30c8\u30eb\u30d0\u30fc\u3092\u5909\u66f4\u3057\u307e\u3059\u3002<\/p>\n
                                                        \u30a2\u30d7\u30ea\u306e\u30bf\u30a4\u30c8\u30eb\u30d0\u30fc\u306e\u5909\u66f4<\/h3>\n
                                                        \u30c7\u30d5\u30a9\u30eb\u30c8\u3067\u306f\u3001Vite\u30a2\u30d7\u30ea\u306f\u30d6\u30e9\u30a6\u30b6\u306e\u30a6\u30a3\u30f3\u30c9\u30a6\u30bf\u30a4\u30c8\u30eb\u30d0\u30fc\u306b\u300cVite + React\u300d\u3068\u3044\u3046\u30c6\u30ad\u30b9\u30c8\u3092\u8868\u793a\u3057\u307e\u3059\u3002\u3053\u306e\u30b9\u30c6\u30c3\u30d7\u3067\u306f\u3001\u305d\u308c\u3092\u8aac\u660e\u7684\u306a\u30bf\u30a4\u30c8\u30eb\u306b\u5909\u66f4\u3057\u307e\u3059\u3002<\/p>\n
                                                        \u30eb\u30fc\u30c8\u30c7\u30a3\u30ec\u30af\u30c8\u30ea\u306b\u3042\u308bindex.html\u3092\u958b\u3044\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n
                                                        <\/code><\/pre>\n
                                                          \n
                                                        1. nano<\/span> index.html<\/li>\n<\/ol>\n
                                                          <\/code><\/pre>\n
                                                           <\/p>\n
                                                          <\/code><\/pre>\n
                                                          \u30cf\u30a4\u30e9\u30a4\u30c8\u3055\u308c\u305f\u30c6\u30ad\u30b9\u30c8\u3067<\/p>\n<\/div>\n","protected":false},"excerpt":{"rendered":"
                                                          \u8457\u8005\u306f\u3001Write for Donations \u30d7\u30ed\u30b0\u30e9\u30e0\u306e\u4e00\u74b0\u3068\u3057\u3066\u3001Code.org\u306b\u5bc4\u4ed8\u3092\u3059\u308b\u3053\u3068\u3092\u9078\u3073\u307e\u3057\u305f\u3002 \u306f\u3058\u3081\u306b \u901a\u5e38\u3001Create React App\u3092\u4f7f\u7528\u3057\u3066\u65b0\u3057\u3044\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u3092\u4f5c\u6210\u3059\u308b\u3053\u3068\u304c\u3042\u308a\u307e\u3059 […]<\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[26,18],"class_list":["post-53","post","type-post","status-publish","format-standard","hentry","category-uncategorized","tag-26","tag-18"],"yoast_head":"\nVite\u3092\u4f7f\u3063\u305fReact\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u306e\u30bb\u30c3\u30c8\u30a2\u30c3\u30d7\u65b9\u6cd5 - Blog - Silicon Cloud<\/title>\n<meta name=\"description\" content=\"Vite\u3092\u4f7f\u3063\u305fReact\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u306e\u30bb\u30c3\u30c8\u30a2\u30c3\u30d7\u65b9\u6cd5\u3092\u5206\u304b\u308a\u3084\u3059\u304f\u89e3\u8aac\u3002\u5b9f\u8df5\u7684\u306a\u4f8b\u3068\u30b3\u30fc\u30c9\u3001\u6ce8\u610f\u70b9\u3092\u542b\u3081\u3066\u521d\u5fc3\u8005\u306b\u3082\u7406\u89e3\u3067\u304d\u308b\u3088\u3046\u8aac\u660e\u3057\u307e\u3059\u3002\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.silicloud.com\/ja\/blog\/vite\u3092\u4f7f\u3063\u305freact\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u306e\u30bb\u30c3\u30c8\u30a2\u30c3\u30d7\u65b9\u6cd5\/\" \/>\n<meta property=\"og:locale\" content=\"ja_JP\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Vite\u3092\u4f7f\u3063\u305fReact\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u306e\u30bb\u30c3\u30c8\u30a2\u30c3\u30d7\u65b9\u6cd5\" \/>\n<meta property=\"og:description\" content=\"Vite\u3092\u4f7f\u3063\u305fReact\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u306e\u30bb\u30c3\u30c8\u30a2\u30c3\u30d7\u65b9\u6cd5\u3092\u5206\u304b\u308a\u3084\u3059\u304f\u89e3\u8aac\u3002\u5b9f\u8df5\u7684\u306a\u4f8b\u3068\u30b3\u30fc\u30c9\u3001\u6ce8\u610f\u70b9\u3092\u542b\u3081\u3066\u521d\u5fc3\u8005\u306b\u3082\u7406\u89e3\u3067\u304d\u308b\u3088\u3046\u8aac\u660e\u3057\u307e\u3059\u3002\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.silicloud.com\/ja\/blog\/vite\u3092\u4f7f\u3063\u305freact\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u306e\u30bb\u30c3\u30c8\u30a2\u30c3\u30d7\u65b9\u6cd5\/\" \/>\n<meta property=\"og:site_name\" content=\"Blog - Silicon Cloud\" \/>\n<meta property=\"article:published_time\" content=\"2023-04-06T05:43:22+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-07-31T04:41:26+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/cdn.silicloud.com\/blog-img\/blog\/img\/6564489adaa94e2bdf7ae201\/42-0.png\" \/>\n<meta name=\"author\" content=\"\u967d, \u5411\u5b87\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"\u57f7\u7b46\u8005\" \/>\n\t<meta name=\"twitter:data1\" content=\"\u967d, \u5411\u5b87\" \/>\n\t<meta name=\"twitter:label2\" content=\"\u63a8\u5b9a\u8aad\u307f\u53d6\u308a\u6642\u9593\" \/>\n\t<meta name=\"twitter:data2\" content=\"26\u5206\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.silicloud.com\/ja\/blog\/vite%e3%82%92%e4%bd%bf%e3%81%a3%e3%81%9freact%e3%83%97%e3%83%ad%e3%82%b8%e3%82%a7%e3%82%af%e3%83%88%e3%81%ae%e3%82%bb%e3%83%83%e3%83%88%e3%82%a2%e3%83%83%e3%83%97%e6%96%b9%e6%b3%95\/\",\"url\":\"https:\/\/www.silicloud.com\/ja\/blog\/vite%e3%82%92%e4%bd%bf%e3%81%a3%e3%81%9freact%e3%83%97%e3%83%ad%e3%82%b8%e3%82%a7%e3%82%af%e3%83%88%e3%81%ae%e3%82%bb%e3%83%83%e3%83%88%e3%82%a2%e3%83%83%e3%83%97%e6%96%b9%e6%b3%95\/\",\"name\":\"Vite\u3092\u4f7f\u3063\u305fReact\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u306e\u30bb\u30c3\u30c8\u30a2\u30c3\u30d7\u65b9\u6cd5 - Blog - Silicon Cloud\",\"isPartOf\":{\"@id\":\"https:\/\/www.silicloud.com\/ja\/blog\/#website\"},\"datePublished\":\"2023-04-06T05:43:22+00:00\",\"dateModified\":\"2025-07-31T04:41:26+00:00\",\"author\":{\"@id\":\"https:\/\/www.silicloud.com\/ja\/blog\/#\/schema\/person\/4aef6196128551a0f5d66db46c42866c\"},\"description\":\"Vite\u3092\u4f7f\u3063\u305fReact\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u306e\u30bb\u30c3\u30c8\u30a2\u30c3\u30d7\u65b9\u6cd5\u3092\u5206\u304b\u308a\u3084\u3059\u304f\u89e3\u8aac\u3002\u5b9f\u8df5\u7684\u306a\u4f8b\u3068\u30b3\u30fc\u30c9\u3001\u6ce8\u610f\u70b9\u3092\u542b\u3081\u3066\u521d\u5fc3\u8005\u306b\u3082\u7406\u89e3\u3067\u304d\u308b\u3088\u3046\u8aac\u660e\u3057\u307e\u3059\u3002\",\"breadcrumb\":{\"@id\":\"https:\/\/www.silicloud.com\/ja\/blog\/vite%e3%82%92%e4%bd%bf%e3%81%a3%e3%81%9freact%e3%83%97%e3%83%ad%e3%82%b8%e3%82%a7%e3%82%af%e3%83%88%e3%81%ae%e3%82%bb%e3%83%83%e3%83%88%e3%82%a2%e3%83%83%e3%83%97%e6%96%b9%e6%b3%95\/#breadcrumb\"},\"inLanguage\":\"ja\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.silicloud.com\/ja\/blog\/vite%e3%82%92%e4%bd%bf%e3%81%a3%e3%81%9freact%e3%83%97%e3%83%ad%e3%82%b8%e3%82%a7%e3%82%af%e3%83%88%e3%81%ae%e3%82%bb%e3%83%83%e3%83%88%e3%82%a2%e3%83%83%e3%83%97%e6%96%b9%e6%b3%95\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.silicloud.com\/ja\/blog\/vite%e3%82%92%e4%bd%bf%e3%81%a3%e3%81%9freact%e3%83%97%e3%83%ad%e3%82%b8%e3%82%a7%e3%82%af%e3%83%88%e3%81%ae%e3%82%bb%e3%83%83%e3%83%88%e3%82%a2%e3%83%83%e3%83%97%e6%96%b9%e6%b3%95\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"\u9996\u9875\",\"item\":\"https:\/\/www.silicloud.com\/ja\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Vite\u3092\u4f7f\u3063\u305fReact\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u306e\u30bb\u30c3\u30c8\u30a2\u30c3\u30d7\u65b9\u6cd5\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.silicloud.com\/ja\/blog\/#website\",\"url\":\"https:\/\/www.silicloud.com\/ja\/blog\/\",\"name\":\"Blog - Silicon Cloud\",\"description\":\"\",\"inLanguage\":\"ja\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.silicloud.com\/ja\/blog\/#\/schema\/person\/4aef6196128551a0f5d66db46c42866c\",\"name\":\"\u967d, \u5411\u5b87\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"ja\",\"@id\":\"https:\/\/www.silicloud.com\/ja\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/ad96b120e219751fa368cbd7d2c48ca01b59185e6ed394449bac72614a760bf3?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/ad96b120e219751fa368cbd7d2c48ca01b59185e6ed394449bac72614a760bf3?s=96&d=mm&r=g\",\"caption\":\"\u967d, \u5411\u5b87\"},\"url\":\"https:\/\/www.silicloud.com\/ja\/blog\/author\/hinatasora\/\"},{\"@type\":\"ImageObject\",\"inLanguage\":\"ja\",\"@id\":\"https:\/\/www.silicloud.com\/ja\/blog\/vite%e3%82%92%e4%bd%bf%e3%81%a3%e3%81%9freact%e3%83%97%e3%83%ad%e3%82%b8%e3%82%a7%e3%82%af%e3%83%88%e3%81%ae%e3%82%bb%e3%83%83%e3%83%88%e3%82%a2%e3%83%83%e3%83%97%e6%96%b9%e6%b3%95\/#local-main-organization-logo\",\"url\":\"\",\"contentUrl\":\"\",\"caption\":\"Blog - Silicon Cloud\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Vite\u3092\u4f7f\u3063\u305fReact\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u306e\u30bb\u30c3\u30c8\u30a2\u30c3\u30d7\u65b9\u6cd5 - Blog - Silicon Cloud","description":"Vite\u3092\u4f7f\u3063\u305fReact\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u306e\u30bb\u30c3\u30c8\u30a2\u30c3\u30d7\u65b9\u6cd5\u3092\u5206\u304b\u308a\u3084\u3059\u304f\u89e3\u8aac\u3002\u5b9f\u8df5\u7684\u306a\u4f8b\u3068\u30b3\u30fc\u30c9\u3001\u6ce8\u610f\u70b9\u3092\u542b\u3081\u3066\u521d\u5fc3\u8005\u306b\u3082\u7406\u89e3\u3067\u304d\u308b\u3088\u3046\u8aac\u660e\u3057\u307e\u3059\u3002","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.silicloud.com\/ja\/blog\/vite\u3092\u4f7f\u3063\u305freact\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u306e\u30bb\u30c3\u30c8\u30a2\u30c3\u30d7\u65b9\u6cd5\/","og_locale":"ja_JP","og_type":"article","og_title":"Vite\u3092\u4f7f\u3063\u305fReact\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u306e\u30bb\u30c3\u30c8\u30a2\u30c3\u30d7\u65b9\u6cd5","og_description":"Vite\u3092\u4f7f\u3063\u305fReact\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u306e\u30bb\u30c3\u30c8\u30a2\u30c3\u30d7\u65b9\u6cd5\u3092\u5206\u304b\u308a\u3084\u3059\u304f\u89e3\u8aac\u3002\u5b9f\u8df5\u7684\u306a\u4f8b\u3068\u30b3\u30fc\u30c9\u3001\u6ce8\u610f\u70b9\u3092\u542b\u3081\u3066\u521d\u5fc3\u8005\u306b\u3082\u7406\u89e3\u3067\u304d\u308b\u3088\u3046\u8aac\u660e\u3057\u307e\u3059\u3002","og_url":"https:\/\/www.silicloud.com\/ja\/blog\/vite\u3092\u4f7f\u3063\u305freact\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u306e\u30bb\u30c3\u30c8\u30a2\u30c3\u30d7\u65b9\u6cd5\/","og_site_name":"Blog - Silicon Cloud","article_published_time":"2023-04-06T05:43:22+00:00","article_modified_time":"2025-07-31T04:41:26+00:00","og_image":[{"url":"https:\/\/cdn.silicloud.com\/blog-img\/blog\/img\/6564489adaa94e2bdf7ae201\/42-0.png"}],"author":"\u967d, \u5411\u5b87","twitter_card":"summary_large_image","twitter_misc":{"\u57f7\u7b46\u8005":"\u967d, \u5411\u5b87","\u63a8\u5b9a\u8aad\u307f\u53d6\u308a\u6642\u9593":"26\u5206"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.silicloud.com\/ja\/blog\/vite%e3%82%92%e4%bd%bf%e3%81%a3%e3%81%9freact%e3%83%97%e3%83%ad%e3%82%b8%e3%82%a7%e3%82%af%e3%83%88%e3%81%ae%e3%82%bb%e3%83%83%e3%83%88%e3%82%a2%e3%83%83%e3%83%97%e6%96%b9%e6%b3%95\/","url":"https:\/\/www.silicloud.com\/ja\/blog\/vite%e3%82%92%e4%bd%bf%e3%81%a3%e3%81%9freact%e3%83%97%e3%83%ad%e3%82%b8%e3%82%a7%e3%82%af%e3%83%88%e3%81%ae%e3%82%bb%e3%83%83%e3%83%88%e3%82%a2%e3%83%83%e3%83%97%e6%96%b9%e6%b3%95\/","name":"Vite\u3092\u4f7f\u3063\u305fReact\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u306e\u30bb\u30c3\u30c8\u30a2\u30c3\u30d7\u65b9\u6cd5 - Blog - Silicon Cloud","isPartOf":{"@id":"https:\/\/www.silicloud.com\/ja\/blog\/#website"},"datePublished":"2023-04-06T05:43:22+00:00","dateModified":"2025-07-31T04:41:26+00:00","author":{"@id":"https:\/\/www.silicloud.com\/ja\/blog\/#\/schema\/person\/4aef6196128551a0f5d66db46c42866c"},"description":"Vite\u3092\u4f7f\u3063\u305fReact\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u306e\u30bb\u30c3\u30c8\u30a2\u30c3\u30d7\u65b9\u6cd5\u3092\u5206\u304b\u308a\u3084\u3059\u304f\u89e3\u8aac\u3002\u5b9f\u8df5\u7684\u306a\u4f8b\u3068\u30b3\u30fc\u30c9\u3001\u6ce8\u610f\u70b9\u3092\u542b\u3081\u3066\u521d\u5fc3\u8005\u306b\u3082\u7406\u89e3\u3067\u304d\u308b\u3088\u3046\u8aac\u660e\u3057\u307e\u3059\u3002","breadcrumb":{"@id":"https:\/\/www.silicloud.com\/ja\/blog\/vite%e3%82%92%e4%bd%bf%e3%81%a3%e3%81%9freact%e3%83%97%e3%83%ad%e3%82%b8%e3%82%a7%e3%82%af%e3%83%88%e3%81%ae%e3%82%bb%e3%83%83%e3%83%88%e3%82%a2%e3%83%83%e3%83%97%e6%96%b9%e6%b3%95\/#breadcrumb"},"inLanguage":"ja","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.silicloud.com\/ja\/blog\/vite%e3%82%92%e4%bd%bf%e3%81%a3%e3%81%9freact%e3%83%97%e3%83%ad%e3%82%b8%e3%82%a7%e3%82%af%e3%83%88%e3%81%ae%e3%82%bb%e3%83%83%e3%83%88%e3%82%a2%e3%83%83%e3%83%97%e6%96%b9%e6%b3%95\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.silicloud.com\/ja\/blog\/vite%e3%82%92%e4%bd%bf%e3%81%a3%e3%81%9freact%e3%83%97%e3%83%ad%e3%82%b8%e3%82%a7%e3%82%af%e3%83%88%e3%81%ae%e3%82%bb%e3%83%83%e3%83%88%e3%82%a2%e3%83%83%e3%83%97%e6%96%b9%e6%b3%95\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"\u9996\u9875","item":"https:\/\/www.silicloud.com\/ja\/blog\/"},{"@type":"ListItem","position":2,"name":"Vite\u3092\u4f7f\u3063\u305fReact\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u306e\u30bb\u30c3\u30c8\u30a2\u30c3\u30d7\u65b9\u6cd5"}]},{"@type":"WebSite","@id":"https:\/\/www.silicloud.com\/ja\/blog\/#website","url":"https:\/\/www.silicloud.com\/ja\/blog\/","name":"Blog - Silicon Cloud","description":"","inLanguage":"ja"},{"@type":"Person","@id":"https:\/\/www.silicloud.com\/ja\/blog\/#\/schema\/person\/4aef6196128551a0f5d66db46c42866c","name":"\u967d, \u5411\u5b87","image":{"@type":"ImageObject","inLanguage":"ja","@id":"https:\/\/www.silicloud.com\/ja\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/ad96b120e219751fa368cbd7d2c48ca01b59185e6ed394449bac72614a760bf3?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/ad96b120e219751fa368cbd7d2c48ca01b59185e6ed394449bac72614a760bf3?s=96&d=mm&r=g","caption":"\u967d, \u5411\u5b87"},"url":"https:\/\/www.silicloud.com\/ja\/blog\/author\/hinatasora\/"},{"@type":"ImageObject","inLanguage":"ja","@id":"https:\/\/www.silicloud.com\/ja\/blog\/vite%e3%82%92%e4%bd%bf%e3%81%a3%e3%81%9freact%e3%83%97%e3%83%ad%e3%82%b8%e3%82%a7%e3%82%af%e3%83%88%e3%81%ae%e3%82%bb%e3%83%83%e3%83%88%e3%82%a2%e3%83%83%e3%83%97%e6%96%b9%e6%b3%95\/#local-main-organization-logo","url":"","contentUrl":"","caption":"Blog - Silicon Cloud"}]}},"_links":{"self":[{"href":"https:\/\/www.silicloud.com\/ja\/blog\/wp-json\/wp\/v2\/posts\/53","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.silicloud.com\/ja\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.silicloud.com\/ja\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.silicloud.com\/ja\/blog\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/www.silicloud.com\/ja\/blog\/wp-json\/wp\/v2\/comments?post=53"}],"version-history":[{"count":1,"href":"https:\/\/www.silicloud.com\/ja\/blog\/wp-json\/wp\/v2\/posts\/53\/revisions"}],"predecessor-version":[{"id":35832,"href":"https:\/\/www.silicloud.com\/ja\/blog\/wp-json\/wp\/v2\/posts\/53\/revisions\/35832"}],"wp:attachment":[{"href":"https:\/\/www.silicloud.com\/ja\/blog\/wp-json\/wp\/v2\/media?parent=53"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.silicloud.com\/ja\/blog\/wp-json\/wp\/v2\/categories?post=53"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.silicloud.com\/ja\/blog\/wp-json\/wp\/v2\/tags?post=53"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}