HTML

HTMLでSEO対策としてのディレクトリ構成を現役デザイナーが解説【初心者向け】

初心者向けにHTMLでSEO対策としてのディレクトリ構成について解説しています。ディレクトリ構造の基本と、HTMLにおいての理想的なディレクトリ構成について説明します。サイト全体の構成の最適化の際に必要な知識となるので、ぜひ理解しておきましょう。

テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社　調査期間：2021年8月12日～8月16日　調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名　調査手法：インターネット調査

HTMLでSEO対策としてのディレクトリ構成について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。

そもそも、HTMLの記述方法がわからない場合は、 HTMLの書き方について解説した記事を読むとさらに理解が深まります。

なお本記事は、TechAcademyのオンラインブートキャンプ、Webデザイン講座のHTMLカリキュラムをもとに執筆しています。

今回は、HTMLに関する内容だね！

どういう内容でしょうか？

SEO対策としてのディレクトリ構成について詳しく説明していくね！

お願いします！

ディレクトリ構成とは

ディレクトリ、というとなんだかとっても専門的で難しい言葉に聞こえますが、Webサイトをサーバーにアップロードしたときにページの役割ごとにフォルダを分けてhtmlファイルを格納する、パソコンで言うところの「フォルダ」のことを指します。そして、このフォルダの構造がどのように構成されているかが「ディレクトリ構成」となるわけです。

例えば、とあるコーポレートサイトがあったとして、

TOPページ
商品説明(products)
会社概要(company)
求人一覧(recruit)
お問い合せ(contact)、

という構成で作成されていたとします。その場合、このサイトのディレクトリ構成は以下のようになります。

階層	ページ名称		URL例
第一階層	TOPページ		https://hoge.com
第二階層	商品説明一覧		https://hoge.com/products
	会社概要		https://hoge.com/company
	求人情報		https://hoge.com/recruit
	お問合せ		https://hoge.com/contact
第三階層	商品説明	商品A	https://hoge.com/products/producta
		商品B	https://hoge.com/products/productb
		商品C	https://hoge.com/products/productc
	求人情報	新卒	https://hoge.com/recruit/graduate/
	求人情報	中途採用	https://hoge.com/recruit/carrer

HTMLにとって理想的なディレクトリ構成とは

空白の階層が無いこと

上記のサイトで説明すると、例えば、第二階層に「https://hoge.com/shop/」というURLがないにもかかわらず、「https://hoge.com/shop/producta」など第3階層のURLは存在する、というのはあまり好ましくありません。

空白のディレクトリのない、階層がきちんと整ったディレクトリ構成をすることで、検索エンジンがそのページを探しやすくなります。

URLを見ただけでそのページが何の情報を扱っているのか判断できる

https://hoge.com/products

URL（ディレクトリ名）を検索エンジンが見ても、ユーザーが見ても一目でわかりやすい名称にすることで、そのページやディレクトリがなんのためのものなのかをわかりやすくする働きがあります。

また、スペル間違いやローマ字表記などによる検索エンジンがなんのテーマかわからないようなディレクトリを作成するのもあまり好ましくありません。

階層の構造にストーリー性がある

上の表にあるURLを例にとってみると

https://hoge.com/recruit/graduate/

と、「求人情報」の下に「新卒」があることで、ディレクトリの構成が分かりやすく、URLを見るだけでどのような流れでサイトを閲覧できるのかが容易に想像できます。

このように、親階層と子の階層にストーリー性を持たすことで、ユーザーにも検索エンジンにもサイトの構造が分かりやすくなり、SEOにも効果が期待できます。

[PR] Webデザインで副業する方法とは

SEO対策としてのディレクトリ構成を整えよう

ディレクトリ階層を整理すると、ユーザーや検索エンジンにとってはどのページがどのような流れで構成されているかを容易に判断でき、見やすいサイトになりますし、サイト管理者にとってもディレクトリが整理され、更新や管理のしやすいサイトに生まれ変わります。

ぜひ、この機会にディレクトリの構成を見直してみましょう。

監修してくれたメンター

メンター増田直子

40歳直前までHTMLの存在すら知らなかったのですが、現在はWordPressを中心としたwebデザイン/コーディングをしているフリーランサーです。

趣味はスキューバーダイビング・年間3度は海のある国内外へ旅行してます。

内容分かりやすくて良かったです！

ゆかりちゃんも分からないことがあったら質問してね！

分かりました。ありがとうございます！

TechAcademyでは初心者でも、オリジナルWebサイトを公開できる、オンラインブートキャンプを開催しています。

また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。

HTMLで埋め込み動画の音声を消す方法を現役デザイナーが解説【初心者向け】

HTMLで埋め込み動画の音声を消す方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。そもそ...

HTML

HTMLで文字(テキスト)にアンダーラインを付ける方法【初心者向け】

この記事では、HTMLで文字(テキスト)にアンダーラインを付ける方法を解説します。アンダーラインを付ける方法を利用して見ている人に訴えたい内容を強調する...

HTML

セレクトボックスの使い方！HTMLでselectタグを書く方法【初心者向け】

HTMLでselectタグを使う方法について解説しています。セレクトボックスを作る際に便利なタグなので、ぜひ書き方を覚えておきましょう。 HTML...

HTML

HTMLの特殊文字の〒マークを表示する方法を現役エンジニアが解説【初心者向け】

HTMLの特殊文字の〒マークを表示する方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 &...

HTML

HTML5でストリーミング動画配信を実装する方法を現役エンジニアが解説【初心者向け】

HTML5でストリーミング配信された動画再生実装する方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 ...

HTML

HTMLで画像を画面サイズに合わせて表示する方法を現役デザイナーが解説【初心者向け】

モバイルファースト時代の昨今、WebページはスマホやタブレットやPC、様々な画面で見られています。 Webページに表示する画像も、ユーザーの画面に合わせて...

HTML

あわせてよく読まれている記事

