初心者用にファイルパス周りをまとめてみる

なにかと最初に学び忘れがちで教え忘れがちな初心者のためのpathについて

ファイルパスとは

コンピューターにファイルを指定するときに使う記法

こんなフォルダ構造を意識して欲しい.

projectfolder
├── folder1
│   ├── index.html
│   ├── main.js
│   ├── styles.css
│   ├── image01.png
│   └── image02.jpg
├── folder2
│   └── folder3
│       ├── 55xY2w0H.jpg
│       ├── about.html
│       ├── contact.html
│       ├── index.html
│       └── styles.css
└── typescript.ts

今回はフォルダはすべてfolderという名前にした.フォルダは別名ディレクトリとも言うので覚えておこう.

そして.の拡張子がついたものがファイルだ.そのファイルが,どんな言語や形式なのかを表している.

日本語でいうと,プロジェクトフォルダの中にfolder1とfolder2ってフォルダとtypescript.tsってファイルがあって,folder1の中にはまたファイルがいくつかあって.folder2の中にfolder3ってフォルダがあって,その中にまたいくつかファイルがあってって感じです.

それではファイルパスの説明をしよう.pathには絶対パスと相対パスの2種類がある.

絶対パス

頭使わなくていい方.はじまりが決まっていて,そこから行きたいファイルまでのpathを書けば良い.

例：projectfolderから始まるとして

./folder1/index.html

./folder2/folder3/contact.html

など,常に始まる場所が一緒.

この始まる場所は,変更することもできるが,最初のうちはどこから始まるかが明確にわからなかったりするので,実は初心者にはおすすめではななかったりする.

相対パス

頭使うけど,最初はこっちの方が確実かも.

今自分がいる位置が重要です.「自分がいる位置」とは,pathを書くファイルになります.

例1：folder1にあるindex.htmlから同じフォルダ内にあるstyles.cssを読み込むときのpath

./styles.css

例2：folder3にあるindex.htmlからfolder1にあるimage01.pngを読み込むときのpath

../../folder1/image10.png

（戻って,戻って,進んで,進む）

ポイント

相対パスのポイントは進むと戻るを覚えること,

./[進みたいフォルダ名か指定するファイル名]：進む（最初に書く場合のみ.をつける）

../：戻る

.がいらなかったり,/がいらなかったりする場合もあるので,ダメならつけたり足したりしてみるといいと思います.

あとは,ターミナルにおいてのフォルダ移動もこのpathを使用します.

cd [移動したい場所の相対path]

となります.cdはchange directoryの略.

あとは慣れb