【30DAYSトライアル1st】環境設定編

30DAYSトライアル 環境設定編Web Development
2020.10.13

30DAYSトライアル 環境設定編

2019年にTwitterから誕生した格安オンラインプログラミングサービスの「デイトラ」の先駆けとなった「30DAYSトライアル1st」の環境設定編（Day8からDay10）の課題をまとめた記事です。

Day8からDay10では自分のパソコン内でコードを書ける環境を整えるので、自分のパソコンがあればコーディング作業ができるようになります。

スポンサーリンク

30DAYSトライアル1st・環境設定編（Day8からDay10）

Day8からDay10での環境設定編では、ローカル環境でHTMLやCSSなどプログラミング学習を進められるように環境を整えていく課題構成です。

それでは、一日ずつ課題を見ていきましょう★

Day8: エディタをインストールする、Emmetを理解する

Day8の課題

自分のパソコン内でコーディング作業をするための「エディタ」をインストールします。

 

Day8の感想

30DaysトライアルではMicrosoft社が開発した「Visual Studio Code (VS Code)」がオススメエディタとして紹介されているのでインストールしてローカルでのコーディング環境を整えていきます。

しかし、私が30Daysトライアルをやっていた時に使っていたパソコン（Macbook Air 2012）はOSが古すぎて「Visual Studio Code」に対応していませんでした。

そのためインストールが可能だった「Brackets」を使いました。

（「Visual Studio Code」はEmmet標準装備のようですが、「Brackets」はEmmetを拡張プラグインで入れる必要がありました。）

 

【追記】

Macbook AirからSurface Proに買い換えてからは「Visual Studio Code」がインストールできるようになりましたので、今は「Visual Studio Code」をテキストエディタとして使っています。

1台で3役！Surface Proのすすめ
2019年11月にSurface Proを購入してからほぼ毎日使って約1年経過しようとしているので、愛用している私のSurface Pro使い方を紹介します。
yaponkalog.com

Day9: ショートカットを覚えて、ファイルパスを理解する

Day9の課題

 

Day9の感想

使用しているパソコンの関係で「Brackets」を使っていたので、「Brackets」のショートカットのチートシート（Brackets Cheat Sheet–Mac）を参考にしました。

チートシートをだた見るだけでなく、ショートカットを実際に何回か試してみる（手を動かしてみる）のが大切です。

またファイルパスの理解に関しては、ProgateのCommand Line基礎編をやったらスッキリ理解することができました。

コマンド（黒い画面の操作）を勉強するので、パソコンアレルギーの私はとてもドキドキしながら学習を進めましたが、ファイルを作成したりすることでフォルダ構成が理解できました。

 

prog-8.com

Day10: Chormeの検証機能を使ってみる、LiveServerをインストールする

Day10の課題

 

Day10の感想

私が使っていたエディターの「Brackets」にはLive Serverが標準装備されていたので特に何もしてませんが、「Visual Studio Code (VS Code)」の場合はプラグインを入れると使うことができます。

また、Chromeの検証ツールはYouTubeで動画を観ながら実際にツールを使ってみました。

YouTube内を検索するとたくさんの動画が出てくるので、わかりやすいものが見つかるとおもいますが私が参考にした動画はこちらです↓（英語です）

 

余裕があったら（おまけ課題）: Progate jQuery 中級まで

おまけ課題

Day1からDay7でお世話になった ProgateのjQueryコースをやります。

 

おまけ課題の感想

jQueryを使うとHTMLとCSSだけで作るサイトに、簡単な動きをつけられるのでサイトがさらに素敵なります。

ただし、jQueryはJavaScriptというプログラミング言語のライブラリで、HTMLやCSSよりもさらにプログラミングっぽくなるのでかなり苦戦しました。。。

ProgateのjQuery編もいつも通り2週してメモを取ってはいましたが、ただ理解せずにコードを打ち込む感じになっていたのでjQuery攻略は少し時間がかかりそうです。

最後に

Day8からDay10の課題は始めの7日間（Day1からDay7）と比べると全体的に時間がかからず終われる印象でした。（だからおまけ課題があったのかな？）

このDay8からDay10の3日間では課題としてコーディングのための環境を整えながら、ローカル環境でいろいろ試してみると楽しいですし、実際に手を動かすことで勉強にもなると思います。

30Daysトライアルは課題をこなしていくと、すこしずつできることが増えていくので、楽しみながら続けることができます。

あっという間に30Daysトライアル1stは残りの3分の2になりました。この調子で頑張っていきましょう★

 

DAY1からDAY7の課題の記事はこちらからどうぞ↓

【30DAYSトライアル1st】 Progate編
2019年にTwitterから誕生した格安オンラインプログラミングサービスの「デイトラ」の先駆けとなった「30DAYSトライアル1st」のProgate編（Day1からDay7）の課題をまとめた記事です。 毎日1つずつ課題が出題されるという学習ステップで、無理なく続けながらWeb制作のスキルを身につけられるので、プログラミング初心者におすすめです。
yaponkalog.com