NgSysV.Sveltekit のインストールとシンプルな全 HTML Web アプリの作成

この投稿シリーズは NgateSystems.com にインデックスされています。とても便利なキーワード検索機能もあります。

最終レビュー日: 2024 年 11 月

1. はじめに

この投稿は、Web アプリ開発者としての現実を初めて味わってもらうことを目的としています。これは単純な動作する Web アプリで終わりますが、これを実行できる状態に到達するまでにネゴシエートする必要があるトリッキーな「インストール」タスクから始める必要があります。

これは迷惑ではありますが、そのままにしておいてください。これらを取得したら、Microsoft の VSCode エディタを使用して小さな HTML を構築できるようになります。最後に、VSCode ターミナル セッションを使用して、Sveltekit ローカル サーバー経由でブラウザでこれを起動します。

これはいいですね?それでは続きをお読みください。

2. インストール

まったくの初心者にとって、このセクションは特にユーザーフレンドリーではないいくつかの手順を使用する必要があるため、難しく感じるかもしれません。しかし、それほど時間はかからず、将来繰り返し使用できる基本的なスキルを身につけることができます。これから行うことは次のとおりです:

1. プロジェクトを作成する
2. VSCode をインストールし、その中でプロジェクトを開きます
3. ターミナルセッションを開きます
4. Node.js と npm をインストールします
5. SvelteKit をインストールします。

2.1 プロジェクトの作成

最初のステップは、Windows ファイル エクスプローラー ツールを使用して新しいプロジェクトを作成することです。これには名前を選択する必要があります。小文字とハイフンを使用し、名前を短くすることをお勧めします。 svelte-dev のようなものは良いアイデアかもしれません。また、Dropbox や OneDrive のバージョン管理されたストレージにフォルダーを置かないようにする必要があります。 Webapp プロジェクトは非常に大きくなる傾向があり、汎用のバージョン管理システムを圧倒する傾向があります。いずれの場合でも、VSCode と Git は必要なすべてのバージョニングを提供します。

2.2 VSCode をインストールし、プロジェクトをその「ワークスペース」に追加する

「Visual Studio Code の概要」の手順に従って、デバイスにソフトウェアをインストールします。デスクトップアイコンを使用して起動し、VSCode の画面上部のメニューバーにある「ファイル」エントリに注目してください。これをクリックして「ワークスペースにフォルダーを追加」を選択し、プロジェクトフォルダーの場所に移動して選択/追加します。

この時点で、VSCode 画面のメニュー バーの下に 3 つの情報列が表示されます。ツールバー、「ワークスペース」コンテンツの詳細を表示する「エクスプローラー」パネル、およびワークスペース ファイルの編集を待機する大きな空白領域です。

プロジェクトが 1 つしかないのに、なぜ VSCode で「ワークスペース」の概念が負担になるのか疑問に思われるかもしれません。これは、時間が経つにつれて、多数のプロジェクトが蓄積され、プロジェクト間でコードを共有したいことが判明するためです。 「ワークスペース」を使用すると、プロジェクトのグループを操作できます。プロジェクトをワークスペースから削除するには、プロジェクトを右クリックして「ワークスペースからフォルダーを削除」を選択します。 VSCode を閉じて再起動すると、以前のワークスペース コンテンツの設定が記憶されており、それが復元されることがわかります。

VSCode を頻繁に使用することになるため、デスクトップ ツールバーに VSCode を「固定」することを検討するとよいでしょう。プロジェクトをワークスペースに追加すると、R クリックして「ワークスペースからフォルダーを削除」コマンドを使用してフォルダーを明示的に削除するまで、VSCode は再起動の間にそのプロジェクトをハングアップすることに注意してください。

2.3 VSCode でターミナル セッションを開く

VSCode メニューで [ターミナル -> 新しいターミナル] を選択し、表示されるリストでプロジェクトのエントリをクリックすると、プロジェクトで新しいターミナル セッションを開くことができます。 「ターミナル」オプションがメニュー バーに表示されていない場合は、「...」オーバースピル領域に表示されます。

