From fcfd6d78e4134f5c924d7db6f358a376450bea67 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Sat, 21 Dec 2024 08:46:09 +0900 Subject: [PATCH 1/2] =?UTF-8?q?2024/12/20=20=E6=99=82=E7=82=B9=E3=81=AE?= =?UTF-8?q?=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=9F=BA=E3=81=A5=E3=81=8D?= =?UTF-8?q?=E6=9B=B4=E6=96=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../environment_setup/command_line/index.md | 163 +++++++++--------- .../dealing_with_files/index.md | 94 ++++++---- 2 files changed, 149 insertions(+), 108 deletions(-) diff --git a/files/ja/learn_web_development/getting_started/environment_setup/command_line/index.md b/files/ja/learn_web_development/getting_started/environment_setup/command_line/index.md index 16c2a0ac413c50..63a94cab8a4534 100644 --- a/files/ja/learn_web_development/getting_started/environment_setup/command_line/index.md +++ b/files/ja/learn_web_development/getting_started/environment_setup/command_line/index.md @@ -1,12 +1,13 @@ --- title: コマンドライン短期集中講座 slug: Learn_web_development/Getting_started/Environment_setup/Command_line -original_slug: Learn/Tools_and_testing/Understanding_client-side_tools/Command_line l10n: - sourceCommit: 11a08e7da75bfb0b3e606eb26a9a0ad9301a1be5 + sourceCommit: 5b20f5f4265f988f80f513db0e4b35c7e0cd70dc --- -{{LearnSidebar}}{{PreviousMenuNext("Learn/Tools_and_testing/Understanding_client-side_tools/Overview","Learn/Tools_and_testing/Understanding_client-side_tools/Package_management", "Learn/Tools_and_testing/Understanding_client-side_tools")}} +{{LearnSidebar}} + +{{PreviousMenuNext("Learn_web_development/Getting_started/Environment_setup/Dealing_with_files", "Learn_web_development/Getting_started/Your_first_website", "Learn_web_development/Getting_started/Environment_setup")}} 開発プロセスでは、端末 (または「コマンドライン」 — これらは事実上同じことです) でいくつかのコマンドを実行する必要があることは間違いありません。この記事では、端末の概要、端末に入力する必要がある重要なコマンド、コマンドを連結する方法、および独自のコマンドラインインターフェイス (CLI) ツールを追加する方法について説明します。 @@ -15,13 +16,19 @@ l10n: 前提条件: - 主要な HTML、CSS、と JavaScript 言語 + コンピューターのオペレーティングシステム、ウェブサイトを構築する際に使用する基本ソフトウェア、およびファイルシステムに慣れていること。 目的: - 端末／コマンドラインとは何か、学ぶべき基本的なコマンドは何か、新しいコマンドラインツールをインストールする方法を理解します。 + @@ -38,7 +45,7 @@ l10n: コマンドラインに対する最大の批判の 1 つは、ユーザーエクスペリエンスが大幅に不足していることです。 コマンドラインを初めて見るときは、気が遠くなるような体験になる可能性があります。空っぽの画面と点滅するカーソルが表示され、何をすべきかについての明確なヘルプはほとんどありません。 -表面的にはそれらは歓迎とはほど遠いものですが、それらを使用してできることはたくさんあります。少しのガイダンスと練習を行うことで、それらをより簡単に使用できるようになることをお約束します! +表面的にはそれらは歓迎とはほど遠いものですが、それらを使用してできることはたくさんあります。少しのガイダンスと練習を行うことで、それらをより簡単に使用できるようになることをお約束します。 これが私たちがこの章を提供している理由です — この一見不親切な環境であなたが始めるのを助けるために。 ### 端末はどこから来たのか？ @@ -47,63 +54,63 @@ l10n: それ以来、端末は、デスクトップマシンからクラウドに格納されたサーバー、Raspberry PI Zero のようなマイクロコンピューター、さらには携帯電話に至るまで、すべてのオペレーティングシステムの一貫した機能であり続けています。コンピューターの基盤となるファイルシステムと低レベルの機能への直接アクセスを提供するため、複雑なタスクをすばやく実行するのに非常に役立ちます。 -自動化にも役立ちます。たとえば、「ch01-xxxx.png」から「ch02-xxxx.png」など、数百のファイルのタイトルを即座に更新するコマンドを書くことができます。ファインダーまたはエクスプローラー GUI アプリを使用してファイル名を更新すると、長い時間がかかります。 +自動化にも役立ちます。たとえば、 "ch01-xxxx.png" から "ch02-xxxx.png" など、数百のファイルのタイトルを即座に更新するコマンドを書くことができます。ファインダーまたはエクスプローラー GUI アプリを使用してファイル名を更新すると、長い時間がかかります。 とにかく、端末はすぐにはなくなりません。 -### 端末はどのように見えますか？ +### 端末の外見 以下に、端末にアクセスできるさまざまな種類のプログラムをいくつか示します。 -次の画像は、Windows で使用できるコマンドプロンプトを示しています。「cmd」プログラムから「powershell」まで、さまざまなオプションがあり、プログラム名を入力してスタートメニューから実行できます。 +次の画像は、Windows で使用できるコマンドプロンプトを示しています。 "cmd" プログラムから "powershell" まで、さまざまなオプションがあり、プログラム名を入力してスタートメニューから実行できます。 -![A vanilla windows cmd line window, and a windows powershell window](win-terminals.png) +![バニラ Windows のコマンドラインウィンドウ、および Windows PowerShell ウィンドウ](win-terminals.png) そして、その下に macOS 端末アプリケーションが表示されます。 -![A basic vanilla macOS terminal](mac-terminal.png) +![基本的なバニラ macOS 端末](mac-terminal.png) -### 端末へのアクセス方法を教えてください +### 端末へのアクセス -今日、多くの開発者は Unix ベースのツールを使用しています (例: 端末と、そこからアクセスできるツール)。今日ウェブ上に存在する多くのチュートリアルやツールは、Unix ベースのシステムをサポートしています (残念ながらそれを想定しています) が、心配する必要はありません。ほとんどのシステムで利用できます。このセクションでは、選択したシステムの端末にアクセスする方法を見ていきます。 +今日、多くの開発者は Unix ベースのツールを使用しています (例: 端末と、そこからアクセスできるツール)。今日ウェブ上に存在する多くのチュートリアルやツールは、Unix ベースのシステムに対応しています（残念ながらそれを想定しています）が、心配する必要はありません。ほとんどのシステムで利用できます。このセクションでは、選択したシステムの端末にアクセスする方法を見ていきます。 #### Linux/Unix -上で記したように、Linux/Unix システムにはデフォルトで利用可能な端末があり、アプリケーションの中にリストされています。 +上で記したように、Linux/Unix システムには既定で利用可能な端末があり、アプリケーションの中にリストされています。 #### macOS macOS には、グラフィカルユーザーインターフェイスの下に位置する Darwin と呼ばれるシステムがあります。Darwin は Unix に似たシステムであり、端末と低レベルツールへのアクセスを提供します。macOS Darwin はほとんどの場合 Unix と同等であり、この記事を読み進める上で心配する必要はありません。 -端末は、Applications/Utilities/Terminal で macOS で利用できます。 +端末は、 macOS では Applications/Utilities/Terminal で利用できます。 #### Windows 他のプログラミングツールと同様に、Windows で端末 (またはコマンドライン) を使用することは、従来、他のオペレーティングシステムほど単純でも簡単でもありませんでした。しかし、状況は良くなっています。 -Windows には伝統的に cmd (「コマンドプロンプト」) と呼ばれる独自の端末のようなプログラムがありましたが、これは明らかに Unix コマンドと同等ではなく、古いスタイルの Windows DOS プロンプトと同等です。 +Windows には伝統的に `cmd` (「コマンドプロンプト」) と呼ばれる独自の端末のようなプログラムがありましたが、これは Unix コマンドとは著しく異なっており、古いスタイルの Windows DOS プロンプトと同等です。 -Windows で端末エクスペリエンスを提供するための優れたプログラムが存在します。たとえば、Powershell ([インストーラーを見つけるにはこちらをご覧ください](https://github.com/PowerShell/PowerShell)) や Gitbash ([git for Windows](https://gitforwindows.org/) ツールセットの一部として提供されます) +Windows で端末の操作を提供するための優れたプログラムが存在します。たとえば、 PowerShell ([インストーラーを見つけるにはこちらをご覧ください](https://github.com/PowerShell/PowerShell)) や Gitbash （[git for Windows](https://gitforwindows.org/) ツールセットの一部として提供されます）があります。 -ただし、現代の Windows に最適なオプションは、Windows Subsystem for Linux (WSL) です。これは、Linux オペレーティングシステムを Windows 10 内から直接実行するための互換性レイヤーであり、仮想マシンを必要とせずに、Windows 上で直接「真の端末」を実行できます。 +ただし、現代の Windows に最適なオプションは、 Windows Subsystem for Linux (WSL) です。これは、Linux オペレーティングシステムを Windows 10 内から直接実行するための互換性レイヤーであり、仮想マシンを必要とせずに、Windows 上で直接「真の端末」を実行できます。 -これは、無料で Windows ストアから直接インストールできます。必要なすべてのドキュメントは、[Windows Subsystem for Linux Documentation](https://docs.microsoft.com/windows/wsl/) にあります。 +これは、無料で Windows ストアから直接インストールできます。必要なすべてのドキュメントは、 [Windows Subsystem for Linux Documentation](https://learn.microsoft.com/windows/wsl/) にあります。 -![a screenshot of the Windows subsystem for Linux documentation](wsl.png) +![Linux ドキュメント内の Windows サブシステムのスクリーンショット](wsl.png) -Windows で選択するオプションに関しては、WSL をインストールすることを強くお勧めします。デフォルトのコマンドプロンプト (`cmd`) をそのまま使用することもできます。多くのツールは正常に動作しますが、Unix ツールとの同等性が向上すると、すべてがより簡単になります。 +Windows で選択するオプションに関しては、WSL をインストールすることを強くお勧めします。既定のコマンドプロンプト (`cmd`) をそのまま使用することもできます。多くのツールは正常に動作しますが、Unix ツールとの同等性が向上すると、すべてがより簡単になります。 -#### 補足: コマンドラインと端末の違いは何か? +#### 補足: コマンドラインと端末の違い 通常、これら 2 つの用語は同じ意味で使用されます。技術的には、端末はシェルを起動して接続するソフトウェアです。シェルは、セッションおよびセッション環境です (プロンプトやショートカットなどをカスタマイズできます)。コマンドラインは、コマンドを入力してカーソルが点滅するリテラル行です。 -### 端末を使用する必要がありますか？ +### 端末を使用する必要があるか -コマンドラインから利用できるツールは豊富にありますが、[Visual Studio Code](https://code.visualstudio.com/) などのツールを使用している場合は、プロキシとして使用できる拡張機能も多数あります。端末を直接使用せずに端末コマンドを使用します。ただし、やりたいことすべてに対応するコードエディター拡張機能が見つかるわけではありません。最終的には、端末である程度の経験を積む必要があります。 +コマンドラインから利用できるツールは豊富にありますが、 [Visual Studio Code](https://code.visualstudio.com/) などのツールを使用している場合は、プロキシーとして使用できる拡張機能も多数あり、端末を直接使用せずに端末コマンドを使用します。ただし、やりたいことすべてに対応するコードエディター拡張機能が見つかるわけではありません。最終的には、端末である程度の経験を積む必要があります。 ## 基本的な組み込み端末コマンド -説明はもう十分です — いくつかの端末コマンドを見てみましょう! コマンドラインですぐに実行できることのほんの一部を、それぞれの場合に関連するツールの名前とともに以下に示します。 +説明はもう十分です — いくつかの端末コマンドを見てみましょう。コマンドラインですぐに実行できることのほんの一部を、それぞれの場合に関連するツールの名前とともに以下に示します。 - 作成、コピー、名前変更、削除などの基本レベルのタスクとともに、コンピューターのファイルシステムをナビゲートします。 @@ -124,13 +131,13 @@ Windows で選択するオプションに関しては、WSL をインストー これらのツールのいくつかをコマンドラインで使用する方法を見てみましょう。先に進む前に、端末プログラムを開きます。 -### コマンドラインでのナビゲーション +### コマンドラインでの移動 -コマンドラインにアクセスすると、必然的に特定のディレクトリーに移動して「何かをする」必要があります。すべてのオペレーティングシステム (デフォルトのセットアップを想定) は、端末プログラムを「ホーム」ディレクトリーで起動するので、そこから別の場所に移動したくなるでしょう。 +コマンドラインにアクセスすると、必然的に特定のディレクトリーに移動して「何かをする」必要があります。すべてのオペレーティングシステム（既定のセットアップを想定）では、端末プログラムが「ホーム」ディレクトリーで起動するので、そこから別の場所に移動したくなるでしょう。 -`cd` コマンドを使用すると、ディレクトリーを変更できます。技術的には、cd はプログラムではなく組み込みです。これは、オペレーティングシステムがすぐに使用できることを意味し、誤って削除することはできません。コマンドが組み込みかどうかについてあまり心配する必要はありませんが、組み込みはすべての UNIX ベースのシステムに表示されることに注意してください。 +`cd` コマンドを使用すると、ディレクトリーへ移動できます。技術的には、cd はプログラムではなく組み込みコマンドです。これは、オペレーティングシステムがすぐに使用できることを意味し、誤って削除することはできません。コマンドが組み込みかどうかについてあまり心配する必要はありませんが、組み込みはすべての Unix ベースのシステムに表示されることに注意してください。 -ディレクトリーを変更するには、端末に `cd` と入力し、その後に移動先のディレクトリーを入力します。ディレクトリーがホームディレクトリー内にあると仮定すると、`cd Desktop` を使用できます (以下のスクリーンショットを参照)。 +あるディレクトリーへ移動するには、端末に `cd` と入力し、その後に移動先のディレクトリーを入力します。ディレクトリーがホームディレクトリー内にある場合は、`cd Desktop` を使用することができます（以下のスクリーンショットを参照）。 ![cd Desktop コマンドをさまざまな Windows 端末で実行した結果 - 端末の場所がデスクトップに移されます。](win-terminals-cd.png) @@ -172,7 +179,7 @@ cd Desktop/project/src ### ディレクトリーの内容の一覧表示 -別の組み込み Unix コマンドは `ls` (list の略) で、現在のディレクトリーの内容を一覧表示します。デフォルトの Windows コマンドプロンプト (`cmd`) を使用している場合、これは機能しないことに注意してください。) — 同等のものは `dir`です。 +別の組み込み Unix コマンドは `ls` (list の略) で、現在のディレクトリーの内容を一覧表示します。既定の Windows コマンドプロンプト (`cmd`) を使用している場合、これは機能しないことに注意してください。) — 同等のものは `dir`です。 端末でこれを実行してみてください。 @@ -184,7 +191,7 @@ ls ### コマンドオプションの紹介 -ほとんどの端末コマンドにはオプションがあります。これらは、コマンドの最後に追加する修飾子であり、コマンドの動作を少し異なるものにします。これらは通常、コマンド名の後にスペースがあり、その後にダッシュが続き、その後に 1 つ以上の文字が続きます。 +ほとんどの端末コマンドにはオプションがあります。これらは、コマンドの最後に追加する修飾子であり、コマンドの動作を少し異なるものにします。これらは通常、コマンド名の後に空白があり、その後にダッシュが続き、その後に 1 つ以上の文字が続きます。 たとえば、これを試してみて、何が得られるかを確認してください。 @@ -192,14 +199,14 @@ ls ls -l ``` -`ls` の場合、`-l` (_dash ell_) オプションを指定すると、各行に 1 つのファイルまたはディレクトリーが表示され、さらに多くの情報が表示されます。ディレクトリーは、行の一番左側にある文字「d」を探すことで識別できます。これらは、`cd` できるものです。 +`ls` の場合、`-l` (_ダッシュエル_) オプションを指定すると、各行に 1 つのファイルまたはディレクトリーが表示され、さらに多くの情報が表示されます。ディレクトリーは、行の一番左側にある文字「d」を探すことで識別できます。これらは、`cd` できるものです。 以下は、上部に「普通の」macOS 端末が表示されたスクリーンショットと、生き生きと見えるようにいくつかのアイコンと色が追加されたカスタマイズされた端末のスクリーンショットです。どちらも `ls -l` を実行した結果を示しています。 -![A vanilla macOS terminal and a more colorful custom macOS terminal, showing a file listing - the result of running the ls -l command](mac-terminals-ls.png) +![バニラ macOS 端末と、よりカラフルなカスタム macOS 端末で、ファイルリストを表示させています。これは、 ls -l コマンドを実行した結果です。](mac-terminals-ls.png) > [!NOTE] -> 各コマンドで使用できるオプションを正確に確認するには、[man ページ](https://en.wikipedia.org/wiki/Man_page) を参照してください。これを行うには、 `man` コマンドの後に、検索するコマンドの名前を入力します ( `man ls` など)。これにより、端末のデフォルトのテキストファイルビューアー(たとえば、私の端末では [`less`]()) で man ページが開きます。その後、矢印キーまたは同様のメカニズムを使用してページをスクロールできる必要があります。man ページには、すべてのオプションが非常に詳細にリストされています。最初は少し戸惑うかもしれませんが、少なくとも必要な場合はそこにあることを知っています。man ページを読み終えたら、テキストビューアーの quit コマンドを使用して終了する必要があります (`less` の "q"。明らかでない場合は、ウェブで検索して見つける必要がある場合があります)。 +> 各コマンドで使用できるオプションを正確に確認するには、[man ページ](https://ja.wikipedia.org/wiki/Manページ) を参照してください。これを行うには、 `man` コマンドの後に、検索するコマンドの名前を入力します ( `man ls` など)。これにより、端末の既定のテキストファイルビューアー（たとえば、私の端末では [`less`](ja.wikipedia.org/wiki/Less)）で man ページが開きます。その後、矢印キーまたは同様のメカニズムを使用してページをスクロールできる必要があります。man ページには、すべてのオプションが非常に詳細に列挙されています。最初は少し戸惑うかもしれませんが、少なくとも必要な場合はそこにあることを知っています。man ページを読み終えたら、テキストビューアーの quit コマンドを使用して終了する必要があります（`less` では "q"。分からない場合は、ウェブで検索して見つける必要がある場合があります）。 > [!NOTE] > 複数のオプションを指定してコマンドを同時に実行するには、通常、 `ls -lah` や `ls -ltrh` のように、ダッシュ文字の後にすべてのオプションを 1 つの文字列に入れることができます。`ls` の man ページを見て、これらの追加オプションが何をするかを調べてみてください! @@ -212,34 +219,34 @@ ls -l 重要なものを誤って削除しないように、以下のコマンド例をガイダンスとして使用して、どこかに作成したテストディレクトリーでそれらを試してみてください。 -- `mkdir` — これにより、現在のディレクトリー内に新しいディレクトリーが作成され、コマンド名の後に指定した名前が付けられます。たとえば、 `mkdir my-awesome-website` は `my-awesome-website` という名前の新しいディレクトリーを作成します。 -- `rmdir` — 指定されたディレクトリーを削除しますが、それが空の場合のみです。たとえば、 `rmdir my-awesome-website` は上で作成したディレクトリーを削除します。空ではないディレクトリーを削除したい場合 (およびそこに含まれるすべてのものも削除したい場合)、代わりに `rm -r` を使用することができますが、これは危険です。ディレクトリーは永久に失われるため、後でディレクトリー内に必要なものがないことを確認してください。 +- `mkdir` — 現在のディレクトリー内に新しいディレクトリーを作成し、コマンド名の後に指定した名前が付けられます。たとえば、 `mkdir my-awesome-website` は `my-awesome-website` という名前の新しいディレクトリーを作成します。 +- `rmdir` — 指定されたディレクトリーを削除しますが、空の場合のみです。たとえば、 `rmdir my-awesome-website` は上で作成したディレクトリーを削除します。空ではないディレクトリーを削除したい場合（およびそこに含まれるすべてのものも削除したい場合）、代わりに `rm -r` を使用することができますが、これは危険です。ディレクトリー内に後で必要になる可能性があるものがないことを確認してください。永久に消去されますので。 - `touch` — 現在のディレクトリー内に新しい空のファイルを作成します。たとえば、`touch mdn-example.md` は `mdn-example.md` という新しい空のファイルを作成します。 -- `mv` — 最初に指定されたファイルの場所から 2 番目に指定されたファイルの場所にファイルを移動します。たとえば、 `mv mdn-example.md mdn-example.txt` (場所はファイルパスとして書き込まれます)。このコマンドは、`mdn-example.md` 現在のディレクトリーにあるファイルに `mdn-example.txt` 現在のディレクトリーに。技術的にはファイルは移動されていますが、実用的な観点から見ると、このコマンドは実際にはファイルの名前を変更しています。 -- `cp` — 使い方は `mv` と似ていますが、`cp` は指定された最初の場所と 2 番目に指定された場所にファイルのコピーを作成します。たとえば、`cp mdn-example.txt mdn-example.txt.bak` は、`mdn-example.txt.bak` という名前の `mdn-example.txt` のコピーを作成します (もちろん、必要に応じて別の名前にすることもできます）。 +- `mv` — 最初に指定されたファイルの場所から 2 番目に指定されたファイルの場所にファイルを移動します。たとえば、 `mv mdn-example.md mdn-example.txt` （場所はファイルパスとして書き込まれます）。このコマンドは、`mdn-example.md` 現在のディレクトリーにあるファイルに `mdn-example.txt` 現在のディレクトリーに。技術的にはファイルは移動されていますが、実用的な観点から見ると、このコマンドは実際にはファイルの名前を変更しています。 +- `cp` — 使い方は `mv` と似ていますが、`cp` は指定された最初の場所と 2 番目に指定された場所にファイルのコピーを作成します。たとえば、`cp mdn-example.txt mdn-example.txt.bak` は、`mdn-example.txt.bak` という名前の `mdn-example.txt` のコピーを作成します（もちろん、必要に応じて別の名前にすることもできます）。 - `rm` — 指定されたファイルを削除します。たとえば、 `rm mdn-example.txt` は `mdn-example.txt` という単一のファイルを削除します。この削除は永続的であり、デスクトップユーザーインターフェイスにあるごみ箱から元に戻すことはできないことに注意してください。 > [!NOTE] > 多くの端末コマンドでは、アスタリスクを「ワイルドカード」文字として使用できます。これは、「任意の文字列」を意味します。これにより、潜在的に多数のファイルに対して一度に操作を実行でき、そのすべてが指定されたパターンに一致します。例として、 `rm mdn-*` は `mdn-` で始まるすべてのファイルを削除します。`rm mdn-*.bak` は、 `mdn-`で始まり `.bak` で終わるすべてのファイルを削除します。 -## 端末 — 有害と見なされますか? +## 端末 — 害になることを考える -これについては以前にも言及しましたが、明確にするために、端末には注意する必要があります。単純なコマンドにはそれほど危険はありませんが、より複雑なコマンドをまとめ始めるときは、そのコマンドが何をするかを慎重に検討し、目的のディレクトリーで最終的に実行する前に、最初にそれらをテストする必要があります。 +以前にも言及しましたが、はっきりさせておきましょう。端末には注意が必要です。単純なコマンドにはそれほど危険はありませんが、より複雑なコマンドを始めると、そのコマンドが何をするのかを慎重に考え、目的にディレクトリーで最終的に実行する前に、まずテストを行ってみる必要があります。 -ディレクトリーに 1000 個のテキストファイルがあり、それらすべてを調べて、ファイル名の中に特定の部分文字列を含むものだけを削除したいとします。注意しないと、重要なものを削除してしまい、その過程で作業の負荷が失われる可能性があります。 +ディレクトリーに 1000 個のテキストファイルがあり、それらすべてを調べて、ファイル名の中に特定の部分文字列を含むものだけを削除したいとします。注意しないと、重要なものを削除してしまい、その過程で作業が失われる可能性があります。 良い習慣の 1 つは、端末コマンドをテキストエディター内に書き出し、それがどのように表示されるかを考え、ディレクトリーのバックアップコピーを作成し、最初にそのコマンドを実行してテストすることです。 もう 1 つのヒント — 自分のマシンで端末コマンドを試すのが苦手な場合は、 [Glitch.com](https://glitch.com/) で安全に試すことができます。プロジェクトは、ウェブ開発コードを試すのに最適な場所であるだけでなく、端末へのアクセスも提供するため、これらすべてのコマンドをその端末で直接実行できます。自分のマシンを壊すことはないので安全です。 -![a double screenshot showing the glitch.com home page, and the glitch terminal emulator](glitch.png) +![glitch.com のホームページと glitch 端末エミュレーターを示す 2 つのスクリーンショット](glitch.png) [tldr.sh](https://tldr.sh/) は、特定の端末コマンドの概要をすばやく把握するための優れたリソースです。これはコミュニティ主導のドキュメンテーションサービスで、MDN に似ていますが、端末コマンドに固有です。 -次のセクションでは、それを 1 段階 (実際には数段階) 上げて、コマンドラインでツールを接続する方法を見て、通常のデスクトップユーザーインターフェイスよりも端末がどのように有利になるかを実際に見てみましょう。 +次の節では、それを 1 段階（実際には数段階）上げて、コマンドラインでツールを接続する方法を見て、通常のデスクトップユーザーインターフェイスよりも端末がどのように有利になるかを実際に見てみましょう。 ## コマンドをパイプで接続する -`|` (パイプ) 記号を使用してコマンドを連鎖させ始めると、端末は真価を発揮します。これが何を意味するかの非常に簡単な例を見てみましょう。 +`|` （パイプ）記号を使用してコマンドを連鎖させ始めると、端末は真価を発揮します。これが何を意味するかの非常に簡単な例を見てみましょう。 現在のディレクトリーの内容を出力する `ls` については既に説明しました。 @@ -255,7 +262,7 @@ ls wc -l myfile.txt ``` -しかし、**パイプ**された出力の行数をカウントすることもできます。たとえば、以下のコマンドは、`ls` コマンドによって出力された行数 (通常、単独で実行した場合に端末に出力されるもの) をカウントし、代わりにそのカウントを端末に出力します。 +しかし、**パイプ**された出力の行数をカウントすることもできます。たとえば、以下のコマンドは、`ls` コマンドによって出力された行数（通常、単独で実行した場合に端末に出力されるもの）をカウントし、代わりにそのカウントを端末に出力します。 ```bash ls | wc -l @@ -271,22 +278,22 @@ ls | wc -l もう少し複雑なことを見てみましょう。 -最初に、MDN の「fetch」ページ `https://developer.mozilla.org/docs/Web/API/WindowOrWorkerGlobalScope/fetch` を `curl` コマンド (URL からコンテンツを要求するために使用できる) を使用してコンテンツを取得します。 +最初に、MDN の "fetch" ページ `https://developer.mozilla.org/docs/Web/API/WindowOrWorkerGlobalScope/fetch` を `curl` コマンド（URL からコンテンツを要求するために使用できる）を使用してコンテンツを取得します。 やってみよう: ```bash -curl https://developer.mozilla.org/docs/Web/API/WindowOrWorkerGlobalScope/fetch +curl https://developer.mozilla.org/ja/docs/Web/API/WindowOrWorkerGlobalScope/fetch ``` -ページが ([/Web/API/fetch](/ja/docs/Web/API/Window/fetch) に) リダイレクトされているため、出力は得られません。 +ページが（[/Web/API/fetch](/ja/docs/Web/API/Window/fetch) に）リダイレクトされているため、出力は得られません。 `-L` フラグを使用してリダイレクトに従うように `curl` に明示的に指示する必要があります。 -また `curl` の `-I` フラグを使用して `developer.mozilla.org` が返すヘッダーを見て、 `curl` の出力を `grep` にパイプすることにより、端末に送信されるすべてのロケーションリダイレクトを出力します。(「 location」という単語を含むすべての行を返すように `grep` に依頼します)。 +また `curl` の `-I` フラグを使用して `developer.mozilla.org` が返すヘッダーを見て、 `curl` の出力を `grep` にパイプすることにより、端末に送信されるすべてのロケーションリダイレクトを出力します。("location" という単語を含むすべての行を返すように `grep` に依頼します)。 -以下を実行してみてください (最終ページに到達する前にリダイレクトが 1 つだけあることがわかります)。 +以下を実行してみてください（最終ページに到達する前にリダイレクトが 1 つだけあることがわかります）。 ```bash -curl https://developer.mozilla.org/docs/Web/API/WindowOrWorkerGlobalScope/fetch -L -I | grep location +curl https://developer.mozilla.org/ja/docs/Web/API/WindowOrWorkerGlobalScope/fetch -L -I | grep location ``` 出力は次のようになります (`curl` は最初にいくつかのダウンロードカウンターなどを出力します)。 @@ -296,15 +303,15 @@ location: /en-US/docs/Web/API/fetch ``` 人為的ではありますが、この結果をもう少し進めて `location:` 行の内容を変換し、それぞれの先頭に基本オリジンを追加して、完全な URL を出力できるようにすることができます。 -そのために、`awk` をミックスに追加します (これは、JavaScript や Ruby、Python に似たプログラミング言語で、はるかに古いものです!)。 +そのため、 `awk` を追加します（これは JavaScript、Ruby、Python に似たプログラミング言語で、かなり古いものです）。 -これを実行してみてください: +これを実行してみてください。 ```bash -curl https://developer.mozilla.org/docs/Web/API/WindowOrWorkerGlobalScope/fetch -L -I | grep location | awk '{ print "https://developer.mozilla.org" $2 }' +curl https://developer.mozilla.org/ja/docs/Web/API/WindowOrWorkerGlobalScope/fetch -L -I | grep location | awk '{ print "https://developer.mozilla.org" $2 }' ``` -最終的な出力は次のようになります: +最終的な出力は次のようになります。 ```bash https://developer.mozilla.org/en-US/docs/Web/API/fetch @@ -324,48 +331,48 @@ https://developer.mozilla.org/en-US/docs/Web/API/fetch 上記の URL にアクセスし、お使いのオペレーティングシステムに適した Node.js インストーラーをダウンロードして実行することにより、今すぐシステムに npm をインストールします。プロンプトが表示されたら、必ず npm をインストールの一部として含めてください。 -![the Node.js installer on windows, showing the option to include npm](npm-install-option.png) +![Windwos の Node.js インストーラーで、 npm を含めるオプションを示しています。](npm-install-option.png) 次の記事以降ではさまざまなツールを見ていきますが、[Prettier](https://prettier.io/) について詳しく説明します。 -Prettier は、「いくつかのオプション」しかない独自のコード フォーマッタです。 +Prettier は、「オプションがわずか」しかない独自のコードフォーマッターです。 オプションが少ないほど、シンプルになる傾向があります。 複雑さの点でツールが手に負えなくなることがあることを考えると、「選択肢が少ない」ことは非常に魅力的です。 -### CLI ツールをどこにインストールしますか? +### CLI ツールをどこにインストールするか -Prettier のインストールに飛び込む前に、答えるべき質問があります — 「どこにインストールすればよいですか?」 +Prettier のインストールに入る前に、答えるべき質問があります — 「どこにインストールすればよいか」です。 `npm` を使用すると、ツールをグローバルにインストールする (どこからでもアクセスできるようにする) か、現在のプロジェクトディレクトリーにローカルにインストールするかを選択できます。 それぞれに長所と短所があります。グローバルにインストールする場合の以下の長所と短所のリストは、すべてを網羅しているわけではありません。 -**グローバルにインストールする利点:** +**グローバルにインストールする長所:** - 端末のどこからでもアクセス可能 - 一度だけインストール - 使用するディスク容量が少ない - 常に同じバージョン -- 他の UNIX コマンドと同じ感覚 +- 他の Unix コマンドと同じ感覚 **グローバルにインストールすることの短所:** -- プロジェクトのコードベースと互換性がない可能性があります。 -- チーム内の他の開発者は、これらのツールにアクセスできません。たとえば、git などのツールでコードベースを共有している場合です。 -- 前のポイントに関連して、プロジェクトコードの複製が難しくなります (ツールをローカルにインストールする場合、ツールを依存関係として設定し、npm install でインストールできます)。 +- プロジェクトのコードベースと互換性がない可能性がある +- チーム内の他の開発者が、これらのツールにアクセスできない。たとえば、git などのツールでコードベースを共有している場合です。 +- 前の点に関連して、プロジェクトコードの複製が難しくなります（ツールをローカルにインストールする場合、ツールを依存関係として設定し、 npm install でインストールできます）。 -_cons_ リストは短くなりますが、グローバル インストールのマイナスの影響は、メリットよりもはるかに大きい可能性があります。 -ここではローカルにインストールしますが、相対的なリスクを理解したら、自由にグローバルにインストールしてください。 +短所のリストは短いのですが、グローバルインストールの負の影響は、便益よりもはるかに大きい可能性があります。 +ここではローカルにインストールしますが、相対的なリスクを理解したのであれば、グローバルにインストールするのは自由です。 ### Prettier のインストール -Prettier は、JavaScript ベースの言語に焦点を当て、HTML、CSS、SCSS、JSON などのサポートを追加するフロントエンド開発者向けの独自のコードフォーマットツールです。 +Prettier は、JavaScript ベースの言語に焦点を当て、HTML、CSS、SCSS、JSON などの対応を追加するフロントエンド開発者向けの独自のコード整形ツールです。 -Prettier のできること: +Prettier のできることは、次の通りです。 -- すべてのコードファイルで一貫したスタイルを手動で取得するための認知的オーバーヘッドを節約します。Pretier はこれを自動的に行うことができます。 -- ウェブ開発の初心者がベストプラクティスの方法でコードをフォーマットできるようにします。 -- 任意のオペレーティングシステムにインストールでき、プロジェクトツールの直接の一部としてもインストールできます。これにより、コードに取り組む同僚や友人が、あなたが使用しているコードスタイルを確実に使用できるようになります。 -- 保存時、入力時、またはコードを公開する前に実行するように構成します (モジュールの後半で説明する追加のツールを使用)。 +- すべてのコードファイルで一貫したスタイルを手作業で整えるための認知的オーバーヘッドを節約します。 Pretier はこれを自動的に行うことができます。 +- ウェブ開発の初心者が最良の方法でコードを整形できるようにします。 +- あらゆるオペレーティングシステムにインストールでき、プロジェクトツールの直接の一部としてもインストールできます。これにより、コードに取り組む同僚や友人が、使用しているコードスタイルを確実に使用できるようになります。 +- 保存時、入力時、またはコードを公開する前に実行するように構成します（モジュールの後半で説明する追加のツールを使用）。 この記事では、[Prettier インストールガイド](https://prettier.io/docs/en/install.html) で提案されているように、Prettier をローカルにインストールします。 @@ -377,7 +384,7 @@ npm install --save-dev prettier [npx](https://docs.npmjs.com/cli/commands/npx) ツールを使用して、ファイルをローカルで実行できるようになりました。 他の多くのコマンドと同様に、引数を指定せずにコマンドを実行すると、使用方法とヘルプ情報が表示されます。 -これを試してください: +すぐに試してみましょう。 ```bash npx prettier @@ -394,8 +401,8 @@ Stdin is read if it is piped to Prettier and no files are given. … ``` -たとえそれが長くても、少なくとも使用法情報に目を通すことは常に価値があります。 -ツールがどのように使用されることを意図しているかをよりよく理解するのに役立ちます。 +長いのですが、使用方法に目を通しておくことは少なくともとても価値があることです。 +ツールがどのように使用されることを意図しているかが理解しやすくなります。 > [!NOTE] > 最初に Prettier をローカルにインストールしていない場合、`npx prettier` を実行すると、*そのコマンドだけ*で、Prettier の最新バージョンがダウンロードされて実行されます。 @@ -447,7 +454,7 @@ index.js Code style issues fixed in the above file(s). ``` -しかしもっと重要なことは、JavaScript ファイルを振り返ると、次のように再フォーマットされていることがわかります。 +しかしもっと重要なことは、JavaScript ファイルを振り返ると、次のように再整形されていることがわかります。 ```js const myObj = { @@ -483,6 +490,6 @@ Prettier を使用すると、自動化を実現する方法がいくつかあ ## まとめ -これで端末/コマンドラインの簡単なツアーは終了です。次はパッケージマネージャーで何ができるかについて詳しく見ていきます。 +これで、端末/コマンドラインの入門ツアーと環境設定モジュールの解説は終わりです。次に、最初の簡単なウェブサイトを構築する作業に取り掛かり、ウェブ開発とはどのようなものか、その概要を学んでいきます。 -{{PreviousMenuNext("Learn/Tools_and_testing/Understanding_client-side_tools/Overview","Learn/Tools_and_testing/Understanding_client-side_tools/Package_management", "Learn/Tools_and_testing/Understanding_client-side_tools")}} +{{PreviousMenuNext("Learn_web_development/Getting_started/Environment_setup/Dealing_with_files", "Learn_web_development/Getting_started/Your_first_website", "Learn_web_development/Getting_started/Environment_setup")}} diff --git a/files/ja/learn_web_development/getting_started/environment_setup/dealing_with_files/index.md b/files/ja/learn_web_development/getting_started/environment_setup/dealing_with_files/index.md index 1b8a06df9ac454..bfd9cbe6b657bb 100644 --- a/files/ja/learn_web_development/getting_started/environment_setup/dealing_with_files/index.md +++ b/files/ja/learn_web_development/getting_started/environment_setup/dealing_with_files/index.md @@ -1,49 +1,90 @@ --- title: ファイルの扱い slug: Learn_web_development/Getting_started/Environment_setup/Dealing_with_files -original_slug: Learn/Getting_started_with_the_web/Dealing_with_files l10n: - sourceCommit: 2efd5ec19bebfd1d47fd92bc963eee853ae1c431 + sourceCommit: 5b20f5f4265f988f80f513db0e4b35c7e0cd70dc --- -{{LearnSidebar}}{{PreviousMenuNext("Learn/Getting_started_with_the_web/What_will_your_website_look_like", "Learn/Getting_started_with_the_web/HTML_basics", "Learn/Getting_started_with_the_web")}} - -ウェブサイトは、テキストコンテンツ、コード、スタイルシート、メディアコンテンツなど、多くのファイルで構成されています。ウェブサイトを構築するときは、これらのファイルをローカルコンピューター上の適切な構造に組み立て、互いに呼び出すことができるようにして、最終的に[サーバーにアップロード](/ja/docs/Learn/Getting_started_with_the_web/Publishing_your_website)する前に、すべてのコンテンツを正しいものにする必要があります。「ファイルの扱い」では、ウェブサイトに適切なファイル構造を設定できるように、注意すべきいくつかの問題について説明します。 +{{LearnSidebar}} + +{{PreviousMenuNext("Learn_web_development/Getting_started/Environment_setup/Code_editors", "Learn_web_development/Getting_started/Environment_setup/Command_line", "Learn_web_development/Getting_started/Environment_setup")}} + +ウェブサイトは、テキストコンテンツ、コード、スタイルシート、メディアコンテンツなど、多くのファイルで構成されています。ウェブサイトを構築するときは、これらのファイルをローカルコンピューター上の適切な構造に組み立て、互いに呼び出すことができるようにして、最終的に[サーバーにアップロード](/ja/docs/Learn_web_development/Getting_started/Your_first_website/Publishing_your_website)する前に、すべてのコンテンツを正しいものにする必要があります。「ファイルの扱い」では、ウェブサイトに適切なファイル構造を設定できるように、注意すべきいくつかの問題について説明します。 + + + + + + + + + + + + +
前提条件: + コンピューターのオペレーティングシステムと、ウェブサイトを構築するための基本的なソフトウェアに慣れていること。 +
学習成果: +
    +
  • エクスプローラー/ファインダーの基本的な使い方。
    • +
  • 標準的なフォルダー構造。
    • +
  • ウェブ用ファイル名の最善の手法 — 空白を置かない、小文字にする、ハイフンやアンダースコアなどの合理的な区切り文字を選ぶ。
    • +
  • ファイルの基本的な整理の最善の手法。
    • +
  • エクスプローラー/ファインダーを使用して、ファイルやフォルダー内を作成、移動、削除すること。
    • +
  • ファイルとフォルダー内の検索。
    • +
  • ファイルの拡張子の扱い（例えば、 Windows で「登録されている拡張子は表示しない」をオフにしたり、ドットファイル（.env など）を表示させたりすること）。
    • +
  • ファイルの種類とアプリケーションの関連付けについての学習。
    • +
