Canape Imageウエルカムウエルカムページ 戻る

Node.jsとVite Project

Node.jsをインストール

% node -v  　　　　インストール確認

% cd documents 　　% mkdir vite 　% cd vite      

% npm create vite@latest(Vite入れる)

npm create vite@latest というコマンドで、Viteを用いる

　　　　　

実行すると以下のようなコード出てくるので選択する。

✔ Project name: … vite
✔ Select a framework: › React　 Preact選べる
✔ Select a variant: › JavaScript
Done. Now run:
cd vite
npm install
npm run dev


#プロジェクトの場所は :  

vite % pwd  
            
#起動　vscode の プラトホームのターミナル で       
    
npm run dev

ViteでReacts参考web

public フォルダ内に index.html を配置する場合:
これは、 一般的です通常、静的な HTML ページとして使用されます。
React コンポーネントは、この HTML ページの特定の要素内にマウントされます。


html code

<body>
<div id="app"></div>
<script type="module" src="/src/main.js"></script>
</body>
</html>
　　　

Viteは通常、JavaScriptやJSX、CSS、画像、その他のリソースなど、さまざまな種類のファイルを含むソースコードを srcディレクトリに置くように推奨します。一般的に、JavaScriptファイル（.jsや.jsx）は主なコンポーネントやロジックを含むため、このディレクトリに配置されます。しかし、Viteでは他の種類のファイルも一緒に扱うことができます。 CSSファイルはJavaScriptモジュールとしてインポートされ、画像やフォントなどの静的ファイルも同様に扱われます。これらのリソースはJavaScriptやCSSから参照されることが多いため、ソースコードと同じ場所に配置されます。 ただし、公開用のHTMLファイルは通常、publicディレクトリ に配置されます。このHTMLファイルはビルド時にソースコードと組み合わせられ、最終的な公開物として生成されることが一般的です。

　　　　　　　　　　

html code

<div id="app">  </div>
<script type="module">
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(  <App />, document.getElementById('app'));
</script>
        　　　　　　　　　　

src フォルダ内の他の React コンポーネントや JavaScript ファイルをインポートし、index.html に統合することができます。 Vite のビルドプロセスを使用してプロジェクトをビルドし、ブラウザで表示します。 

 npm run build
このコマンドを実行すると、Vite はプロジェクトをビルドし、本番用の最適化されたコードを生成します。デフォルトでは、ビルドしたファイルは dist フォルダ内に保存されます。 ビルド結果の確認: ビルドが正常に完了したら、ビルド結果を確認しましょう。dist フォルダ内に生成されたファイルが本番用のアプリケーションです。 
   
<script type="module">
import { h, render } from 'preact';

// import { h, render } from '.vite/node_modules/preact/dist/preact.module.js';
import { Canape } from './canape.jsx';

render(, document.getElementById('root'));
</script>

このコードは、Preactというライブラリを使用して単純なWebページを作成するためのものです。以下はコードの要点と説明です

<script type="module">:
この要素は、ES6モジュールを使用することを示します。ES6モジュールは、JavaScriptコードをモジュールとして読み込むための方法です。
import { h, render } from 'preact';:
Preactライブラリから、h（仮想DOM要素を作成するための関数）とrender（仮想DOMを実際のDOMにレンダリングするための関数）をインポートしています。
import { Canape } from './canape.jsx';:
プロジェクト内の canape.jsx ファイルから Canape コンポーネントをインポートしています。
render( <Canape />, document.getElementById('root'));:
Canape コンポーネントを <div id="root"></div> 要素にレンダリングしています。
render 関数を使用して、仮想DOMを実際のDOMに描画します。
このコードは、Preactを使用して定義されたコンポーネントをブラウザで表示するための非常に基本的な例です。Canape コンポーネントはページ内のどこかに描画され、 <div id="root"> </div> 要素内に表示されることになります。この方法を使用することで、Preactを始めるための基本的な構造を理解できます。

Viteでビルドする

開発中のJavaScriptやCSSなどのファイルを、本番環境で使用できるように最適化するプロセスです。開発中は、ファイルを編集しやすく、開発者向けの便利な機能を利用できますが、これらのファイルは最適化されておらず、読み込みが速いとは限りません。このプロセスでは、不要な空白やコメントを取り除き、JavaScriptやCSSを圧縮し、効率的に読み込めるようにします。また、JavaScriptのバージョンを変更し、古いブラウザでも動作するようにします。

ビルドは開発者向けの便利な機能を削減し、本番環境でのパフォーマンスを最適化する作業です。その結果、ユーザーがウェブサイトやアプリケーションをより高速かつ効率的に利用できるようになります。