VSCode 画面の右側の編集領域の下部に、サブウィンドウとして「ターミナル」が表示されます。高さと幅は、上端と左端をクリックしてドラッグすることでサイズを変更できます。 Ctrl キーのショートカット トリックを再度使用してオンとオフを切り替えることもできることがわかります。現在、プロジェクト フォルダーの完全なアドレスが先頭にある行に「ターミナル セッション」コマンドが入力されるのを待っています。

これまでの IT の経験がすべて Windows (Microsoft) および iOS (Mac) 画面での「クリック アンド ポイント」の使用によるものである場合、この投稿では「ターミナル」セッションの使用に大きく依存する可能性があります。望ましくないショックです。

ここで「ターミナル」という言葉を聞くと、今日私たちが使用している「グラフィカル ユーザー インターフェイス」が登場するずっと前の、コンピューティングの初期の時代に戻ります。その後、開発者はテレタイプや「VDU」視覚表示装置などの「端末」デバイスを使用して、ボタンをクリックするのではなく「コマンド」を入力してオペレーティング システムの命令を発行しました。これらの「コマンド シェル」インターフェイスは、セットアップが簡単で柔軟性が高いため、システム プログラマにとって依然として大きな利点があります。したがって、ターミナル セッションは開発プロセスで引き続き広く使用されます。当然のことながら、「ポイント アンド クリック」インターフェイスを使って育ってきた人は、それを後退したステップとして認識するでしょう。しかし、それらがうまく機能することがすぐにわかり、いずれにせよ、成長する開発スキルの範囲に別の有用な構成要素が追加されることになります。

ターミナル コマンドについては本が 1 冊書けるかもしれませんが、現時点では、いくつかの基本的な事実を知っておくだけで十分です。まず、マウスを使用してターミナル コマンドを編集できないことがわかります。コマンドの途中でエラーを見つけた場合は、「Backspace」キーを使用して後続の内容を削除し、再入力する必要があります。ただし、この不便さは、VSCode で使用されるデフォルトの Powershell ターミナル セッションが使用したコマンドの履歴を保持し、目的のコマンドがポップアップするまで上矢印キーを繰り返し押すことで以前のコマンドを参照できるという事実によって相殺されます。下矢印キーを押すと、プロセスが逆に進みます。

2.4 Node.js と npm のインストール

すでに少し疲れを感じているかもしれませんが、頑張ってください。 SvelteKit の使用を開始できる段階に近づいています。

「問題」は、SvelteKit が「パッケージ」としてインターネット上で配布されていることです。 SvelteKit パッケージのインストールには「パッケージ マネージャー」が必要です。パッケージとは何ですか?パッケージ マネージャーとは何ですか?

「パッケージ」とは、バージョン番号が注意深くスタンプされ、他のパッケージへの依存関係の詳細が伴うコード ファイルのきちんとバンドルされたコレクションです。最新のソフトウェア開発手法では、パッケージの階層を使用して有用なコード コンポーネントを共有します。

「パッケージ マネージャー」は、コード コンテンツを解凍してプロジェクト フォルダーにコピーすることで、パッケージをプロジェクトに「インストール」できるツールです。パッケージ マネージャーは、インストールされている他のパッケージとの互換性をチェックします。

ここで使用するパッケージ マネージャーは、npm (Node Package Manager) と呼ばれます。パッケージ管理は要求が厳しいため、専門家の状況に合わせて代替マネージャーを利用できます。ただし、npm パッケージ マネージャーが標準的な選択肢であり、ここで推奨されます。プロジェクトの開発中に、追加のコンポーネントを含める必要があることが判明した場合、npm を繰り返し使用することになります。

少し話を進めますが、npm パッケージ マネージャーとそのランタイム環境がインストールされたら、それを使用して「my-package」パッケージをプロジェクトにインストールできます。これを行うには、VSCode ターミナル セッションで npm create my-package のようなコマンドを起動します。これにより、「my-package」ライブラリ ファイルがプロジェクトのノードモジュール フォルダーにダウンロードされます。