今さら聞けない！GitHubの使い方【超初心者向け】

開発者にとってなくてはならないサービスとしてGitHubがあります。エンジニアにとっては当たり前のサービスですが、これからプログラミングの勉強を始める初心者にとってはよくわからないかもしれません。そこで今回は、GitHubの使い方について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。そもそもGitHubとは何なのか、どんな時に使うツールなのかを知っていきながら、実際の使い方を紹介しています。本格的に使おうと思ったらもっと多くのことを知る必要がありますが、業務で使うということでなければ十分でしょう。目次ディレクトリ構成とはHTMLにとって理想的なディレクトリ構成とはSEO対策としてのディレクトリ構成を整えよう監修してくれたメンター Gitについてそもそもよく分からないという方は、GitHubとは何なのか解説した記事を読むとさらに理解が深まります。今回の記事の内容は動画でもご覧いただけます。テキストよりも動画の方が理解しやすいという場合はぜひご覧ください。大石ゆかり田島メンター！！GitHubってなんですか〜？田島悠介 GitHubはね、Gitをオンライン上で管理するサービスだよ。大石ゆかりもう少し詳しく教えてもらえますか〜？ GitHubとは GitHubとは、ソフトウェア開発プロジェクトのためのソースコード管理サービスです。ソースコードを更新したバージョンの管理や閲覧、バグ追跡機能、SNSの機能を備えており、開発者にとってなくてはならないサービスです。また、GitHubを使ってソースコードの管理を行っている企業も多数あります。 GitHubが人気な理由と類似サービスとの違い GitHub は、Git を使用したソフトウェア開発とバージョン管理のための人気のあるプラットフォームおよびクラウドベースのサービスです。コードを効率的に保存、管理、共同作業するために必要なツールを開発者に提供します。ユーザーフレンドリーなインターフェースと豊富な機能を備えた GitHub は、世界中の開発者にとって不可欠なツールとなっています。 GitHub はテクノロジー業界では有名な名前かもしれませんが、ライブカジノへのユニークなアプローチを持つオンラインカジノ市場も多くの日本人プレイヤーに人気を集めています。その一例が、プレイヤーに没入型でインタラクティブなゲーム体験を提供する日本の市場志向のオンラインカジノ、ライブカジノハウスです。オンラインカジノブランドレビュー関連ページで調べる通り、ライブカジノハウスは、日本の文化と技術の要素を取り入れることで、ライブカジノの伝統的なコンセプトを次のレベルに引き上げます。伝統的な日本の衣装を着たライブディーラーから高度なバーチャルリアリティテクノロジーまで、ライブカジノハウスはプレイヤーにユニークなゲーム体験を提供します。イノベーションと顧客満足に重点を置いているライブカジノハウスは、日本市場で大きな支持を得ています。その成功は、日本のオンラインカジノ業界の可能性を浮き彫りにし、多様な興味や好みに応えるために継続的に進化している様子を示しています。より多くの日本のプレーヤーがエンターテインメントのニーズのためにオンラインカジノに目を向けるにつれて, ライブカジノハウスや他の日本の市場志向のオンラインカジノが、伝統的なカジノ体験の限界を押し広げ続ける様子を見るのはエキサイティングです。 GitHubと同じようなソースコード管理サービスとしては、BitbucketやGitLabなどがあります。それぞれのサービスとの違いをもとに、GitHubが人気な理由を見ていきましょう。理由1：無料のプライベートリポジトリソースコードを管理する単位をリポジトリと呼びます。リポジトリは格納場所という意味で、他の利用者にも公開されるパブリックリポジトリと、公開が関係者だけに限定できるプライベートリポジトリがあります。ソースコードを公開したくない場合は、プライベートリポジトリを選択する必要がありますが、以前はGitHubは有料、BitbucketやGitLabでは無料という状況でした。しかし2020年4月から、GitHubでも無料のプライベートリポジトリを無制限に作成可能になりました。これによりGitHubを使いたかったがソースコードは公開したくない個人や企業の利用が大幅に増え、さらにGitHubの人気が高まる状態となりました。理由2：オープンソースコミュニティに育まれたSNS機能オープンソースとはソースコードが公開されており、誰でも無料で利用できるソフトウェアのことを指します。また、オープンソースコミュニティとは、オープンソースの開発者同士の集まり、結びつきのことです。 GitHubでは以前から多くのオープンソースが管理されており、たくさんのオープンソースコミュニティが形成されています。このオープンソースコミュニティに育まれる形で、GitHubには以下のような機能が充実しており、コミュニティが開発を行いやすくなっています。コミュニティの中で誰がどのぐらい貢献しているかを可視化する機能（スター、貢献度）開発メンバーの知見を共有する機能（Wiki、GitHub Pages）ソースコードの更新などに関する議論をやりとりする機能（Issues、Codeとの連動）単にソースコード管理サービスとしての機能だけを捉えると、実はGitHub、Bitbucket、GitLabとも大きな違いはありません。しかしこのような開発しやすい環境を支援する機能という点では、GitHubが頭一つ抜けている印象を持ちます。理由3：先進的な機能の拡充 GitHubは2018年にMicrosoft社に買収され、傘下の一企業となりました。 Microsoft社は買収後もGitHubを独立企業として維持する意向を示しており、両社はオープンソースコミュニティにとっても良好な関係となっています。このような環境の中から、以下のような先進的な機能が次々と誕生しています。世界中のエンジニアに人気のあるMicrosoft社のフリーのソースコード編集ソフト「Visual Studio Code」をオンラインで利用できる「Codespaces」オープンソースコミュニティに開発者としてではなく、資金提供者として参加できる「Sponsors」機能ソフトウェアの開発から公開までの一連の流れをサポートする「GitHub Actions」これら先進的な機能は類似のソースコード管理サービスにはないものであり、開発者にとってGitHubを選ぶ理由の1つとなっています。 GitHubのアカウント登録それではさっそくGitHubに登録してみましょう。まずは、GitHubのトップページにアクセスします。ここでメールアドレスを入力し、緑色の「Sign up for GitHub」ボタンをクリックします。次の画面でUsername（ユーザー名）やPassword（パスワード）を入力します。下の方にある「Pick the spiral galaxy」は、不正なユーザー登録を防ぐための仕組みです。クイズになっており渦巻状の銀河の絵を数回選択します。なお、このクイズは定期的に変わるようです。決められた回数、クイズに正解すると「Create account」ボタンを押せるようになります。ボタンを押して次に進みましょう。このような画面になります。登録したメールアドレスに認証のメールが届きます。メールの内容に従いユーザー認証を行ってください。以上でGitHubのアカウント登録は完了です。大石ゆかり GitHubの登録はできました♪それで、どうやって使うんですか〜？田島悠介その前にいくつか知っておいたほうがいいことがあるから、教えておくね。大石ゆかりはい、お願いします♪ [PR] Webデザインで副業する方法とはGitHubを使う上で知っておきたい事前知識早速GitHubを使っていきたいところですが、使い始める前に知っておきたい事前知識を3つ紹介します。ここで紹介する言葉がまったくわからない場合は、理解しておきましょう。事前知識1：ローカルリポジトリとリモートリポジトリ事前知識2：コミットとプッシュとは事前知識3：ブランチ（branch）とは事前知識4：インデックス（index）とは事前知識1：ローカルリポジトリとリモートリポジトリリポジトリとは、ファイルやディレクトリの状態を保存する場所です。変更履歴を管理したいディレクトリなどをリポジトリの管理下に置くことで、そのディレクトリ内のファイルなどの変更履歴を記録することができます。リポジトリは自分のマシン内にある「ローカルリポジトリ」とサーバなどネットワーク上にある「リモートリポジトリ」の2カ所にあります。基本的にローカルリポジトリで作業を行い、その作業内容をリモートポジトリへプッシュする流れで行います。事前知識2：コミットとプッシュとは最低限この2つは知っておきましょう。コミット(commit) ファイルの追加や変更の履歴をリポジトリに保存することプッシュ(push) ファイルの追加や変更の履歴をリモートリポジトリにアップロードするための操作事前知識3：ブランチ（branch）とはソフトウェアの開発では、現在リリースしてるバージョンのメンテナンスをしながら新たな機能追加やバグ修正を行うことがあります。このような、並行して行われる複数のバージョン管理を行うために、Gitにはブランチ（branch）という機能があります。ブランチは履歴の流れを分岐して記録していくものです。分岐したブランチは他のブランチの影響を受けないため、同じリポジトリ内でそれぞれの開発を行っていくことができます。事前知識4：インデックス（index）とはリポジトリ管理下にあるディレクトリの中には、一時的に使うファイルなど、Git管理が不要なものもあります。そこでGitでは、バージョン管理する対象のファイルやフォルダを「インデックス」と呼ばれる台帳に登録することで、必要なもののみバージョン管理が行えるようになっています。逆に言えば、新たにフォルダやファイルを作成した場合、コミットする前にインデックスに登録する必要があります。忘れないようにしましょう。 GitHubの使い方それでは使い方を覚えていきましょう。基本的なGitの作業は下記のような流れとなるので、GitHubを使って順番に紹介します。なお、「1」の作成は初回のみ行い、「2」から「5」を繰り返します。基本的に小さい作業の単位でコミットを行い、ある程度作業がひと段落した時にプッシュをするのが一般的です。コミットの作業がわかりやすいように、コミットメッセージを残しておくと、ログを追っていく時に役立ちますので覚えておきましょう。 Githubでリポジトリを作成（git init）ファイルの作成、編集を行うファイルの作成/変更/削除をgitのインデックスに追加する（git add）変更結果をローカルリポジトリにコミットする（git commit）ローカルリポジトリをプッシュしてリモートリポジトリへ反映させる（git push） GitHubでリポジトリを作成（git init）まずはリポジトリを作成します。 GitHubにログインした状態で以下にアクセスします。 https://github.com/new 次に表示される画面では、「Repository name」の入力のあと、必要に応じて「Description」も入力します。また、リポジトリの種類を「Public」か「Private」を選択します。ソースコードを公開したくない場合は「Private」を選択すると良いでしょう。最後に、リポジトリの中にあらかじめREADMEファイルを作成しておく場合は「Initialize this repository with a README」にチェックを入れます。 .gitignoreやlicenseについては後で追加や変更ができるので、Noneを選択します。必要項目の入力が終わり「Create repository」ボタンをクリックするとリポジトリの作成は完了です。次の画面で、リモートリポジトリのアドレスが表示されますので、控えておいてください。ファイルの作成、編集を行うはじめに、ローカルのPC上にローカルリポジトリを作成します。今回は「awesome」というディレクトリを作成することにします。以下の操作はWindowsであればPowerShell、Macであればターミナルで行います。コマンドは1行ずつ、最後にEnterキーを押して入力しましょう。 mkdir awesome cd awesome git init 「mkdir」は新しくディレクトリを作成するコマンドで、「cd」はディレクトリを移動するコマンドです。 awesomeというディレクトリを作成し、そのディレクトリに移動してから作業が始まります。そして、この「git init」コマンドはGitリポジトリを新たに作成するコマンドです。バージョン管理を行っていない既存のプロジェクトをGitリポジトリに変換する場合や、空の新規リポジトリを作成して初期化する場合に使用します。 git initコマンドを実行するとカレントディレクトリをGitリポジトリに変換します。次に、テキストエディタなどで以下のHTMLファイルを作り、先ほどのawesomeフォルダに「hello.html」という名前で保存しましょう。現在の状態を確認しましょう。 git status 結果は以下のようになります。 hello.htmlが「Untracked files」、つまりインデックスに登録されていないファイルとして表示されています。 On branch master Untracked files: (use "git add <file>..." to include in what will be committed) hello.html ファイルの作成/変更/削除をgitのインデックスに追加する（git