distディレクトリは、Viteがプロジェクトをビルドする際に生成されます。通常、開発中には存在せず、npm run build npm run buildなどのビルドコマンドを実行すると、Viteがプロジェクトをビルドし、最適化されたファイルをdistディレクトリに出力します。これにより、本番用に最適化されたアセットが準備されます。
Viteがビルドされる際に、デフォルトでdistディレクトリに出力されるファイルをカスタマイズすることができます。以下はvite.config.jsでビルドの出力先をdistディレクトリに変更する例です。 
     vite.config.js : code

                        import { defineConfig } from 'vite';
                        import react from '@vitejs/plugin-react';

                        export default defineConfig({
                        plugins: [react()],
                        build: {
                            outDir: 'dist', // ビルドの出力先を指定
                            rollupOptions: {
                            input: {
                                main: './src/main.jsx',
                            },
                            },
                        },
                        });
この設定を使用すると、Viteはビルドされたファイルをデフォルトのdistディレクトリに出力します。 その後、Verselなどのホスティングサービスにデプロイする際に、distディレクトリ内のファイルをサービスが提供するルートディレクトリに配置することで、リンクが正しく機能するはずです
Sure, here's a step-by-step guide.
  1. 設定ファイルの作成: プロジェクトルートに vite.config.js を作成し、先ほどの内容を記述します。
  2. ビルドの実行: コマンドラインで npm run build を実行します。これにより、Viteは設定に基づいてビルドを開始し、出力されたファイルはdistディレクトリに保存されます。
  3. ファイルの移動: 生成されたdistディレクトリ内のファイルを、Verselや他のホスティングサービスが提供するルートディレクトリに配置します。
  4. デプロイメント: ファイルが配置されたディレクトリを、Verselや選択したホスティングサービスにデプロイします。
これで、Verselや他のホスティングサービスでデプロイされたアプリケーションを表示することができるはずです。 Verselなどのプラットフォームは、ルートディレクトリに配置されたindex.htmlを自動的に認識し、それをエントリーポイントとして扱います。 　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　
Viteでは、vite.config.jsファイルを使用してプロジェクトのビルド設定を行います。上記のvite.config.jsコードは、ViteでReactを使用するための基本的な設定を示しています。 この設定では、@vitejs/plugin-reactプラグインを使用してReactを有効にし、buildオプションを設定してビルドの出力先を指定しています。また、rollupOptions内のinputプロパティを使用して、メインのエントリーファイルを指定しています。 ただし、コードの正しさを確認するためには、実際にプロジェクトで使用する際に他のファイルや設定との整合性を確認する必要があります。また、ViteやReactのバージョンによっては、最新のベストプラクティスや変更があるかもしれません。 　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　
rollupOptionsは、Viteが内部で使用しているRollupビルドツールの設定をカスタマイズするためのオプションです。Rollupは、Viteの下でモジュールをバンドルするために使用されています。 rollupOptionsを使用することで、Rollupの設定を細かく調整することができます。一般的な設定は以下のようなものです。
input: エントリーポイントの指定。プロジェクトのメインファイルやアプリケーションの開始点となるファイルを指定します。
output: 出力の設定。バンドルされたファイルの保存場所や形式、ファイル名の指定ができます。
external: バンドルに含めない外部ライブラリやモジュールの指定。これらはバンドルされずに別途読み込まれるようになります。
plugins: プラグインの設定。ローダーやトランスパイラ、その他のビルドプロセスをカスタマイズするためのプラグインを指定します。 上のコードでは、rollupOptionsの中でinputプロパティが使用されており、mainというエントリーポイントを指定しています。この設定は、Viteがビルドプロセスを開始するファイルを特定するためのものです。
Viteの下でモジュールをバンドルするとは Viteは、モジュールをバンドルするために内部でRollupを使用しています。モジュールバンドルとは、複数のJavaScriptファイルや関連するリソース（画像、CSS、フォントなど）を1つまたは複数のファイルにまとめるプロセスです。 Viteは、開発サーバーを介してモジュールをリアルタイムで処理し、ブラウザが要求した際に必要なモジュールを素早く提供します。これにより、開発時の高速なホットリローディングと効率的なキャッシュを実現できます。 Viteが行うバンドルは、通常のBundler（Webpackなど）とは異なります。Viteは、モジュールのES Moduleの構造を保ちながら、エントリーポイントから必要なモジュールを取得し、ブラウザが理解できるようにバンドルします。これにより、開発中のモジュール間の依存関係を効率的に管理し、必要な場合にのみモジュールをバンドルすることが可能です。

Node.jsとViteプロジェクト作成

