プログラミングの勉強を始めるために、まずはプログラミングをするためのアプリが欲しい！あるいは、プログラミングスクールで勉強した内容を、自分のPCでも試したい！そう思ったことはありませんか？
私も今、プログラミングを勉強しています。習ったことを自分のPCで確認できるようにしたいと思って、環境構築してみました。環境構築とは、Webページやソフトウェアの開発環境を自分のPCに用意することです。環境構築することで、コードを書き、書いた内容を目で確認できるようになります。
今回はHTMLとCSSでWebページの開発ができるようにするため、環境構築をしました。
みなさんに、簡単な環境構築のやり方を解説します。
プログラミングの環境構築のために必要なものは、次の3つです。
・PC
・ブラウザー
・テキストエディタ
まず、プログラミングをするにはPCが必要です。デスクトップでもノートPCでも構いません。
次に、ブラウザーが必要です。ブラウザーとはGoogle ChromeやEdge、Fire foxなどのWEBページを見るのに使っているアプリケーションのことをいいます。このページを見てくれているときに使っているものです。今回は、Google Chromeを使います。もし未インストールの方がいれば、”Google Chrome”で検索し、インストールしてみましょう。
最後に、テキストエディタです。たとえば、
<h1>自己紹介</h1>
<p>本郷 春都です。MAGA☆STYLE名義で動画投稿もしています。</p>
というhtmlのコードを書くのに必要です。
今回は、有名なAtomをインストールしました。”アトム”と読みます。プログラミング学習サイトで有名なドットインストールやProgateで使われているため、Atomにしました。
PC・ブラウザは誰でも簡単にわかると思います。他方、テキストエディタは普段の生活で使わないものなので、解説が欲しいところですよね。
テキストエディタのインストール
実際にテキストエディターをインストールした手順です。
まず、Atomの公式サイトにアクセスします。
（”Atom”で検索して一番最初に出てくるサイトです。）
公式サイトにアクセスしたら、黄色で表示されている”Download”をクリックします。
ダウンロードしたファイル（”AtomSetup-x64.exe”）をクリックして、実行します。下のような画面が表示されて、インストールが始まります。（クリックしてからインストール開始まで、ちょっと時間がかかります）
インストールが完了すると、Atomが起動します。右上に青枠でメッセージが表示されますが、”Yes Always”を選択すればOKです。
ちなみに、青枠のメッセージは日本語訳すると、
atom:// URI を扱う（開く）ときのデフォルトとしてAtomを設定しますか？
Atomは現在、atom:// URIsを開くときのデフォルトアプリとして設定されていません。atom:// URIsを開くときはAtomを使用しますか？
「はい」 「はい、常に」 「いいえ」 「いいえ、今後も使用しません」
となりますが、”Yes Always”で大丈夫です。
ここまでで、テキストエディターのインストールは完了です。
なお、Atomを開く度に”Welcome Guide”が出てくるのが嫌であれば、左下にある”Show Welcome Guide when opening Atom”のチェックを外せばOKです。
プログラミング用フォントの導入
コードを書くときのフォントを導入します。今回は、ドットインストールで紹介されている”Ricty Diminished”をインストールして設定します。
“Ricty Diminished”でググって、出てきたサイトからダウンロードします。
ダウンロードするのは、”Regular”版です。
ダウンロードファイルを開いて、「インストール」をクリックします。
「インストール」ボタンがグレーアウトすれば、インストール完了です。
“Ricty Diminished”のインストールが完了したら、Atomを再起動します。いったんAtomを閉じます。そして、デスクトップにショートカットアイコンができていると思うので、ダブルクリックします。
AtomのFile>Settings>Editor>Font Family に”Ricty Diminished”と入力します。一文字でも間違えると変なフォントになるので、間違えないように入力しましょう。
詳細は、こちらのサイトがわかりやすいです（ドットインストールの講義）。
テスト
それでは、実際にコードを書いてみたいと思います。
まず、新しいフォルダを作成します。今回は、「Test」と名付けました。
Atomのメニューバーにある「File」をクリックし、「Open Folder…」を選択します。そして、先ほど作ったフォルダを指定して開きます。
サイドバー（左側）に出てくる「Test」フォルダを選択して右クリックし、「New File」をクリックします。
ファイル名は仮に「index.html」としてEnterキーを押します。
「index.html」を選択し、コードを書きます。
今回は、
<!DOCTYPE html>
<h1>自己紹介</h1>
<p>本郷 春都です。MAGA☆STYLE名義で動画投稿もしています。</p>
という簡単なコードを書きました。
コードを書いたら、Ctrl + S で保存します。
最初に作った「Test」フォルダ内に「index.html」というファイルができていますので、右クリックし、「プログラムから開く」→「Google Chrome」を選びます。
きちんとプログラミングの結果を確認できました。
詳細は、こちらのサイトがわかりやすいです（Progateの解説記事）。
HTML & CSS の開発環境を用意しよう！（Windows用）
HTML & CSS の開発環境を用意しよう！ （mac用）
参考になるサイト
環境構築にあたって、下記サイトが参考になります。
まず、下記サイトが参考になります。有名なプログラミングスクールのドットインストールとProgateなので、見てみると勉強になります（無料）。
・windowsの場合
ドットインストール： HTML/CSSの学習環境を整えよう [Windows編] (全4回)
Progate： HTML & CSS の開発環境を用意しよう！（Windows用）
・macの場合
ドットインストール： HTML/CSSの学習環境を整えよう [macOS編] (全4回)
Progate： HTML & CSS の開発環境を用意しよう！
他に、今回インストールしたテキストエディタのAtomは、デフォルトで英語になっていますが、日本語化したい場合は次のサイトが参考になります。
【すぐわかる！】 Atomエディタのインストールと日本語化、便利な使い方
オートコンプリート等の便利な機能についても解説されています。
まとめ
今回は、プログラミングをしたい方のために、簡単な環境構築のやり方を解説しました。
プログラミングをするのに必要なものは、3つです。
・PC
・ブラウザ
・テキストエディタ
特にテキストエディタはプログラミングをしていない限り使わないものなので、インストールから設定、テストまで解説しました。
プログラミングをやってみたいという方や、オンラインスクールで勉強した内容を自分のPCで試したいという方は、まずプログラミングの環境を構築しましょう。
一度やってしまえば、後は簡単にプログラミングをすることができるようになります。
私は今、オンラインスクールでプログラミングを勉強しています。
とても親切なスクールで、学習ページにエディタがついているため、レッスン中はブラウザ上で学習ができます。
そこで習った内容を使ってプログラミングをしてみたいと思って、環境構築しました。
プログラミングをしてみたいという方の参考になれば幸いです。
本郷 春都（@hongo_haruto）
