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

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

1. はじめに

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

これは迷惑ではありますが、そのままにしておいてください。これらを取得したら、Microsoft の VSCode エディタを使用して小さな HTML を構(gòu)築できるようになります。最後に、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 つの情報列が表示されます。ツールバー、「ワークスペース」コンテンツの詳細を表示する「エクスプローラー」パネル、およびワークスペース ファイルの編集を待機する大きな空白領(lǐng)域です。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

しかし、初心者にとってこの手順を?qū)g行するのは非常に困難です?；镜膜圣昆Ε螗愆`ドの構(gòu)成は、https://nodejs.org/en の「Run JavaScript Everywhere」に文書化されていますが、これは操作手順については非常に簡単です。 「Windows に Node.js と NPM をインストールする方法」で詳細な手順を確認すると役立つ場合があります。これには時間をかけてください。問題が発生した場合は、Node.js をアンインストールしてやり直すだけです。私があなたに與えることができる最善のアドバイスは、この手順で提供される標準のデフォルト設(shè)定を使用することです。上書きは厳密に専門家向けです。

2.5 SvelteKitのインストール

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

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

npx sv create 

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

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

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

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

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

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

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

最後に、Svelte はどのパッケージ マネージャーを使用するかを?qū)い亭蓼埂?npm

を選択します

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

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

npx sv create 

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

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

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

npm install

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

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

VSCode に戻り、「ワークスペース」にプロジェクトが表示されている狀態(tài)で、フォルダー/ファイル階層を使用して、Windows エクスプローラーで行うのとまったく同じようにコンテンツをナビゲートします。このプロジェクトには、非常に印象的なコードのコレクションが含まれていることがわかります。たとえば、現(xiàn)在、小さなファイルが詰め込まれた node_modules フォルダーが存在します。ここは、npm インストール作業(yè)中にダウンロードされたすべてのファイルが保存される場所です。次に、src/routes フォルダーにある page.svelte ファイルを見つけてクリックします。 (その名前と src フォルダー內(nèi)の場所の重要性については、今後の投稿で明確にします。今のところは、「page.svelte」という名前がかなり重要であるとだけ言っておきましょう)。畫面右側(cè)の VSCode 編集ウィンドウに src/routes/page.svelte の內(nèi)容が表示されます。

SvelteKit へようこそ

ここの行は見覚えがあるはずです。はい、これは見出しを表示する HTML 部分です。次に、行を

Hello there

に変更します。ファイルを保存し (通常の Ctrl S ショートカットを使用)、ブラウザをもう一度見てください。なんと、「SvelteKit へようこそ」メッセージが「こんにちは」メッセージに置き換えられました。

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

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

3. まとめ

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

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

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

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

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

のタグ。

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

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

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

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

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

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

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

追記 2: VSCode の操作

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

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

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

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