はじめてのWebサイト制作

(旧:Webサイトを作る「チェックリスト」)

　

はじめに

あくまで私が必要だと思っているものです…
これがあればWebサイトは作れるし、なくても作れるけど更にあっても作れます

　

機材

• パソコン (WIndows, Mac, Linux)
• インターネット環境
• Webサーバー(後述) コスト：0円

　

使うソフト (アプリ)

エディター

プログラミングをするメモ帳みたいなもの
メモ帳でも代用できなくはないが専用のライブラリが豊富なのでプログラミング用のエディターを強く推奨
Visual Studio Code (VScode), さくらエディタ, Atomなど (私はVSCodeを使っています)

FTPソフト

作成したWebページをWebサーバーにアップロードする
File Zilla, WinSCP, FFFTPなど (私はFile Zillaを使っていますが、好みでいいと思います)

ブラウザ

作成したWebサイトを確認する、確認しながら作るには必須
これなしでも理論上は作れるけどそんな事できる人はこのページを見なくてもなんでもできます
Google Chrome, Microsoft Edge, Safari, Firefoxなど (私はGoogle Chromeを使っていますが、好みでいいと思います)

　

デバッグ

サイトが正常に動くか確認する、特にiPadOSやiOSは正常に動作しないことが多い
iPad, Android, iPhone, Chrome, Edgeなど
Internet Explorer は確認してもいいけど、使えない機能が多すぎるのでそろそろ切り捨ててもいいかも…
(ごめんねIEくん)
私は半年前ぐらいに対応をやめましたが特に困っていません

　

Webサーバーについて

Webサイトは、Webサーバーというものから世界中に配信され、見ることができます。
簡単に言うと、インターネット上にパソコンがあって、そこにWebサイトのデータを保存したらブラウザからアクセスできるようになります。 ::: details 最近のデプロイ環境の変化 これを書いた当初はウェブサーバーを使う方法しか知らなかったのですが、
最近は公開のためにホスティングサービスというものを使うことも増えてきています。

Github.io や Vercel などのホスティングサービスを使うと、ある程度の誓約下であればサーバー代なしで使用可能です (商用利用不可など)
このサイトも、ホスティングサービスの一種である Cloudflare Pages によって公開されています
これらのことを踏まえて、ウェブサーバーを使いたいんだ！っていう場合しか書いていません…

時間ができた時にホスティングサービスの使い方についてページを作る予定です(時期未定) :::

　

無償サーバーと有償サーバー

サーバーにも無償で提供されているものと有償で提供されているものの2種類があります。
以下に違いをまとめました。

(あくまでわたしの感想で、これより快適なこともひどいこともあります)

基本的には、お試しで無償サーバーを使い、慣れてきたら、もっといろいろな機能が使いたくなったら有償サーバーにするのも選択肢の１つだと思います。

私は無償サーバーを使っていた頃は
忍者ホームページ→Starfreeでした。
現在は勉強代だと思って有償サーバーを契約しています。おすすめは、１意見ですが

• Conoha Wing (安定していて低コスト、制限もないのでお気に入り)
• スターサーバー (コストパフォマンスがそこそこ高い)
• ロリポップ (性能が低い分かなり定額からはじめられる) あたりを上げておきます。
  ですがこのあたりの状況はどんどん変わって行っているので、最新の情報ではないかもしれません。

　

おすすめの拡張機能 (VSCode)

これは最低限。

Live Server

下部分に「Go Live」というボタンが追加されて、押すと開いているフォルダーをそのままWeb上に上げたような仮想サーバーを立ち上げてブラウザで開いてくれます、Webサイトに変更があると自動で再読み込みが入るのでとても便利です。

HTML Snippets系

ソースコードの自動入力もどきや修正をしてくれる…
なぜ系なのかというと、大体のプログラミング言語でこういうのがあるので、1つづつ入れておくと便利という意味。

Path Intellisense

ファイルパスを指定する時に自動で一致するものを表示してくれる、ここに出ていないということはWebサーバーにアップロードしてもうまくいかない可能性が高い。

　

とても覚えておいてほしいこと

変数名には英語を使いましょう！

変数に、

などと書いてみてください。
プログラミング経験のある人は発狂するかその場でキレ散らかすと思います。

もしプログラミングを完全に個人でやる気ならまあいいのかもしれませんが、少しでも他の人と作る可能性がある場合は命名ルールは合わせたほうがいいです…

某全国規模のテストでは変数名ローマ字らしいですけどね()

他にも、

など、意味がわからないことになるので必ず変数名と中身は一致させましょう、お願いします

ブラウザの「開発者モード」をよく使おう

ログやエラーなどを確認するコンソール、
データベースなどを確認するアプリケーション、
CSSの状態を確認する要素
など、なくてはならないツールがたくさんあります

　

最後に

困ったときはググろう！！！

だれでも初心者です、私も初心者です。
わからないことは

• 公式のドキュメントを読み込む、
• グーグルで検索する、
• ブログ記事を読み込む(Qiita, Zenn, Stack Overflowなどは常連)

これでだいたいの事が解決します、
もし分からないことがあれば、あきらめずに調べるのがとっても大事！

けどそれで挫折してもしょうがないので、そうなるまえに身近の分かりそうな人に聞いてみるのもいいのかも。
分かった！ときの楽しさはそれはもうハッピー幸せなものになるでしょう。

見に来てくれてありがとう！またね！