Git

HTMLのフォルダ・ディレクトリ構造を現役エンジニアが解説【初心者向け】

HTMLのフォルダ・ディレクトリ構造について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。そもそも、HTMLの記述方法がわからない場合は、 HTMLの書き方について解説した記事を読むとさらに理解が深まるでしょう。なお本記事は、TechAcademyのオンラインブートキャンプWebデザイン講座のHTMLカリキュラムをもとに執筆しています。田島悠介今回は、HTMLに関する内容だね！大石ゆかりどういう内容でしょうか？田島悠介フォルダ・ディレクトリ構造について詳しく説明していくね！大石ゆかりお願いします！目次ディレクトリとはディレクトリ構造とファイルパスファイルの種類とディレクトリ配置ディレクトリを作ってみようディレクトリとはディレクトリとは、パソコンのフォルダと同義です。パソコンのフォルダには、テキストファイルやバイナリファイルなどのファイルを入れられます。またフォルダの中に複数のフォルダを作成している場合も少なくありません。 unixやmacでは、ターミナルにコマンドを打ち込み、新しいフォルダを作ることが可能です。その場合には、mkdirコマンドを使い、mkdir「Make　ディレクトリ」＝ディレクトリを作るという意味のコマンドを使いましょう。そのため、unix環境などではフォルダのことをディレクトリと呼んでいます。ディレクトリの中にさらにディレクトリを作ることもでき、ディレクトリはOSの中でツリー上の階層構造として記録されることになるでしょう。 [PR] Webデザインで副業する方法とはディレクトリ構造とファイルパス windows環境ではフォルダをダブルクリックをすると、中のフォルダやファイルを確認できます。ディレクトリの構造から見ると、ディレクトリがツリー状になった階層構造の下位のディレクトリを参照しています。また、ツリーの構造の一番上は、windowsの場合はcドライブです。 macの場合にはMacintochHDがそれにあたり、一番上の階層から下位の階層を見ていく形式です。下位にある特定のファイルにアクセスする場合には、ディレクトリ名とファイル名の連ねた「ファイルバス」で指定しています。マウス操作ではなくターミナルから特定のファイルにアクセスしたい場合にはファイルパスを打ち込みます。 windowsの場合にはcドライブからフォルダ名を連ねているため、下記のようにパス名で特定のファイルがある場所を表しましょう。「c:¥フォルダ名¥フォルダ名￥ファイル名.txt」また、unix環境の場合には、パス名でファイル場所を表しています。「/Users/フォルダ名/フォルダ名/ファイル名.txt」ファイルの種類とディレクトリ配置ファイルの種類は大きく分けて２種類しかありません。テキストファイルとバイナリファイルです。テキストファイルにはファイル名の末尾が.txtや.csvという拡張子になっているものなどが代表例です。対して、バイナリファイルは下記のようにそれぞれデータ形式が違います。画像ファイル動画ファイル音声ファイルそのため、どのようなファイルなのかを判断するには各拡張子を確認する必要があります。これらのファイルはディレクトリに入れることになるもの、ファイルの構造を意識して配置しなければなりません。一番上の階層を「ルート階層」と呼び、その直下の階層が第一階層、さらにその下の階層が第二階層となります。ディレクトリを作ってみようディレクトリはマウス操作の右クリックなどでも作成できるものの、今回はプログラミングコードを記述して作成しましょう。 windowsのコマンドプロンプトなどのターミナルを開きます。現在の開いているディレクトリを確認するために下記のように入力しましょう。 pwd その際、下記のようにディレクトリ名が分かります。 /Users/test1/test2 test2のような末尾に表示されている表記が現在開いているのディレクトリ名です。これをカレントディレクトリと呼び、カレンディレクトリの直下に新しいディレクトリを作成します。 mkdir test3 このように実行すると、test2の下の階層にtest3のディレクトリが作成されています。確認するためには以下のコマンドを実行します。 ls 以下のように返ってきていればディレクトリの作成は成功です。「/Users/test1/test2/test3」執筆してくれたメンター木村勇土 TechAcademyの現役メンター。現在は行政書士事務所を運営しており、お客様にはプログラマーやフリーランサーも多い。 WordPressを中心とした自社のWebサイトの修正などを行なっている。大石ゆかり HTMLのフォルダ・ディレクトリ構造がよく分かったので良かったです！田島悠介ゆかりちゃん、これからも分からないことがあったら質問してね！大石ゆかり分かりました。ありがとうございます！ TechAcademyでは初心者でも、オリジナルWebサイトを公開できるオンラインブートキャンプを開催しています。また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。