しかし、問題があります。npm には「Node.js ランタイム環境」が必要です。したがって、これもインストールする必要があります。

良いニュースは、少なくとも Windows ユーザーにとって、Node.js は標準の msi (Microsoft インストール) ファイルをダウンロードして開くことによってインストールされるということです。さらに良いことに、このように起動されたインストール手順により、npm もインストールできるようになります。

しかし、初心者にとってこの手順を実行するのは非常に困難です。基本的なダウンロードの構成は、https://nodejs.org/en の「Run JavaScript Everywhere」に文書化されていますが、これは操作手順については非常に簡単です。 「Windows に Node.js と NPM をインストールする方法」で詳細な手順を確認すると役立つ場合があります。これには時間をかけてください。問題が発生した場合は、Node.js をアンインストールしてやり直すだけです。私があなたに与えることができる最善のアドバイスは、この手順で提供される標準のデフォルト設定を使用することです。上書きは厳密に専門家向けです。

2.5 SvelteKitのインストール

ついに、あなたはある程度の進歩を遂げられる立場にあります!このステージを完了すると、ブラウザで実行される簡単なデモ SvelteKit ページが表示されます。

1. 前と同様に、VSCode でプロジェクトのターミナル セッションを開き、次の npx コマンドを実行します。

npx sv create 

*余談ですが、npx は npm に組み込まれた「パッケージ ランナー」ツールです。npm とともに自動的にインストールされます

2024 年 11 月の時点では、これにより SvelteKit ダイアログが起動し、Svelte 5 でプロジェクトを構成する手順が示されます。

余談ですが、この手順で問題が発生し、やり直したい場合は、プロジェクト フォルダーの内容全体を削除して、もう一度試してください。また、npm インストールでは、プロジェクトに組み込まれているファイルに互換性がない可能性があるかどうかをチェックする際に、警告メッセージの憂慮すべきリストが表示されることが多いことにも注意してください。これらが初心者のあなたに関係する可能性はほとんどないので、無視することをお勧めします。

Svelte の最初の質問は、「プロジェクトをどこで作成すればよいですか?」です。ターミナル セッションはプロジェクト フォルダーですでに開いているため、ここでリターン キーを押すだけです。

今、Svelte はどのようなスタイルのプロジェクトを作成すべきかを知りたいと考えています。ここでは「最小限」を選択していただきたいと思います。ターミナル セッションでこれを行う手順は、Web ページで行うようにマウスを使用してチェックボックスを切り替えることができないため、少し面倒です。ここで、下矢印キーを使用して「最小」ラインに位置し、Return キーを押して好みを指定します

Svelte は、TypeScript チェック機能を使用したいかどうかを知りたいと考えています。この高度な Javascript 拡張機能は、複雑な運用グレードの Web アプリに取り組んでいる場合に非常に重要になります (JavaScript での変数型の使用を管理し、一貫性を確保します)。しかし、ここではこれは必要ありませんし、学習曲線はすでに指数関数的になっています。そのため、下矢印を 2 回押してから Return キーを押して「いいえ」を選択することをお勧めします。

それでは、Svelte さんは「追加のオプション」を含めたいかどうか迷っています。表示されたリストの上部にある ESLint 構文チェック ツールが役立つ場合があります。これは、特に関心のない問題について警告する「うるさい」迷惑になる場合があります。しかし、最終的には、ここではスペース バーとリターン キーを押して受け入れることをお勧めします。

最後に、Svelte はどのパッケージ マネージャーを使用するかを尋ねます。 npm

を選択します

表示される他のオプションは無視しても問題ありません。

Svelte はプロジェクトを構築する準備が整いました。要求されたら、ターミナル セッションに次のコマンドを入力してゴーサインを与えます。

npx sv create 

今画面上に表示されている奇妙な表示は、npm がパッケージ ファイルをプロジェクトにダウンロードしているところを初めて見たものかもしれません。ワークスペース ウィンドウの svelte-dev フォルダーが突然開花し、サブフォルダーのコンテンツが印象的に表示されていることに注目すると有益だと思われるかもしれません。これは、「最小限の」SvelteKit プロジェクトを表すコードです。

