2019年にTwitterから誕生した格安オンラインプログラミングサービスの「デイトラ」の先駆けとなった「30DAYSトライアル1st」の環境設定編(Day8からDay10)の課題をまとめた記事です。
Day8からDay10では自分のパソコン内でコードを書ける環境を整えるので、自分のパソコンがあればコーディング作業ができるようになります。
30DAYSトライアル1st・環境設定編(Day8からDay10)
Day8からDay10での環境設定編では、ローカル環境でHTMLやCSSなどプログラミング学習を進められるように環境を整えていく課題構成です。
それでは、一日ずつ課題を見ていきましょう★
Day8: エディタをインストールする、Emmetを理解する
Day8の課題
自分のパソコン内でコーディング作業をするための「エディタ」をインストールします。
DAY8. 『エディタをインストールしよう』
— ショーヘー@東フリCMO (@showheyohtaki) September 15, 2019
いよいよProgateを卒業のとき🎉
これから先は実務と同じく、ローカル環境でコーディングしていきます。
まず、コーディング作業を行うために必須の『エディタ』を用意しましょう。
👇解説https://t.co/lZgq4rnEPU#30DAYSトライアル#30DAYSトライアル課題 pic.twitter.com/2VIOjUrxg4
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. 『基本のショートカットを覚えよう+ファイルパスを理解しよう』
— ショーヘー@東フリCMO (@showheyohtaki) September 16, 2019
DAY9は、エディタでの作業効率を上げるためのショートカットとファイルパスについて学習します。きっとエディタがラクすぎて感動しますよ☺️
👉https://t.co/t4aA0CAP9c#30DAYSトライアル#30DAYSトライアル課題 pic.twitter.com/PrJ5zBfjUt
Day9の感想
使用しているパソコンの関係で「Brackets」を使っていたので、「Brackets」のショートカットのチートシート(Brackets Cheat Sheet–Mac)を参考にしました。
チートシートをだた見るだけでなく、ショートカットを実際に何回か試してみる(手を動かしてみる)のが大切です。
またファイルパスの理解に関しては、ProgateのCommand Line基礎編をやったらスッキリ理解することができました。
コマンド(黒い画面の操作)を勉強するので、パソコンアレルギーの私はとてもドキドキしながら学習を進めましたが、ファイルを作成したりすることでフォルダ構成が理解できました。
Day10: Chormeの検証機能を使ってみる、LiveServerをインストールする
Day10の課題
DAY10. 『Chromeの検証を使ってみよう+LiveServerをインストールしよう』
— ショーヘー@東フリCMO (@showheyohtaki) September 17, 2019
今日でローカル開発の準備も完了🎉
明日からはローカルでコーディングしてもらいます。
Chromeの検証もLiveServerも早速つかうので要チェックです❗️
👉https://t.co/OThEOR4HmB#30DAYSトライアル#30DAYSトライアル課題 pic.twitter.com/YmiENkA5kH
Day10の感想
私が使っていたエディターの「Brackets」にはLive Serverが標準装備されていたので特に何もしてませんが、「Visual Studio Code (VS Code)」の場合はプラグインを入れると使うことができます。
また、Chromeの検証ツールはYouTubeで動画を観ながら実際にツールを使ってみました。
YouTube内を検索するとたくさんの動画が出てくるので、わかりやすいものが見つかるとおもいますが私が参考にした動画はこちらです↓(英語です)
余裕があったら(おまけ課題): Progate jQuery 中級まで
おまけ課題
Day1からDay7でお世話になった ProgateのjQueryコースをやります。
DAY9〜10の課題2つめ📖
— ショーヘー@東フリCMO (@showheyohtaki) September 17, 2019
『Progate jQuery 中級編まで』👇https://t.co/qufB3LTpkF
今日と明日は軽めの課題なので、終わったらjQueryをやりましょう☺️
ダイナミックな動きをつけたり、ライブラリを使って簡単にスライダーを実装したりと、できることの幅が一気に広がります‼️#30DAYSトライアル
おまけ課題の感想
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の課題の記事はこちらからどうぞ↓