HTML

Python別ファイルを読み込む方法を現役エンジニアが解説【初心者向け】

Python別ファイルを読み込む方法について解説します。そもそもPythonについてよく分からないという方は、Pythonとは何なのか解説した記事を読むとさらに理解が深まります。なお本記事は、TechAcademyのオンラインブートキャンプPython講座の内容をもとに紹介しています。田島悠介今回は、Pythonに関する内容だね！大石ゆかりどういう内容でしょうか？田島悠介 Python別ファイルを読み込む方法について詳しく説明していくね！大石ゆかりお願いします！同階層のファイルをimportする Pythonで他のファイルに記述してある関数を利用するにはimportを使用します。importの書き方は以下のとおりです。 import ファイル名ファイル名には拡張子「.py」は必要ありません。importしたファイルに含まれている関数は以下のように使用します。ファイル名.関数名 fromを使用してファイル名を指定すると、関数名を直接記述することが出来ます。プログラムの中で多く使う関数の場合に便利です。 from ファイル名 import 関数名同階層のディレクトリ内のファイルをimportする同階層のディレクトリにあるファイルをimportするにはfromでディレクトリ名を指定します。 from ディレクトリ名 import ファイル名ファイル名まで指定するにはディレクトリ名とファイル名をピリオド「.」でつなぎます。 from ディレクトリ名.ファイル名 import 関数名 [PR] Webデザインで副業する方法とは上の階層のディレクトリにあるファイルをimportする上の階層のディレクトリにあるファイルをimportするには一工夫必要です。 sysライブラリのappend関数を利用してファイルを検索する対象に上の階層も加えます。「../」はひとつ上の階層という意味です。ふたつ上の階層の場合は「../../」のように指定します。 import sys sys.path.append('../') import ファイル名実際に書いてみよう今回のサンプルプログラムは、以下のようなディレクトリ構成になっています。[…]はディレクトリを表します。 [test] parent_lib.py [src] main.py main2.py [subdir] sub_lib.py それぞれのファイルの内容は以下の通りです。 parent_lib.py def func_parent(): print("親ディレクトリの関数です！") sub_lib.py def func_sub(): print("子ディレクトリの関数です！") main.pyは、ディレクトリ名まで指定した方法です。 # 同階層のファイル import current_lib current_lib.func_current() # 同階層のディレクトリ内のファイル from subdir import sub_lib sub_lib.func_sub() # 上の階層のディレクトリにあるファイル import sys sys.path.append('../') import parent_lib parent_lib.func_parent() 実行結果は以下のようになります。親ディレクトリの関数です！同じディレクトリの関数です！子ディレクトリの関数です！ main2.pyは、ファイル名まで指定した方法です。 # 同階層のファイル from current_lib import func_current func_current() #

