プログラマー初心者向け…最速で開発準備を完了させる

「プログラミングを学びたい」と思っている人が、現在この記事を閲覧していると思います。

 

中には、スクールや専門学校を検討し、入学・勉強等を考えている人がいるかも知れません。

 

実際、プログラミングスクールに実際に通った筆者の感想から言うと、

 

「無理に多額のお金を払って、プログラミングスクールや専門学校に通う必要は一切ありません」

 

 

dio blog では、プログラミングスクールで学ぶ内容独学で勉強することができます。

 

今回は、開発環境を最速で整える方法をお伝えします。

 

パソコンを準備する


当然のことですが、スマートフォンではプログラムの開発ができません。

 

PCがない人は、すぐに購入することをお勧めします。

 

オススメはimacです。画面が大きく、他のPCと比べても低コストで購入することができます。

 

windowsのPCでも構いませんが、開発をする上で効率が良いのは圧倒的にmacです。

 

パソコンを用意しましょう。(imac推奨)

コーディングの準備をする(サーバー、ドメイン、コード開発ソフトなど)


実際にコードを書く環境を整えましょう。
扱うコードによって、用意するものが基本的に違います。
dio blogは、xservervsc(Visual Studio Code)を使用することをオススメしています。
理由は別の記事でご紹介しているので、気になる方は閲覧してみてください。
※サーバーについてよくわからない方は、先に「3.接続設定をする(ssh)」の説明を見てください。

接続設定をする(ssh設定)


下の図を見てみましょう。

 

 

・クライアント=自分のパソコン

・webサーバー=書いたコードを反映させるもの(googleで閲覧できるページ)

 

としてそれぞれ考えてください。

 

普段からGoogleで検索して見ているページは、「サーバー」と呼ばれるハイスペックコンピューターで管理されています。

 

そのため、自分の作ったホームページや作品をweb上に公開する為には、作ったデータをサーバーに送る必要があります。

 

自分のPCからサーバーに情報を送るための設定を、ssh設定と呼びます。

 

自分の書いたコードをweb上で見れるようにする為には、ssh設定が必要。
VSC(Visual Studio Code)のssh設定については、こちらのページを参照してください。

VSC(Visual Studio Code)を使って、コードを書く準備をする


実際にコードを書いてみましょう。
まずはインストールしたVSC(Visual Studio Code)を開いてください。
その後、左下のパソコンのマークをクリックしてください。
先ほどssh設定したデータがここに登録されています。
※まだしてない人は以下からssh設定をしてください。
設定した名前にマウスを当て、右側のファイルマークをクリックすると、サーバーに接続できます。

 

※右クリック(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フォルダを開きます。

 

 

フォルダを開くと、このような4つのファイルが出てきます。

 

 

「.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の記事を読めば、気づいたらコードが書けるようになっているので、焦らず落ち着いて確実に一歩ずつ進めましょう。

 

 

 

さて、ここまでなんとなく理解できたでしょうか?

 

「なんとなく理解した」で大丈夫です。

 

まだ記憶が曖昧な人は、このページをブックマークしておいてください。

 

 

 

ただ、多分、序盤以外で読み返すことはないでしょう。

 

なぜなら、量で体に染み込ませるからです(笑)

 

コーディングは、経験探索力が重要なのです。

 

なので、コピペしても何もいいことはありません。

 

 

 

全てにおいて、必ず手打ちしてください。

 

慣れるまでは、絶対に手打ちしてください。

 

大事なことなので2度言いました。(笑)

 

 

 

それでは、プログラマーの第一歩目、

 

「文字を入れる」

 

をやってみましょう。

 

 

まず手始めに、「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の雛形を一瞬で作ってくれます。

 

よく使うので覚えておきましょう。

 

「!」+「タブキー(→|)」は、htmlの書き始めで頻繁に使う。
今回は、とりあえず書いてあることについて覚える必要はありません。
使うときに説明するので、今後ゆっくり覚えていきましょう。
さて、<body>~</body>で囲まれている隙間に、好きな文字を打ってみましょう。
「あ」でも「い」でも、なんでもいいです。
ただ、これがプログラマーの第一歩になるので、後悔しない文字を選んでください。
そして、この文字を打ち込んで保存した時、既に世界に公開されています。
何もしていないのでみる人はまずいませんが、見られている可能性もあると思ってください。
それでは、「comannd + s」で保存してください。
白丸がなくなれば、保存できています。
さて、自分のドメインにアクセスしてみましょう。
もう既に開いている人は、更新しましょう。

 

※要注意①

すぐに反映されないことがあります。

表示が真っ白のままの人は、1〜3分ほど待ってみましょう。

 

 

 

※要注意

基本的に、プログラムを触って保存したときは、「キャッシュクリア」と呼ばれるものを行います。

これをしないと、変更した内容が変わらない可能性があります。

 

Macは、上記のバーの「開発→キャッシュを空にする」を選んでください。

windowsは、開いているものによって違うので、「キャッシュクリア windows」でググってください。

 

キャッシュクリアしたら、更新ボタンを押すと反映されます。

 

 

 

私はマダオを世界に公開することにしました。

お疲れ様でした!今回やったことのまとめ

 

さて、本日したことについておさらいしましょう。

 

①パソコンを用意

②VSC(visual studio code)のインストール

③xserverの契約

④ssh設定(xserverとvscの接続設定)

⑤ドメインをgoogleで検索

⑥xserverの重要ファイル「public_html」の中身の確認

⑦ドメインは、index.htmlファイルを読み込んでいる

⑧キャッシュクリア(キャッシュを空にする)について

⑨<body><~body>の間に文字を書いて、自分のURL(ドメイン)ページに表示

 

1つでもやり方や意味がわからないものがあれば、再度読んで復習しましょう!

 

次章は、タグ(<body>~</body>)について説明します!