さて、早速今回は開発用の環境を整えていきたいと思います。
尚、初級編の大幅なアップデートに伴い、デイトラ運営の案内に記載ありましたが、カリキュラムのBootstrap編は削除されたようです。
開発のための環境を整える
Google Chromeのインストールを行う
まずは、Google Chromeのインストールを行います。「なぜChromeを使うんだろう？」という点については、開発にはこれから行う「コーディング」という作業でChromeの検証機能が必要不可欠だからという理由のようです。
HTML/CSSという言語を学ぶ中で、HTML/CSSのライティング作業（コーディングと呼ぶ）に絞っても、検証画面からコードを確認したり、スマホ時の見え方を確認したりと様々な場面で使うようです。
コーディングするときは必ずChromeの検証を開いて確認しながら進めることが必須とのことでした。
また、プログラマーに最も大切な能力の一つが「ググり力 = 自己解決力」で、レッスンで気になったワード・知らない言葉なども積極的にGoogleで調べていくことが重要とのことです。
ということで、これから先の開発でもChromeを使い倒すことが多くなることから、PCの既定ブラウザもChromeに変更しました。
エディタ「VS Code」をインストールする
続いて、コーディング作業を行うために必須の「エディタ」を用意します。おすすめはMicrosoft社が開発したVisual Studio Code（VS Code）とのことなので私もVS Codeを日本語化して使うことにしました。
インストール手順
１．Download for Windowsをクリック
２．同意するにチェックを入れて、次へをクリック。
３．インストール先を指定して、次へをクリック。
４．特に変更せずに次へをクリック。
５．必要なものにチェックを入れて次へをクリック。
６．インストールをクリック。
７．インストールが始まるのでそのまま待ちます。
８．完了をクリック。
９．VS Codeインストールの為、左のマーケットプレイスを選択。
１０．検索欄にJapanese Language Packと入力。
１１．Japanese Language Pack for Visual Studio Codeを選択し、インストールして、VS Codeを再起動。
１２．メニューバーが日本語表示になっていれば成功。
「Hello World!」を表示する
「VS Code」のインストールが完了したら、PCのデスクトップに「Hello」というフォルダを作り、作成したフォルダの中にindex.htmlを作成して「!」を記述し「Tab」キーをを押下します。それだけで、VS Codeに標準搭載されている、Emmetと呼ばれている、htmlを省略記法で書けるツールにより、毎回記述が必要なおまじないコードを自動表示することができます。その後bodyタグに「Hello World!」を入力し、保存したindex.htmlの実行によりWebブラウザにHello World!が表示され今回の学習は完了となります。
次回はhtmlタグを記述していきます。
当記事をご覧いただきありがとうございました。
ではまた次の記事でお会いしましょう。