基本コマンド

        node -v
        cd ~/Desktop
        mkdir vite
        cd vite
        npm create vite@latest      :新しいReactプロジェクトの作成

        cd <project-name>             :依存関係のインストール
            npm install
                    
        npm run dev
   
  １、      index.html作成
                <!DOCTYPE html>
                <html lang="en">
                <head>
              <meta charset="UTF-8">
              <meta name="viewport" content="width=device-width, initial-scale=1.0">
              <title>My Vite Project </title>
              </head>
              <body>
              <h1>Hello, Vite! </h1>
              <p>This is my custom page. </p>
              </body>
              </html>

main.jsまたはmain.tsの編集 JavaScript/TypeScriptのコードを追加します

        // src/main.js
        import './style.css';

        document.querySelector('#app').innerHTML = `
        <h1>Hello Vite! </h1>
        import React from 'react';
        import ReactDOM from 'react-dom/client';
        import App from './App.jsx';
        import './index.css';
        
        ReactDOM.createRoot(document.getElementById('root')).render(
          <React.StrictMode>
            <App />
          </React.StrictMode>
        );
        a href="https://vitejs.dev/guide/features.html" target="_blank">Documentation </a>
        `;

必要に応じてスタイルを設定します。ここでは、基本的なスタイルの例を示します。


src/index.css 
              body {
                font-family: Arial, sans-serif;
                margin: 0;
                padding: 0;
                background-color: #f0f0f0;
              }
              
              h1 {
                color: #333;
              }
              
              a {
                color: #007bff;
                text-decoration: none;
              }
              
              a:hover {
                text-decoration: underline;
              }
ローカルサーバーの起動 以下のコマンドを実行して、開発サーバーを起動します。 
         npm run dev

src/App.jsx コード にheader やnav を追加

更新された src/App.jsx 以下のように各セクションのコンテンツを追加します。リンクをクリックすると対応するセクションにスクロールするようにします。 
          import React from 'react';

          const App = () => {
            return (
              <div>
                <header>
                  <h1>My Website</h1>
                  <nav>
                    <ul>
                      <li><a href="#home">Home</a></li>
                      <li><a href="#about">About</a></li>
                      <li><a href="#services">Services</a></li>
                      <li><a href="#contact">Contact</a></li>
                    </ul>
                  </nav>
                </header>
                <main>
                  <section id="home">
                    <h2>Home</h2>
                    <p>Welcome to the homepage!</p>
                  </section>
                  <section id="about">
                    <h2>About</h2>
                    <p>This is the about section.</p>
                  </section>
                  <section id="services">
                    <h2>Services</h2>
                    <p>Here are the services we offer.</p>
                  </section>
                  <section id="contact">
                    <h2>Contact</h2>
                    <p>Get in touch with us!</p>
                  </section>
                  <h1>Hello Vite!</h1>
                  <a href="https://vitejs.dev/guide/features.html" target="_blank">Documentation</a>
                </main>
              </div>
            );
          };

          export default App;

スタイルの追加（オプション）


src/index.cssに各セクションのスタイルを追加します 
            body {
              font-family: Arial, sans-serif;
              margin: 0;
              padding: 0;
              background-color: #f0f0f0;      //	背景色を薄いグレー　白
            }
            
            header {
              background-color: #282c34;        //重い青
              padding: 20px;
              color: white;
            }
            
            header h1 {
              margin: 0;
              display: inline-block;
            }
            
            nav ul {
              list-style-type: none;
              padding: 0;
            }
            
            nav ul li {
              display: inline;
              margin-right: 20px;
            }
            
            nav ul li a {
              color: white;
              text-decoration: none;
            }
            
            nav ul li a:hover {
              text-decoration: underline;
            }
            
            main {
              padding: 20px;
            }
            
            section {
              padding: 20px 0;
            }
            
            section:nth-child(odd) {
              background-color: #fff;
            }
            
            section:nth-child(even) {
              background-color: #f9f9f9;
            }
            
            a {
              color: #007bff;
              text-decoration: none;
            }
            
            a:hover {
              text-decoration: underline;
            }

header内にリンクを追加し、それらのリンク先のファイルを作成する方法

1. header内にリンクを追加 まず、header内にリンクを追加します。リンクはReact RouterのLinkコンポーネントを使用します。
更新されたsrc/App.jsx 
                   import React from 'react';
                   import { BrowserRouter as Router, Route, Routes, Link } from 'react-router-dom';
                   import Home from './pages/Home';
                   import About from './pages/About';
                   import Services from './pages/Services';
                   import Contact from './pages/Contact';
                   
                   const App = () => {
                     return (
                       <Router>
                         <div>
                           <header>
                             <h1>My Website</h1>
                             <nav>
                               <ul>
                                 <li><Link to="/">Home</Link></li>
                                 <li><Link to="/about">About</Link></li>
                                 <li><Link to="/services">Services</Link></li>
                                 <li><Link to="/contact">Contact</Link></li>
                               </ul>
                             </nav>
                           </header>
                           <main>
                             <Routes>
                               <Route path="/" element={<Home />} />
                               <Route path="/about" element={<About />} />
                               <Route path="/services" element={<Services />} />
                               <Route path="/contact" element={<Contact />} />
                             </Routes>
                           </main>
                         </div>
                       </Router>
                     );
                   };
                   
                   export default App;