Python

今さら聞けない！ターミナルの使い方【初心者向け】

Mac OSを使っていると、システム環境設定などでは設定することができない、高度な設定をしたいと思う場合があるかと思います。そのようなカスタマイズをおこなうためには、Mac OSのターミナルという機能を使う必要があります。また、ターミナルはプログラミングをする際にも利用します。そこで今回は、初心者向けにターミナルの利用方法を紹介します。なお本記事は、TechAcademyのWebアプリケーションオンラインブートキャンプの内容をもとに紹介しています。なお、今回の記事の内容は動画でもご覧いただけます。テキストよりも動画の方が理解しやすいという場合はぜひご覧ください。目次本記事は、下記の流れで説明します。主要コマンドも紹介しているので、記事を読んだらすぐに使ってみてください。ターミナルとはターミナルの使い方ターミナルの主要コマンドターミナルとはターミナルとは、コマンドと呼ばれる命令文を用いてMacの操作や設定をおこなうためのツールです。通常は利用する必要はありませんが、高度な設定をする場合や、Macでプログラミングをおこなう場合には利用する必要があります。 Windowsにおけるコマンドプロンプトと呼ばれているものとほぼ同じものです。ターミナル上では、マウスやトラックパッドを用いて操作するのではなく、キーボードで「コマンド」と呼ばれる命令を入力することによって操作します。この記事では、ターミナルの基本的な使い方や、よく利用されるコマンドについてまとめています。 [PR] Webデザインで副業する方法とはターミナルの使い方ターミナルは、「アプリケーションフォルダ」内の「ユーティリティフォルダ」にインストールされています。起動すると、次のような真っ白な画面が表示されると思います。しばらくすると時刻などが表示されますので、それまで待ちましょう。このとき表示されている文字の意味は、次の通りです。ログイン日時：ターミナルを起動した日時、1行目に表示コンピュータ名：コンピュータの名前、2行目前半に表示ディレクトリ：現在のディレクトリの位置、2行目後半に表示 ※この画像では個人情報が含まれるために上記の情報は消していますが、実際は画像中赤文字の上にこれらの情報が表示されますディレクトリとは、「Finder」で言うところの「フォルダ」と同じものです。例えば、先ほどの画像で示したターミナルで開いているディレクトリは、個人情報なため、ここでは白で隠してありますが、Macのユーザ名と同じ名前のディレクトリです。 Finderですと、次のようにフォルダに該当します。（左側のメニューから、自分のユーザ名と同じフォルダを開いています）このように、ターミナルは特定のディレクトリについて操作をおこなうツールになります。そのため、特定のファイルに対して操作をおこないたい場合、そのファイルが存在するディレクトリに移動してから操作する必要があります。（詳しくは「コマンドの使い方」にて記載します）ターミナルの設定は、通常のアプリケーションと同じく、上部バーの「ターミナル」内にある「環境設定」からおこなえます。背景や文字の色を変えたい場合は、この環境設定中にある「プロファイル」から変更することができます。ここでは、あらかじめ用意されているいくつかの配色パターンから、背景色や文字の色を選ぶこともできます。例えば、この画像中にある「Homebrew」を選択すると、ターミナルは次のように変わります。また、これらの配色は自分の好きな色にカスタマイズすることもできます。カスタマイズする場合は、同じくプロファイルの左下にある「+」ボタンから、新しいプロファイルを作成し、右側の「テキスト」や「ウィンドウ」のタブを切り替えながら、色などを選択します。ターミナルの主要コマンド基本的な設定がわかったら、ターミナルのコマンドを覚えていきましょう。今回は、ターミナルでよく利用するコマンドを11個紹介していきます。全てのコマンドは、入力した後にEnterを押すことによって実行されます。 cd ディレクトリ間を移動する場合に使用します。「ターミナルの使い方」でも述べたとおり、ターミナルでは1つのディレクトリしか開くことができません。そのため、他のディレクトリにあるファイルを操作したい場合は、そのディレクトリまで移動する必要があります。（パスを指定する方法もありますが、ここでは割愛します）このディレクトリの移動に用いるコマンドが「cd」コマンドです。「cd ディレクトリ名」と入力して実行します。例えば、現在のディレクトリ中にある「Documents」ディレクトリへ移動したい場合は、「cd Documents」と入力します。このとき、もし入力したディレクトリが存在しない場合は、「No such file or directory」というエラーが出ます。また、現在のディレクトリよりも1つ上のディレクトリへ移動したい際は、「cd ../」と入力します。これらのディレクトリ名は、連続で入力することもできます。例えば、Documentsディレクトリ内にあるtextディレクトリを開きたい場合は、「cd Documents/text」と入力すると移動できます。 ls 現在のディレクトリ内に存在する、ディレクトリやファイルを表示するコマンドです。このコマンドは「ls」のみで実行します。例えば、先ほど画像で示したユーザ名のディレクトリですと、この図のように表示されます。（ユーザー名は白で隠してあります） Finderのフォルダと比較すると、全く同じ名前のディレクトリを表示していることが分かるかと思います。先ほど紹介したcdコマンドでディレクトリを移動する際は、このlsコマンドで事前に移動したいディレクトリが存在するか確認すると便利です。 mkdir ディレクトリを作成するためのコマンドです。「mkdir 作成したいディレクトリ名」で実行します。例えば「mkdir AAA」と入力し実行すると、AAAというディレクトリが作成されます。 rm ファイルを削除するコマンドです。「rm ファイル名」で実行します。このコマンドで削除したファイルはゴミ箱には入らず、また警告等も出ませんので、十分注意して実行するようにしてください。誤って重要なファイルを削除してしまった場合、コンピュータが起動しなくなる可能性もあります。 mv ファイルやディレクトリの名前を変更する場合や、移動する場合に利用します。用途が2つあるので紛らわしいのですが、どちらの場合も「mv AAA BBB」のように入力して実行します。 AAAとBBBは、ファイルまたはディレクトリの名前です。このコマンドを実行した場合の動作は、このAAAとBBBによって、次のように異なります。 BBBというディレクトリが存在する場合は、AAAをBBBの中へ移動 BBBというファイルが存在する場合で、かつAAAがファイルの名前である場合は、BBBへ上書き保存 BBBが存在しない場合には、AAAをBBBという名前に変更 cp ファイルをコピーするコマンドです。「cp AAA BBB」と入力すると、AAAというファイルがBBBという名前でコピーされます。このとき、BBBというファイルが既に存在している場合は、BBBへ上書き保存します。また、BBBがディレクトリの名前である場合は、BBBディレクトリの中にAAAがコピーされます。 pwd 今開いているディレクトリまでのパスを表示します。ターミナルで今どのディレクトリを表示しているのか分からなくなったら、このコマンドを実行しましょう。このコマンドもlsと同様に、「pwd」のみで実行します。 man コマンドのマニュアルを開きます。マニュアルは英語ですが、各コマンドのオプションなどが表示されるので、1度は試してみましょう。「man マニュアルを開きたいコマンド名」で実行します。例えば、「man man」と入力した場合は、次のようにmanコマンドの利用方法が表示されます。このマニュアルを読んでいると、「OPTIONS」という項目があることが分かるかと思います。この記事では説明を割愛しましたが、多くのコマンドにはオプションと呼ばれる機能を付加して実行することができます。例えばmvやcpコマンドで「-n」オプションを付けて実行すると、上書き保存を防止することなどができます。特にプログラミングなどをターミナルでおこなう場合にはオプションもかなり利用することになると思いますので、こちらのmanコマンドでオプションの使い方などを一通り目を通してみましょう。このマニュアルは、終了する場合に「q」を入力します。 qを入力して終了しないと、次のコマンドを受け付けませんので注意しましょう。 find ファイルやディレクトリの検索に利用します。「find 検索する場所 -name 検索するファイル名」で実行します。「検索する場所」が分からない場合には、先ほどのpwdコマンドやlsコマンドを用いて、大体の目星を付けましょう。 clear ターミナル画面をクリアし、表示された文字を全て消去します。実行した内容が取り消される訳ではありません。同じコマンドを何度も実行する場合などは、どのコマンドをいつ実行したのかが分かりにくくなってしまいます。そのような場合はこのコマンドを実行し、一旦ターミナルを見やすくしましょう。このコマンドは「clear」のみで実行できます。 exit ログアウトする場合に用います。通常のターミナル利用では、ログアウトせずにターミナルを終了しても問題ありません。しかし、サーバ等に接続している場合は必ずこのコマンドでログアウトしてからターミナルを終了しましょう。このコマンドは「exit」のみで実行できます。 exitではなく、「logout」コマンドでもログアウトすることができます。さいごに今回の記事は以上です。ターミナルではかなり高度な設定や操作をおこなうことができます。しかし、コマンドを一度実行してしまうと、その操作を取り消すことはできません。 rmコマンドの欄にも記載しましたが、コンピュータ中の重要なファイルを消去してしまったり、破損させてしまったりした場合は、起動しなくなる場合も起こりえます。インターネット上では、ターミナルで実行できる様々なコマンドが紹介されていますが、どのような動作をするのか分からないコマンドは、十分に調べてから実行するようにしましょう。 [お知らせ]TechAcademyでは初心者でもエンジニアになれるオンラインブートキャンプを開催しています。各自にパーソナルメンターがつきます。また、現役エンジニアから学べる無料のプログラミング体験会も実施しているので、ぜひ参加してみてください。

