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」をテキストエディタとして使っています。
Day9: ショートカットを覚えて、ファイルパスを理解する
Day9の課題
Day9の感想
使用しているパソコンの関係で「Brackets」を使っていたので、「Brackets」のショートカットのチートシート(Brackets Cheat Sheet–Mac)を参考にしました。
チートシートをだた見るだけでなく、ショートカットを実際に何回か試してみる(手を動かしてみる)のが大切です。
またファイルパスの理解に関しては、ProgateのCommand Line基礎編をやったらスッキリ理解することができました。
コマンド(黒い画面の操作)を勉強するので、パソコンアレルギーの私はとてもドキドキしながら学習を進めましたが、ファイルを作成したりすることでフォルダ構成が理解できました。
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の課題の記事はこちらからどうぞ↓