パッケージ ソフトウェアがプロジェクトに組み込まれるとは限りません。他のプロジェクトと共有すると便利なツールをインストールする場合、そのツールを「グローバル」にインストールするようにリクエストできます。これを行うには、npm コマンドに「-g」「フラグ フィールド」を追加します。ターミナル コマンドで広く使用されているフラグ フィールドが表示されます。ただし、今のところは、インストーラー ソフトウェアの使用方法についてのガイダンスを提供するままにしておいてください。いつかこのチュートリアルを教えてくれるように chatGPT に依頼してください。

Svelte インストーラーは、npm run dev -- --open を実行するように要求します。試してみてください:

npm install

これにより、SvelteKit ローカル サーバーが起動し、その中でプロジェクトが実行されます。ローカル サーバーには、ブラウザのポート 5173 に「localhost」ページを作成する役割があります。この文が意味を理解できない場合でも、npm コマンドの "-- --open" ビットが自動的にブラウザに制御を渡し、デモを表示するので、それが何を意味するのかを確認してください。画面は次の図のようになります:

これは、Post 1.1 で見たものとまったく同じ種類の HTML でコーディングされた Web アプリです。違いは、そのコンテンツが SVelteKit フレームワークによって監視されていることです。コードは現在、新しい VSCode svelte-dev プロジェクトにあります。ブラウザ画面上で「Welcome to SvelteKit」バナーを表示するビットを見つけて変更し、何が起こるかを見てみましょう。

VSCode に戻り、「ワークスペース」にプロジェクトが表示されている状態で、フォルダー/ファイル階層を使用して、Windows エクスプローラーで行うのとまったく同じようにコンテンツをナビゲートします。このプロジェクトには、非常に印象的なコードのコレクションが含まれていることがわかります。たとえば、現在、小さなファイルが詰め込まれた node_modules フォルダーが存在します。ここは、npm インストール作業中にダウンロードされたすべてのファイルが保存される場所です。次に、src/routes フォルダーにある page.svelte ファイルを見つけてクリックします。 (その名前と src フォルダー内の場所の重要性については、今後の投稿で明確にします。今のところは、「page.svelte」という名前がかなり重要であるとだけ言っておきましょう)。画面右側の VSCode 編集ウィンドウに src/routes/page.svelte の内容が表示されます。 <h1>SvelteKit へようこそ</h1>ここの行は見覚えがあるはずです。はい、これは見出しを表示する HTML 部分です。次に、行を <h1>Hello there</h1> に変更します。ファイルを保存し (通常の Ctrl S ショートカットを使用)、ブラウザをもう一度見てください。なんと、「SvelteKit へようこそ」メッセージが「こんにちは」メッセージに置き換えられました。

npm run dev で起動した SvelteKit サーバーはプロジェクト フォルダーを監視しているため、ファイルを変更するたびに、サーバーはその変更をブラウザー内のアクティブなアプリケーションに自動的に送信します。

これで開発がとても楽しくなりそうです!

3. まとめ

この投稿を生き残った場合は、自分に金の星を与えてください。 SvelteKit Web アプリを開発モードで実行することができました。また、同じくらい重要なことに、将来のすべての SvelteKit プロジェクトを順調にスタートさせるための VSCode、npm、Node.js の「足場」を作成しました。

このシリーズの次の投稿では、JavaScript と Svelte "言語" を使用して Web アプリにインテリジェンスを追加する方法を説明します。

追記1：うまくいかないとき

このような問題に巻き込まれるのは難しいことではありません。最も経験豊富な開発者でも、HTML タグの名前をタイプミスして、画面に恐ろしいエラー メッセージが大量に表示されることがあります。違いは、彼らはこれまでにすべてを経験しており、パニックにならないことを知っているということです。初心者の場合、このようなものを見ると、コンピューターが完全に壊れてしまったため、新しいコンピューターを購入する必要があると考えるでしょう。落ち着け。これを並べ替えることができます。