プログラミング

これだけは覚えておきたい！基本的なUNIXコマンド20【初心者向け】

今回は、プログラミング初心者でも覚えておきたいUNIXコマンドを紹介します。プログラミングを学んでWeb開発する際に、WebサーバのOSとしてLinuxやUNIX系を利用することがあります。そのため、Web開発をするためにUNIXコマンドの知識が必要です。 Amazonが運営するAWSといったサービスやCloud9といったサービスでも、UbuntuやLinuxが利用されています。そのため、特定のOSで利用可能なコマンドです。また、Macのターミナルを扱う時も使用しますので、覚えておくと便利です。 WindowsでUNIXコマンドを利用できるので、コマンド操作に慣れることは実務においても技術的なレベルが上がります。そこでこの記事では、プログラミング初心者でも覚えておきたいUNIXコマンドを初心者向けに紹介します。目次ディレクトリ構成とはHTMLにとって理想的なディレクトリ構成とはSEO対策としてのディレクトリ構成を整えよう監修してくれたメンター UNIXコマンドとは UNIXコマンドとは、LinuxやUNIX系OSのWeb開発で利用するコマンドです。ウィンドウやボタン、アイコンといった視覚的なオブジェクトをマウスで操作するインターフェイスをGUI（Graphical User Interface）と呼びます。一方、文字入力によってコンピュータに命令を与えて操作するインターフェイスをCLI（Command Line Interface）、あるいはCUI（Character User Interface）と呼びます。「コマンド」とはコンピュータに指示する命令であり、CLI上で用いるプログラム／アプリケーションのことを指します。 UNIXに由来するコマンドを「UNIXコマンド」と呼称します。現在ではGUIがコンピュータを操作する手法として主流ですが、ある操作の結果を別の操作に用いたり、自動的に複数の操作を行ったりする場合など、CLIの方が適している作業が多く存在します。 Windows10でUNIXコマンドを利用する方法 2021年3月現在の最新バージョンのWindows10では、WSL（Windows Subsystem for Linux）を有効化することでUNIXコマンドを利用できます。コントロールパネルプログラムプログラムと機能 Windowsの機能の有効化または無効化上記の順に選択をして、「Linux用 Windows サブシステム」をチェックしてください。コントロールパネルを開いてプログラムを選択する画面プログラムを選択してWindowsの機能の有効化または無効化を選択する画面 Linux用Windowsサブシステムを選択してOKを押してください。 Microsoft StoreでUbuntuをインストール Microsoft StoreをWindowsで起動します。 Ubuntuを検索して出てきた表示の入手をクリックしてUbuntuをインストールします。インストールにはしばらく時間が必要です。インストールが完了したら起動ボタンを押してください。 Windows上で初期設定を行うための起動が始まります。初回のみ起動時間が必要です。ユーザー名とパスワードを設定すると完了です。パスワードは設定用と入力用に同じものを2回入力する必要があります。設定が完了したら、UNIXコマンドの入力が可能になります。 [PR] Webデザインで副業する方法とは覚えておきたいUNIXコマンド20 ここからは主要なUNIXコマンド20選を紹介します。いずれもMacのターミナルで入力した例を画像で表示しているので、ぜひ自分のPCでも試してみてください。ディレクトリとファイルの確認、移動に使うコマンド pwd 現在の作業ディレクトリの絶対パスを表示します。なお絶対パスとは、最上位階層から目的のファイルやフォルダまでの道筋を省略なく記述する方式のことです。一方の相対パスは、起点となる現在位置から目的のファイルやフォルダまでの道筋を記述する方式です。入力例： pwd 現在どのディレクトリにいるのかを確認するときに使います。 cd 作業ディレクトリを変更するコマンドです（ディレクトリを移動します）。入力例： cd (ディレクトリ名) cdだけで実行するとホームディレクトリへ移動します。「cd -」とすると、直前にいたディレクトリへ移動します。「cd ..」とすると親ディレクトリへ移動します。 ls ディレクトリの内容をリスト表示するコマンドです。入力例： ls (ディレクトリ名) lsだけで実行すると、現在のディレクトリに含まれるファイル名をリスト表示します。ディレクトリを指定すると、そのディレクトリに含まれるファイル名をリスト表示します。また、「ls -l」でパーミッションや所有者などの関連情報を付加して表示、「ls -a」で隠しファイル・隠しフォルダを含めて表示することが可能です。ディレクトリとファイルの操作で使うコマンド cp ファイルをコピーするコマンドです。入力例： cp (ファイルA) (ファイルB) この場合ファイルAをファイルBにコピーします。また「-f」オプションをつけた場合、コピー先に同名のファイルがあった場合上書きされます。「-i」オプションをつけた場合は上書きするかどうかをファイルごとに確認します。なおディレクトリを内容ごと（再帰的に）コピーするときは、「-R」オプションをつけます。 mv ファイルの移動およびリネームを行うコマンドです。入力例： mv (ファイルA) (ディレクトリB) mv (ファイルA) (ファイルB) 1つめの例では、ファイルAをディレクトリBに移動します。 2つめの例では、ファイルAからファイルBに名前を変えることができます。 cpコマンドと同じように、「-f」オプションをつけた場合、移動先に同名のファイルがあった場合は上書きされます。「-i」オプションをつけた場合は、上書きするかどうかを確認します。 rm ファイルを削除するコマンドです。入力例： rm (ファイル名) ディレクトリを削除する場合は「-d」オプションを指定しますが、削除できるのは空のディレクトリだけです。ディレクトリに内容物がある場合は「-r」オプションを指定することで、中に入っているファイルを含めてディレクトリを削除します。ゴミ箱へ入れるのではなく、即座に削除されることに注意してください。 mkdir ディレクトリを作成するコマンドです。入力例： mkdir (ディレクトリ名) 通常、指定したパスの途中のディレクトリが存在しない場合はエラーになります。「-p」オプションをつけると、途中のディレクトリが存在しない場合、それらを含めてディレクトリを作成することが可能です。 touch ファイルの変更日を更新するコマンドです。入力例： touch (ファイル名) 「touch file1.txt」とすると、「file1.txt」の変更日時が更新されます。存在しないファイル名を指定した場合、その名前で空のファイルが作成されます。 ln リンクを作成するコマンドです。入力例： ln -s (ファイル名) (リンク名) 「-s」オプションを付けることで、シンボリックリンクを作成します。シンボリックリンクは、ディレクトリやファイルのショートカットとして用いられます。 chmod ファイルのパーミッション（所有権）を変更します。入力例： chmod 750 (ファイル名) この入力例は、ファイル所有者にすべての権限を与え、グループに読み込みと実行権、その他のユーザーは権限なしにするコマンドです。パーミッションは「mode」引数に8進数字あるいは記号で指定します。上記の入力例は8進数字の指定です。 8進数字指定する場合は、3桁の値で指定します。 1桁目が「ファイル所有者」のアクセス権、2桁目が「グループ」のアクセス権、3桁目が「その他のユーザー」のアクセス権です。各桁の値は、読み込み権を表す4と、書き込み権を表す2と、実行権を表す1の和を指定します。例えば、読み込み権と実行権のみを与える場合には、4と1の和である「5」を指定します。それぞれの権限の組み合わせと値は、下記の表をご覧ください。アクセス権値 0 権限なし 1 実行権 2 書き込み権 3 書き込み権と実行権 4 読み込み権 5 読み込み権と実行権 6 読み込み権と書き込み権 7 すべての権限また、記号で指定する場合は、以下の記号を組み合わせてパーミッションを指定します。 chmod a+w (ファイル名) この入力例の場合、すべてのユーザーに書き込み権限を付加します。記号誰に a すべてのユーザ u 所有者 g グループ o 他のユーザ記号付加・除去 + 付加 – 除去 = 全クリア記号権限の種類 r 読み w 書き x 実行 chown ファイル・ディレクトリの所有者とグループを変更します。入力例： chown (ユーザー名) (ファイル名) この例では、指定したファイルの所有者を指定したユーザーに変更します。なお、ファイルの所有者とグループはファイルのパーミッション範囲に関係してきます（あるユーザーのみアクセス可能など）。所有者の変更はスーパーユーザーのみ可能です。 chgrp ファイルのグループを変更します。入力例： chgrp (グループ名) (ファイル名) この例では、指定したファイルの所属グループを変更します。 chownと同じく、グループはファイルのパーミッション範囲に関係してきます（あるグループに属しているユーザーのみアクセス可能など）。ファイル内容の表示、閲覧するときに使うコマンド cat ファイルの内容を結合し、表示するコマンドです。入力例： cat (ファイルA) (ファイルB) 複数ファイルの内容を結合して表示します。ファイルを1つだけ指定して、単にその内容を表示する場合にも使用可能です。 less ファイルの内容をスクロール可能な状態で表示するコマンドです。入力例： less (ファイル名) ファイル内容を一画面しか見ることができない（スクロールできない）catコマンドとは異なり、スクロール可能な状態で表示するコマンドです。 qを入力すると表示が終了します。ファイルの検索で使うコマンド find ファイルを検索するコマンドです。入力例： find (ディレクトリ名) find (ディレクトリ名) -name (文字列) 1つめの入力例では、ディレクトリ内にあるファイルを表示します。 -nameを付けることで、ディレクトリ内にある文字列を指定して検索できます。また「find . -ctime -1h」とすると、現在のディレクトリ以下で1時間以内に変更のあったファイルを検索します。 grep 指定パターンの文字列を検索するコマンドです。入力例： grep (検索文字列) (ファイル名) 例えばgrep ba

