「プログラミングを学びたい」と思っている人が、現在この記事を閲覧していると思います。
中には、スクールや専門学校を検討し、入学・勉強等を考えている人がいるかも知れません。
実際、プログラミングスクールに実際に通った筆者の感想から言うと、
「無理に多額のお金を払って、プログラミングスクールや専門学校に通う必要は一切ありません」
今回は、開発環境を最速で整える方法をお伝えします。
パソコンを準備する
当然のことですが、スマートフォンではプログラムの開発ができません。
PCがない人は、すぐに購入することをお勧めします。
オススメはimacです。画面が大きく、他のPCと比べても低コストで購入することができます。
windowsのPCでも構いませんが、開発をする上で効率が良いのは圧倒的にmacです。
コーディングの準備をする（サーバー、ドメイン、コード開発ソフトなど）
接続設定をする(ssh設定)
下の図を見てみましょう。
・クライアント＝自分のパソコン
・webサーバー＝書いたコードを反映させるもの(googleで閲覧できるページ)
としてそれぞれ考えてください。
普段からGoogleで検索して見ているページは、「サーバー」と呼ばれるハイスペックコンピューターで管理されています。
そのため、自分の作ったホームページや作品をweb上に公開する為には、作ったデータをサーバーに送る必要があります。
自分のPCからサーバーに情報を送るための設定を、ssh設定と呼びます。
VSC(Visual Studio Code)を使って、コードを書く準備をする
※右クリック(Macはcontrol+右クリック)で接続することもできます。
・「Connect to Host in Current Window」（現在のウィンドウのままサーバーに接続）
・「Connect to Host in New Window」（新しいウィンドウでサーバーに接続）
開くと、こんな画面になるはずです。
※この画面になってない人は、ファイルのマークをクリックしましょう。
今回、私は「yorozyadio.net」というドメインを使う為、これを選択。
皆さんは自分で決めたドメインがあるはずなので、自分のドメインをクリックしてください。
※ドメインの名前がない場合は、「ドメイン設定」というものができていません。
先にドメイン設定を行いましょう。（反映まで1時間〜24時間かかります。）
余談
一度開いたファイルは、今後はすぐに接続できるようになります。
（こっちの方が操作が楽なので、開き直しておくと良いと思います。）
VSC(Visual Studio Code)を見ながら、ホームページの中身を確認をする
次は、実際にどのように作品を公開すれば良いのか、それぞれファイルの中身を確認します。
自分のドメイン（私の場合は「yorozyadio.net」）のファイルを開くと、たくさんファイルが出てきます。
何もいじってなければ、画像と同じファイル名・ファイル数が表示されているはずです。
それぞれのファイルについて説明したいところですが、ぶっちゃけ他のフォルダは使いません。
「public_html」というフォルダのみ使うので、このファイルの名前だけ覚えておいてください。
public_htmlフォルダを開きます。
フォルダを開くと、このような４つのファイルが出てきます。
「.htaccesss」「.use.ini」ファイルについては、初心者は触る必要がありません。
そのまま放置しておいてください。
この「public_html」というフォルダは、ホームページでいうと「トップ画面」に当たります。
私の場合は、「yorozyadio.net」と調べると、この「pulic_html」の中にあるファイルを読み込みます。
皆さんの場合は、自分で決めたドメインの中にある「public_html」の中身を読み込みます。
…まあ、いまいちピンときませんよね。
では、実際に自分のドメインを検索して、今どのようになっているのかを見てみましょう。
「yorozyadio.net」で検索します。（皆さんは皆さんのドメインで検索してください）
すると、こんなページが表示されます。
まだ何もファイルを触ってないので、xserverの初期ページが表示されています。
さて、ここでもう一度VSC(visual studio code)に戻り、default_page.pngというファイルを見てみましょう。
明らかにこの画像が使われていますね。（笑）
そうです、「yorozyadio.net（自分のドメイン名）」は、この「default_page.png」という画像を読み込んでいます。
しかし、どうやって読み込んでいるのでしょうか？
VSC(Visual Studio Code)を見ながら、実際にコードを書いてみる
画像ファイルは、【”public_html”ファイルの中に突っ込めば反映される】というわけではありません。
基本的には、全てのファイルは「.html」という拡張子（語尾につく英語のこと＝ファイル形式とも呼ぶ）で管理されています。
今回は、index.htmlというファイルが、それに当たります。
この「index.html」が、画像を読み込んだり、文字を反映したりしています。
何やら難しそうな言葉が色々並んでいますが、覚えてしまえばなんのことはありません。
dio blogの記事を読めば、気づいたらコードが書けるようになっているので、焦らず落ち着いて確実に一歩ずつ進めましょう。
さて、ここまでなんとなく理解できたでしょうか？
「なんとなく理解した」で大丈夫です。
まだ記憶が曖昧な人は、このページをブックマークしておいてください。
ただ、多分、序盤以外で読み返すことはないでしょう。
なぜなら、量で体に染み込ませるからです（笑）
コーディングは、量と経験と探索力が重要なのです。
なので、コピペしても何もいいことはありません。
全てにおいて、必ず手打ちしてください。
慣れるまでは、絶対に手打ちしてください。
大事なことなので２度言いました。（笑）
それでは、プログラマーの第一歩目、
「文字を入れる」
をやってみましょう。
まず手始めに、「index.html」「dafaule_page.png」を削除します。
…え、消していいの！？と思っているかもしれませんが、
はい、消してください。問題ありません。
macの人は「controlキー+右クリック」でメニューを開き、「完全に削除」を選択。
windowsの人は右クリック。
するとこの状態になるはずです。
さて、この状態で「yorozyadio.net(皆さんは自分のドメイン)」にアクセスしてみましょう。
あーあ、バグっちゃったよ…と思っているあなたは間違っています。
よく読んでください。
真ん中に「デフォルトドキュメント（index.html,index.html）等が存在しない。」と書かれてますよね。
なければ、作ればよいだけの話です。
「public_html」ファイルの上で、Mac＝(control+右クリック)、windows＝(右クリック)でメニューを開きます。
そして、一番上の「新しいファイル」を選択。
「index.html」とファイル名を打ち込み、Enterキーで確定。
index.htmlが復活しました。
※この時、必ず「public_html」ファイルの中に「index.html」ファイルが入っていることを確認してください。
場所がずれている場合は、マウスで右クリックで掴み、移動させることができます。
画像と同じになっていることを確認したら、もう一度自分のドメインURLで検索してみてください。
余談
当たり前かもしれませんが、更新ボタンでも大丈夫です。
毎回ドメインを打ち込む必要はありません。
というか自分のドメインは、時間短縮のためにブックマークしておいてください。
本当に余談です。
※画像の赤枠で囲っている部分で更新できます。
基本的に、プログラムを触って保存したときは、「キャッシュクリア」と呼ばれるものを行います。
これをしないと、変更した内容が変わらない可能性があります。
Macは、上記のバーの「開発→キャッシュを空にする」を選んでください。
windowsは、開いているものによって違うので、「キャッシュクリア windows」でググってください。
キャッシュクリアしたら、更新ボタンを押すと反映されます。
さて、何か変わりましたか？
真っ白。
当然です。
まだ「index.html」の中身は空です。
さあ、中身を入れてあげましょう。
まず、VSC（visual stadio code）を開いてください。
index.htmlファイルであることを確認して、「!」を半角で入力してください。
入力後、タブキー（→｜）を押してみてください。
なんかいっぱい出てきませんでしたか？
これはいわゆる「ショートカット」と呼ばれるものです。
htmlの雛形を一瞬で作ってくれます。
よく使うので覚えておきましょう。
※要注意①
すぐに反映されないことがあります。
表示が真っ白のままの人は、１〜３分ほど待ってみましょう。
基本的に、プログラムを触って保存したときは、「キャッシュクリア」と呼ばれるものを行います。
これをしないと、変更した内容が変わらない可能性があります。
Macは、上記のバーの「開発→キャッシュを空にする」を選んでください。
windowsは、開いているものによって違うので、「キャッシュクリア windows」でググってください。
キャッシュクリアしたら、更新ボタンを押すと反映されます。
お疲れ様でした！今回やったことのまとめ
さて、本日したことについておさらいしましょう。
①パソコンを用意
②VSC(visual studio code)のインストール
③xserverの契約
④ssh設定（xserverとvscの接続設定）
⑤ドメインをgoogleで検索
⑥xserverの重要ファイル「public_html」の中身の確認
⑦ドメインは、index.htmlファイルを読み込んでいる
⑧キャッシュクリア（キャッシュを空にする）について
⑨<body><~body>の間に文字を書いて、自分のURL(ドメイン)ページに表示
１つでもやり方や意味がわからないものがあれば、再度読んで復習しましょう！
次章は、タグ（<body>~</body>）について説明します！