2, 各リンク先のコンポーネントを作成 次に、各リンク先のコンポーネントを作成します。
src/pages/Home.jsx 
              import React from 'react';

              const Home = () => {
                return (
                <section>
                  <h2>Home
                  <p>Welcome to the homepage!

                </section>
                );
              };
              
              export default Home;
src/pages/About.jsx 
            import React from 'react';

          const About = () => {
            return (
            <section>
              <h2>About</h2>
              <p>This is the about section.</p>
            </section>
            );
          };

          export default About;
src/pages/Services.jsx 
            import React from 'react';

          const Services = () => {
            return (
              <section>
                <h2>Services</h2>
                <p>Here are the services we offer.</p>
              </section>
            );
          };

          export default Services;
src/pages/Contact.jsx 
            import React from 'react';

          const Contact = () => {
            return (
              <section>
                <h2>Contact</h2>
                <p>Get in touch with us!</p>
              </section>
            );
          };

          export default Contact;
3. React Routerをインストールしてルーティングを設定 React Routerをインストールして、ルーティングを設定します。 React Routerのインストール 
              npm install react-router-dom

画像ファイルをReactアプリケーションのHome画面に反映

osiro.JPGファイルをプロジェクトのsrcディレクトリ内に追加します。例えば、
src/assetsフォルダを作成し、その中に画像ファイルを置くことが一般的です。 
                vite-project/
              ├── src/
              │   ├── assets/
              │   │   └── osiro.JPG
              │   ├── App.jsx
              │   ├── main.jsx
              │   └── pages/
              │       └── Home.jsx
Homeコンポーネントに画像を表示するコードを追加します。
src/pages/Home.jsx 
            import React from 'react';
            import osiroImage from '../assets/osiro.JPG';
            
            const Home = () => {
              return (
                <section>
                  <h2>Home</h2>
                  <p>Welcome to the homepage!</p>
                  <img src={osiroImage} alt="Oshiro" />
                </section>
              );
            };
            
            export default Home;
App.jsxにHomeコンポーネントが正しく設定されているか確認してください。以下はその確認です。
src/App.jsx 
                import React from 'react';
                import { BrowserRouter as Router, Route, Routes, Link } from 'react-router-dom';
                import Home from './pages/Home';
                import About from './pages/About';
                import Services from './pages/Services';
                import Contact from './pages/Contact';
                
                const App = () => {
                  return (
                    <Router>
                      <div>
                        <header>
                          <h1>My Website</h1>
                          <nav>
                            <ul>
                              <li><Link to="/">Home</Link></li>
                              <li><Link to="/about">About</Link></li>
                              <li><Link to="/services">Services</Link></li>
                              <li><Link to="/contact">Contact</Link></li>
                            </ul>
                          </nav>
                        </header>
                        <main>
                          <Routes>
                            <Route path="/" element={<Home />} />
                            <Route path="/about" element={<About />} />
                            <Route path="/services" element={<Services />} />
                            <Route path="/contact" element={<Contact />} />
                          </Routes>
                        </main>
                      </div>
                    </Router>
                  );
                };
                
                export default App;
開発サーバーを起動してnpm run dev、変更を確認します。
Viteで画像ファイル（.JPG）をインポートする際にエラーが発生する場合
Viteの設定ファイルにアセットインクルードを追加
まず、プロジェクトのルートにある vite.config.js ファイルを開き、以下のようにアセットとしてJPEGファイルを含める設定を追加します。
vite.config.js 
              import { defineConfig } from 'vite';
            import react from '@vitejs/plugin-react';

            export default defineConfig({
              plugins: [react()],
              assetsInclude: ['**/*.JPG']
            });
Reactコンポーネントで画像ファイルをインポートして使用します。
src/pages/Home.jsx 
                import React from 'react';
              import osiroImage from '../assets/osiro.JPG';

              const Home = () => {
                return (
                  <section>
                    <h2>Home</h2>
                    <p>Welcome to the homepage!</p>
                    <img src={osiroImage} alt="Oshiro" />
                  </section>
                );
              };

              export default Home;
Viteの設定ファイルを変更したので、開発サーバーを再起動する
npm run dev
必要があります。
　　　　　　　

このページ編集するには project名/public/start.htmlにあるファイルを開く