プログラミング

Pythonで親ディレクトリからファイルをインポートする方法を現役エンジニアが解説【初心者向け】

Pythonで親ディレクトリからファイルをインポートする方法について解説します。そもそもPythonについてよく分からないという方は、Pythonとは何なのか解説した記事を読むとさらに理解が深まります。なお本記事は、TechAcademyのオンラインブートキャンプPython講座の内容をもとに紹介しています。田島悠介今回は、Pythonついての内容だね！大石ゆかりどういう内容でしょうか？田島悠介 Pythonで親ディレクトリからファイルをインポートする方法を解説していくね！大石ゆかりお願いします！ Pythonファイル（モジュール）のインポートとは Pythonには便利なライブラリが多くあります。それは自由に組み込んで自分のアプリケーション開発で使用できます。そのライブラリやモジュールは、「import」使うことで読み込むことができます。また、自身で作ったモジュールなども読み込むことができます。カレントディレクトリ、親ディレクトリ、サブディレクトリ（子ディレクトリ）とはモジュールは別ファイルや別ディレクトリに格納しているケースが多いです。そのため、最初にカレントディレクトリ、親ディレクトリ、サブディレクトリ（子ディレクトリ）の違いを理解しておきましょう。カレントディレクトリカレントを英語に翻訳すると「current」になり、「現在の~」という意味です。つまり、カレントディレクトリ = 現在のフォルダを意味します。親ディレクトリ親ディレクトリとサブディレクトリを理解するには、箱をイメージしてください。親ディレクトリは箱です。サブディレクトリは親である箱に入っている、さらに小さな箱です。開発時には、ファイルをグループ分けするためにディレクトリにまとめます。それを繰り返すことで、階層構造になります。サブディレクトリ親ディレクトリの説明とかぶりますが、親ディレクトリの中にあるディレクトリがサブディレクトリ（子ディレクトリ）です。 [PR] Webデザインで副業する方法とは親ディレクトリからファイルをインポートする方法自作のモジュールなどを、別の階層のディレクトリからimportしたいケースがあります。今回は親ディレクトリのファイルをimportする方法を紹介します。以下の構造を例に、sub_file.pyからfile1.pyをimportします。ファイル構造 my_directory/ ├── file1.py └── sub_directory ├── sub_file.py 上位ディレクトリから特定のファイルを読み込む方法 from .. import file1 ピリオドを追加すれば、さらに上の階層からimportできます。大石ゆかり内容分かりやすくて良かったです！田島悠介ゆかりちゃんも分からないことがあったら質問してね！大石ゆかり分かりました！ありがとうございます！ TechAcademyでは、初心者でもPythonを使った人工知能（AI）や機械学習の基礎を習得できるオンラインブートキャンプPython講座を開催しています。挫折しない学習方法を知れる説明動画や、現役エンジニアとのビデオ通話とチャットサポート、学習用カリキュラムを体験できる無料体験も実施しているので、ぜひ参加してみてください。

Python

記事を検索

ニュース

インタビュー

テクノロジー

キャリア

お問い合わせ

HTMLでSEO対策としてのディレクトリ構成を現役デザイナーが解説【初心者向け】

ディレクトリ構成とは