この記事では、ローカル開発環境、ビルドと展開のプロセス、サーバー側のストレージについて、さまざまな段階での Web ページのソース コードの保存場所について詳しく説明します。この記事では、ローカル開発者のフォルダー構成構造から、ビルド ツールの構成と出力ディレクトリ、サーバー上の展開場所とバージョン管理に至るまで、Web ページのソース コードの完全なライフ サイクルを体系的に整理しています。さらに、この記事では、ユーザーがブラウザー開発者ツールを使用して Web ページのソース コードを表示する方法についても紹介し、読者が Web ページのソース コードの管理とアクセスをよりよく理解できるように、一般的なソース コード フォルダーの命名例をいくつか示します。
通常、Web ページのソース コード ファイルは特定のフォルダーに保存されません。 Web サイトにアクセスすると、ブラウザーは Web サイトのサーバーにリクエストを送信し、サーバーはそのリクエストに応答して、Web ページの HTML、CSS、および JavaScript ファイルをブラウザーに送信します。これらのファイルはブラウザのメモリに直接ロードされ、ブラウザの開発者ツールを通じて表示できます。ローカル開発環境では、Web ページのソース コードは通常、開発者が設定したフォルダーに保存されます。これらのフォルダーの名前と構造はプロジェクトや開発者の設定によって異なりますが、src などのファイルがよく見られます。 , パブリックなどの通称。
1. ローカル Web サイト開発環境でのソース コードの保管
Web 開発者がローカル環境で作業する場合、Web ページのソース コード ファイルを整理するための特定のフォルダー構造があります。これらのファイルには通常、HTML、CSS、JavaScript ファイルが含まれ、場合によっては PHP スクリプトや Python スクリプトなどのサーバー側コード ファイルも含まれます。
HTMLファイル
HTML ファイルは、Web ページの構造とコンテンツを定義します。ローカル開発環境では、HTML ファイルは通常、プロジェクトのルート ディレクトリ、または /public、/views などの名前のフォルダーにあります。これらのファイルには .html 拡張子が付いています。
CSS および JavaScript ファイル
CSS ファイルはスタイルとページ レイアウトを担当し、JavaScript ファイルはページの動作と対話を制御します。これらのリソース ファイルは、多くの場合、/css、/styles、/js、/scripts、およびリソース タイプにちなんで名付けられたその他のフォルダーに保存されます。 CSS ファイルは .css で終わり、JavaScript ファイルは通常 .js で終わります。
2. Webサイトの構築および展開中のソースコードの保管
Web サイトはサーバーに展開される前に、通常、ビルド (またはコンパイル) プロセスを経ます。このプロセスには、Web サイトの読み込み速度とパフォーマンスを向上させるためのコード圧縮やファイルの結合などの最適化手順が含まれます。
ビルドツールの構成
最近の Web サイト開発では、Webpack、Gulp、Grunt などのビルド ツールを使用して開発プロセスを自動化することがよくあります。これらのツールは、webpack.config.js、gulpfile.js、または同様の構成ファイルに基づいて動作します。
ビルド出力フォルダー
ビルド プロセス中に生成される最適化されたファイルは、通常、/dist (配布)、/build、/out などの名前のフォルダーに配置されます。このフォルダーのファイルは、オンライン環境で使用するためにサーバーにアップロードされます。
3. サーバー上のソースコードの保管
サーバーにアップロードされるコードの場所は、サーバーの構成と展開戦略によって異なります。通常、Web サイトのファイルは、サーバーの特定のディレクトリ (/www、/public_html、サーバー ルート ディレクトリ内のその他のフォルダーなど) に配置されます。
サーバーソフトウェアの構成
Apache の .htaccess や Nginx の nginx.conf などのサーバー ソフトウェア構成ファイルは、ソース コード ファイルの保存場所と、サーバーがこれらのファイルを処理する方法についての指示を定義します。
バージョン管理システム
Git などのバージョン管理システムを使用して、サーバー上でコードをデプロイおよび更新するのが一般的です。この場合、ソースコードはGitで管理されるフォルダーに保存されます。
4. 開発者ツールを使用して Web ページのソース コードを表示します。
サーバー上のソース コード ファイルに直接アクセスできない場合でも、ユーザーはさまざまな方法で Web ページのソース コードを表示できます。
ブラウザ開発者ツール
最新のブラウザには、HTML、CSS、JavaScript などの Web ページのソース コードを表示およびデバッグできる開発者ツールが用意されています。ユーザーは、ブラウザで F12 を押すか、Web ページを右クリックして [検査] を選択することで、これらのツールにアクセスできます。
ページのソースコードを表示する
開発者ツールに加えて、ブラウザには通常、ページのソース コードを表示する機能が用意されています。Web ページを右クリックして [ページのソース コードの表示] を選択すると、HTML ソース コードを表示できます。
概要: Web ページのソース コード ファイルは、開発、構築、展開のさまざまな段階に応じて、さまざまなフォルダーに配置できます。ローカル開発環境では、これらのファイルは開発者の組織構造に従って配布され、ビルド プロセス中に最適化されて特定の出力ディレクトリに配置され、サーバーに展開されると、通常は Web サイトのディレクトリに配置されます。サーバー構成。展開された Web ページのソース コードを表示するには、ユーザーはブラウザーが提供するツールを使用してこれを行うことができます。
1. Web サイトのファイル構造では、Web ページのソース コードは通常、プロジェクトのルート ディレクトリにある「src」または「source」という名前のフォルダーに保存されます。
このフォルダーは、HTML、CSS、JavaScript ファイルなど、Web 開発に必要な元のコード ファイルを保存するために使用されます。このフォルダーには、Web ページの機能や種類に応じてサブフォルダーを作成できます。たとえば、「styles」は CSS スタイル ファイルを格納するために使用され、「scripts」は JavaScript スクリプト ファイルを格納するために使用されます。
2. Web ページのソース コードは、「public」または「www」という名前のフォルダーに保存することもできます。
これは、多くの Web 開発フレームワークやツールは、Web サイトを構築するときに、Web サイトの静的リソース ファイル (ソース コード ファイルを含む) を保存するための「パブリック」フォルダーを自動的に生成するためです。このフォルダーにソース コードを保存すると、ブラウザーから Web ページに簡単にアクセスしてプレビューできるようになります。さらに、Web ホスティング プロバイダーは通常、Web サイトが適切に機能するために、Web ページのソース コード ファイルを「www」フォルダーに配置することを要求します。
3. Web ページのソース コード ファイルは、個人または組織の好みに応じて、他のカスタマイズされたフォルダーに保存できます。
たとえば、開発者の中には、コードをより適切に整理および管理するために、HTML ファイル、CSS ファイル、および JavaScript ファイルを別のフォルダーに保存することを好む人もいます。この場合、ソースコードファイルはそれぞれ「html」、「css」、「js」という名前のフォルダーに配置できます。
Web ページのソース コード ファイルをどのフォルダーに保存する場合でも、ファイル構造が明確かつ整理されており、業界のベスト プラクティスに従っていることを確認してください。これにより、開発効率が向上し、その後のメンテナンスや拡張が容易になります。
全体として、Web ページのソース コードがどこに保存されているかを理解することは、開発者とユーザーの両方にとって重要です。開発者は、開発とメンテナンスを容易にするためにコード構造を合理的に整理する必要があります。ユーザーはブラウザ ツールを使用して Web ページのソース コードを簡単に表示して、Web ページがどのように機能するかをよりよく理解できます。この記事が、読者が Web ページのソース コードの管理とアクセスについて理解を深めるのに役立つことを願っています。