+
## コンピューター上でウェブサイトがあるべき場所 自分のコンピューター上のウェブサイトでローカルに作業している時、関連するすべてのファイルを、サーバー上に公開されたウェブサイトのファイル構造のミラーである単一のフォルダーに保持する必要があります。このフォルダーは好きな場所に置くことができますが、簡単に見つけることができる場所、たとえばデスクトップ上、ホームフォルダーの中、またはハードドライブのルートなどに置いてください。 -1. ウェブサイトプロジェクトを保存する場所を選択してください。ここでは `web-projects` （またはそのようなもの）という新しいフォルダーを作成します。これはウェブサイトのプロジェクト全体を保存するところです。 +一般的には、次のようにしてください。 + +1. ウェブサイトプロジェクトを保存する場所を選択してください。これはすべてのウェブサイトのプロジェクトを保存するところです。 2. この最初のフォルダーの中に、最初のウェブサイトを格納する別のフォルダーを作成します。それを `test-site` （またはもっと想像力のあるもの）と呼びましょう。 +これから自分のプロジェクトを格納する場所を選択してください。選択した場所内で、新しいフォルダーに `web-projects` と名前を付けてください。 + ## 大文字や空白を使わない この記事を通して、フォルダーやファイルに空白のない全て小文字の名前を付けるよう求めていることに気が付くでしょう。理由は次の通りです。 1. 多くのコンピューター、特にウェブサーバーでは、大文字と小文字が区別されます。例えば、ウェブサイトの `test-site/MyImage.jpg` に画像を置いて、別のファイルから画像を `test-site/myimage.jpg` として呼び出そうとすると、動作しないかもしれません。 -2. ブラウザー間、ウェブサーバー間、プログラミング言語間で、空白の扱いが一貫していません。例えば、ファイル名に空白を使用すると、システムによってはそのファイル名を 2 つのファイル名として扱うことがあります。サーバーによっては、ファイル名の空白を "%20" （URL の空白の文字コード）に置き換えるので、リンクが壊れてしまう結果になります。`my_file.html` のように単語をアンダースコアで区切るよりは、`my-file.html` のようにハイフンで区切った方がよいでしょう。 +2. ブラウザー間、ウェブサーバー間、プログラミング言語間で、空白の扱いが一貫していません。 + - コマンドラインからコマンドを呼び出す場合、空白を含むファイル名を引用符で囲まないと、パスが 2 つの別々なものとして解釈されてしまします。 + - 一部のプログラミング言語（例えば Python）は、特定の状況下では、ファイル名に空白が含まれているとうまく動作しないことがあります（例えば、インポートされるモジュールのファイルである場合など）。 + +ファイルは URL にも対応付けられます。例えば、サーバーで提供されるディレクトリのルートに `my_file.html` というファイル名でファイルを保存した場合、ほとんどのウェブサーバーでは、既定では `https://example.com/my_file.html` でアクセスできるようになります。一部のサーバーでは、ファイル名内の空白を "%20" （URL 内の空白の文字コード）に置き換えます。ファイル名と URL が完全に一致すると想定している場合、サーバーサイドのロジックに微妙なバグを作成する可能性があります。 + +多くの開発者は、空白文字の代わりに、ハイフン (`-`) やアンダースコア (`_`) などの区切り文字を使用します。単語を区切る際には、アンダースコアよりもハイフンを使用することをお勧めします。 `my-file.html` と `my_file.html` を比較してください。 [Google 検索エンジンはハイフンを単語の区切り文字として扱いますが、アンダースコアはそうは扱いません](https://developers.google.com/search/docs/crawling-indexing/url-structure)。この問題は、サーバーを構成してアンダースコアをハイフンに置き換えることで解決できますが、これは余分な作業であり、ファイル名や URL が分岐してバグが発生しやすくなります。 -簡単に言うと、ファイル名にはハイフンを使用した方が良いということです。Google の検索エンジンはハイフンを単語の区切りとして扱いますが、アンダースコアはそのように見なされません。このような理由から、少なくとも自分が何をしているかを知るまでは、フォルダー名やファイル名を小文字で書き、スペースを入れず、単語をハイフンで区切る習慣をつけるとよいでしょう。そうすれば、問題にぶつかることも少なくなるはずです。 +少なくとも、自分のしていることが分かるまでは、フォルダー内およびファイル名の名前付きを小文字で、空白を入れずに、別個の単語をハイフンで区切るという習慣を取得するのが最善です。そうすれば、将来的に問題に遭遇する可能性が低くなります。 ## ウェブサイトはどのような構成にするべきか 次に、テストサイトをどのような構造にすべきかを見てみましょう。私たちが作成するウェブサイトプロジェクトで最も一般的なのは、目次の HTML ファイルと、画像、スタイルシート、スクリプトファイルを入れるフォルダーです。作成してみましょう。 -1. **`index.html`**: このファイルには、一般的にあなたのホームページの内容、つまりあなたが最初にあなたのサイトに行ったときに見るテキストと画像が含まれています。テキストエディターを使用して、 `index.html` という名前の新しいファイルを作成し、 `test-site` フォルダー内に保存してください。 -2. **`images` フォルダー**: このフォルダーにはサイトで使用するすべての画像を入れます。`test-site` フォルダーの中に `images` という名前のフォルダーを作成してください。 -3. **`styles` フォルダー**: このフォルダーには、コンテンツのスタイルを設定するための CSS コード（例えばテキストと背景色の設定など）を入れます。 `styles` というフォルダーを `test-site` のフォルダーの中に作成してください。 -4. **`scripts` フォルダー**: このフォルダーには、サイトに対話機能を追加するために使用されるすべての JavaScript コード（クリックされたときにデータを読み込むボタンなど）が含まれます。 `scripts` というフォルダーを `test-site` のフォルダーの中に作成します。 +1. **`index.html`**: このファイルには、一般的にあなたのホームページの内容、つまりあなたが最初にあなたのサイトに行ったときに見るテキストと画像が含まれています。 +2. **`images` フォルダー**: このフォルダーにはサイトで使用するすべての画像を入れます。 +3. **`styles` フォルダー**: このフォルダーには、コンテンツのスタイルを設定するための CSS コード（例えばテキストと背景色の設定など）を入れます。 +4. **`scripts` フォルダー**: このフォルダーには、サイトに対話機能を追加するために使用されるすべての JavaScript コード（クリックされたときにデータを読み込むボタンなど）を入れます。 + +![macOS ファインダーのファイル構造で、画像が入る images フォルダー、空の scripts と styles フォルダー、 index.html を表示したところです。。](file-structure.png) > [!NOTE] > Windows では、既定で有効になっている**既知のファイルの種類の拡張子を表示しない**というオプションがあるため、ファイル名の表示に問題が発生することがあります。一般に、 Windows エクスプローラーで **\[フォルダーオプション...]** オプションを選択し、**\[登録されている拡張子は表示しない]** チェックボックスをオフにし、 **\[OK]** をクリックすることで、これをオフにすることができます。お使いの Windows のバージョンに関する詳細な情報については、ウェブで検索してください。 ## ファイルパス -ファイルをお互いに呼び出すためには、ファイルパスを提供する必要があります。基本的には、あるファイルが別のファイルの場所を知っています。これを実証するために、 `index.html` ファイルに短い HTML を挿入し、[ウェブサイトをどんな外見にするか](/ja/docs/Learn/Getting_started_with_the_web/What_will_your_website_look_like)の記事で選択した画像を表示させます。あるいは、コンピューター上またはウェブ上の既存の画像を自由に選択して、以下の手順で使用することができます。 +あるファイルから別のファイルを参照するには、ファイルパスを指定する必要があります。これは基本的に、あるファイルが別のファイルの場所を知るための経路です。例えば、画像を保有するウェブページを作成する場合、表示したい画像の場所を示すファイルパスをウェブページのコードに記述する必要があります。 それでは、この基本的な例を作成してみましょう。 現時点では、このすべてが何を意味するのか理解できないかもしれませんが、問題ありません。 -1. 以前に選択した画像を `images` フォルダーにコピーします。 -2. `index.html` ファイルを開き、次のコードをファイルに挿入します。それが今のところ何を意味するのか気にしないでください。シリーズの後半で構造を詳しく見ていきます。 +1. `web-projects` フォルダーの中に、 `path-example` という新しいフォルダーを作成してください。 +2. [Google Images](https://www.google.com/imghp) へ行き、好きな画像を選択して、ダウンロードしてください。 +3. `path-example` フォルダー内で、 `images` という新しいフォルダーを作成してください。づアンロードした画像をこのフォルダーに入れてください。 +4. 新しいファイルを`index.html`という名前で作成し、次のコードをファイル内に入れてください。 ```html @@ -59,29 +100,22 @@ l10n: ``` -3. `テスト画像` という行は、ページに画像を挿入する HTML コードです。画像がどこにあるのかを HTML に伝える必要があります。画像は _images_ ディレクトリー内にあり、`index.html` と同じディレクトリーにあります。ファイル構造の中で `index.html` からその画像に移動するのに必要なファイルパスは `images/your-image-filename` です。例えば、私たちの画像は `firefox-icon.png` と呼ばれており、ファイルパスは `images/firefox-icon.png` になります。 -4. `src=""` コードの二重引用符の間の HTML コードにファイルパスを挿入してください。 -5. `alt` 属性の内容を入れようとしている[画像の説明](/ja/docs/Web/HTML/Element/img#意味のある代替説明を書く)に変更してください。今回は、 `alt="Firefox のロゴ: 世界を囲む燃える狐"` とします。 -6. HTML ファイルを保存し、ウェブブラウザーに読み込みます（ファイルをダブルクリックします）。新しいウェブページに画像が表示されます。 +5. `テスト画像` という行は、ページに画像を挿入する HTML コードです。画像がどこにあるのかを HTML に伝える必要があります。画像は _images_ ディレクトリー内にあり、`index.html` と同じディレクトリーにあります。ファイル構造の中で `index.html` からその画像に移動するのに必要なファイルパスは `images/your-image-filename` です。例えば、私たちの画像は `firefox-icon.png` と呼ばれており、ファイルパスは `images/firefox-icon.png` になります。 +6. `src=""` コードの二重引用符の間の HTML コードにファイルパスを挿入してください。 +7. HTML ファイルを保存し、ウェブブラウザーに読み込みます（ファイルをダブルクリックします）。新しいウェブページに画像が表示されます。 ![地球の周りに燃える狐を表した firefox のロゴのみを表示した基本的なウェブサイトのスクリーンショット。](website-screenshot.png) ファイルパスの一般的なルールは次の通りです。 -- 呼び出し元の HTML ファイルと同じディレクトリーにある対象ファイルにリンクするには、ファイル名を使用します。例えば `my-image.jpg`。 -- サブディレクトリー内のファイルを参照するには、パスの前にディレクトリー名とスラッシュを入力します。例えば `subdirectory/my-image.jpg`。 -- 呼び出し元の HTML ファイルの**上階層**のディレクトリー内にある対象ファイルにリンクするには、2 つのドットを記述します。例えば、`index.html` が `test-site` のサブフォルダー内にあり、`my-image.jpg` が `test-site` 内にある場合、`../my-image.jpg` を使用して `index.html` から `my-image.jpg` を参照できます。 +- 呼び出し元の HTML ファイルと同じディレクトリーにある対象ファイルにリンクするには、 `my-image.jpg` のようにファイル名を使用します。 +- サブディレクトリー内のファイルを参照するには、 `subdirectory/my-image.jpg` のようにパスの前にディレクトリー名とスラッシュを入力します。 +- 呼び出し元の HTML ファイルの**上階層**のディレクトリー内にある対象ファイルにリンクするには、2 つのドットを記述します。例えば、 `index.html` が `test-site` のサブフォルダー内にあり、 `my-image.jpg` が `test-site` 内にある場合、 `my-image.jpg` を `index.html` から参照するには `../my-image.jpg` を使用します。 - 例えば `../subdirectory/another-subdirectory/my-image.jpg` など、好きなだけ組み合わせることができます。 -今のところ、これが知る必要があるすべてです。 - > [!NOTE] > Windows のファイルシステムでは、スラッシュ (/) ではなくバックスラッシュまたは￥記号を使用します（例 : `C:\Windows`）。これは HTML では使用できません。Windows でウェブサイトを開発している場合でも、コード内ではスラッシュを使用する必要があります。 -## 他にするべきこと - -今のところは以上です。フォルダー構造は次のようになります。 - -![macOS X の finder におけるファイル構造。images フォルダーに画像が入っており、scripts と styles フォルダーは空で、あと index.html がある](file-structure.png) +これで、知っておくべきことはすべてです。 -{{PreviousMenuNext("Learn/Getting_started_with_the_web/What_will_your_website_look_like", "Learn/Getting_started_with_the_web/HTML_basics", "Learn/Getting_started_with_the_web")}} +{{PreviousMenuNext("Learn_web_development/Getting_started/Environment_setup/Code_editors", "Learn_web_development/Getting_started/Environment_setup/Command_line", "Learn_web_development/Getting_started/Environment_setup")}} From 4ad3eea1b34bd91668484541065e9e7c0f44ff48 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Sat, 21 Dec 2024 10:11:19 +0900 Subject: [PATCH 2/2] Update files/ja/learn_web_development/getting_started/environment_setup/dealing_with_files/index.md Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> --- .../environment_setup/dealing_with_files/index.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/files/ja/learn_web_development/getting_started/environment_setup/dealing_with_files/index.md b/files/ja/learn_web_development/getting_started/environment_setup/dealing_with_files/index.md index bfd9cbe6b657bb..84ebe6b130c773 100644 --- a/files/ja/learn_web_development/getting_started/environment_setup/dealing_with_files/index.md +++ b/files/ja/learn_web_development/getting_started/environment_setup/dealing_with_files/index.md @@ -54,8 +54,8 @@ l10n: 1. 多くのコンピューター、特にウェブサーバーでは、大文字と小文字が区別されます。例えば、ウェブサイトの `test-site/MyImage.jpg` に画像を置いて、別のファイルから画像を `test-site/myimage.jpg` として呼び出そうとすると、動作しないかもしれません。 2. ブラウザー間、ウェブサーバー間、プログラミング言語間で、空白の扱いが一貫していません。 - - コマンドラインからコマンドを呼び出す場合、空白を含むファイル名を引用符で囲まないと、パスが 2 つの別々なものとして解釈されてしまします。 - - 一部のプログラミング言語（例えば Python）は、特定の状況下では、ファイル名に空白が含まれているとうまく動作しないことがあります（例えば、インポートされるモジュールのファイルである場合など）。 + - コマンドラインからコマンドを呼び出す場合、空白を含むファイル名を引用符で囲まないと、パスが 2 つの別々なものとして解釈されてしまします。 + - 一部のプログラミング言語（例えば Python）は、特定の状況下では、ファイル名に空白が含まれているとうまく動作しないことがあります（例えば、インポートされるモジュールのファイルである場合など）。 ファイルは URL にも対応付けられます。例えば、サーバーで提供されるディレクトリのルートに `my_file.html` というファイル名でファイルを保存した場合、ほとんどのウェブサーバーでは、既定では `https://example.com/my_file.html` でアクセスできるようになります。一部のサーバーでは、ファイル名内の空白を "%20" （URL 内の空白の文字コード）に置き換えます。ファイル名と URL が完全に一致すると想定している場合、サーバーサイドのロジックに微妙なバグを作成する可能性があります。