エラーはさまざまな方法で通知されます。 VSCode で開かれた .js (JavaScript) ファイルの構文エラーは、編集ウィンドウでフラグが立てられます。以下の例では、終了 > を削除することで、「最小限の」プロジェクトのヘッダー メッセージの HTML コードを意図的に無効にしています。最初の

のタグ。

次の点に注意してください:

• エラーのあるファイルとその親フォルダーはすべて、フォルダー階層内で赤色で強調表示されます。これは、コードが壊れており、実行するとエラー メッセージがスローされることを意味します。これを試してみてください。Web アプリの localhost ページを更新すると、「500 Internal Error」が表示されることがわかります。 VSCode ターミナル ウィンドウに戻ると、エラー ファイルを保存したときに SvelteKit サーバーによって大量のエラー詳細も生成されています。
• 編集ウィンドウでは「エラー」の位置に下線が引かれています。これにマウスを置くと、エラーの詳細を示すツールチップが表示されます
• svelte-dev プロジェクト内のエラーと警告の合計数の「カウント」が、VSCode ページの下部にある青い「ステータス」バーに表示されます。

これは、冷静さを保つ必要がある理由の完璧な例です。このすべての騒乱の背後には、全く些細な間違いが横たわっています

そもそも、これがすべてつじつまが合わないことがわかるでしょう。システムは、結論の </h1> を誤って強調表示します。タグをエラーの原因として使用します。本当の問題は、壊れた開口部

にあります。タグ。これを何度か見れば、「ああ、タグのパターンが何か間違っている」と自動的に思うでしょう。ゆるくぶらぶらすることを学びましょう。少なくともシステムは正しい行を識別しました。

私の一般的な習慣は、コードで問題が発生した場合、エディターで強調表示された問題を修正することから始めることです。ただし、VSCode が完全に動作しているにもかかわらず、ブラウザにエラーが表示される場合が必ずあります。このとき、ターミナル セッションに表示されるエラー メッセージを確認する必要があります。これらのエラーはより深刻になるため、私からのアドバイスは、深呼吸してメッセージをよく読み、メッセージが何を伝えようとしているのかをよく考えてみることです。それでも問題が解決しない場合は、エラー メッセージを chatGPT に貼り付けてアドバイスを求めてください。 Stackoverflow を引用した Google 検索も優れたリソースです。

まだ行き詰まっている場合は、休憩し、散歩に行き、新鮮な空気を吸ってください。それは大きな違いを生む可能性があります。コンピューティングの素晴らしい点は、問題が発生した場合には必ず理由があることです。さらに良いことに、その理由を見つけて修正すると、 修正されたままのままになります。自分は幸運だと考えてください。あなたは人々が関わる問題を解決しようとしているかもしれませんが、その場合はまったく逆のことが当てはまります。 勇気、勇敢です。コーディングの問題は必ず見つかり、修正されます。

追記 2: VSCode の操作

VSCode がエクスプローラー パネルも表示している場合、VSCode 編集パネルは少し制限されているように感じることがあります。ツールバー列の左上にあるエクスプローラー アイコンをクリックすると、エクスプローラー パネルのオンとオフを切り替えることができます。

同様に、編集パネルがターミナル セッションによってオーバーレイされている場合、「ctrl ' "」ショートカットを使用してこれをすぐにオフに切り替えることができることを覚えておいてください。

最後に、複数のターミナル ウィンドウを同時にアクティブにできることを知っておくと役立つでしょう。この場合、ターミナル ウィンドウのメニュー バーにアクティブなターミナルのリストが表示され、リストのエントリをクリックすることでターミナル間を切り替えることができます。ここの「ゴミ箱」アイコンを使用すると、ウィンドウを強制終了することもできますが、これはターミナル ウィンドウを十分に大きくした場合にのみ表示される可能性があります。VSCode ではスペースは常に貴重です。

以上がNgSysV.Sveltekit のインストールとシンプルな全 HTML Web アプリの作成の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。