プログラミング

Progateとドットインストール、使ってみました!みつの学習日記〜HTML&CSS初級編〜

はじめに

みつです。

この度、ずっと気になっていたProgateドットインストールを利用して、プログラミングの独学をスタートしました!

実際に使ってみて感じた使用感や、気になったところをズバリ!紹介していきたいと思います。

 

Progateとドットインストールって?

Progateドットインストールはどちらもプログラミング学習の支援サイトです。

独学でプログラミングを学びたい!と思っているユーザーに向けて、初心者でも学びやすいレッスンを提供しています。

プログラミングの基本から、実践・上級編まで、自分のペースで学ぶことができます。

Progateとドットインストールを使ってみた理由

  • 初心者向けを掲げている
  • レッスンが手軽に受けられそう
  • 無料で受けられるレッスンがある

 

みつ
上記に加え、学習サイトの中でも有名なのでまずはこちらの2つのサイトを使ってみることにしてみました!

 

Progate・ドットインストールの基本情報

Progate ドットインストール
無料会員 18レッスン
(初級編のみ)
182レッスン
(主に初級編)
有料会員 月額 ¥980
全74レッスン
月額 ¥980
全379レッスン
教材スタイル スライド 動画
最低限の学習環境 ・Progateのレッスン画面 ・ドットインストールのレッスン動画
・開発環境(atom)
・Google Chrome

どちらも、初級編のレッスンは無料で受けることができます。

会員登録も学習環境の準備も簡単なので、思い立ってすぐにレッスンを始めることができます。

 

Progate・ドットインストールの使用感比較 〜HTML&CSS初級編レッスン〜

Progate ドットインストール
難易度 すごく易しい 易しい
教材の扱いやすさ
解説のわかりやすさ
無料レッスン全体の情報量 プロゲート<ドットインストール

HTML&CSSの初級編レッスンでは、どちらのサイトも「簡易的なWEBページ(TOPページ)を作成してみる」という目的に沿って、コードを学んでいきました。

メインで扱ったコードはほとんど同じものでしたが、ショートカットキーやコードのまとめ方などの補足情報はドットインストールの方が豊富でした。

レッスン内容自体は、どちらも初心者向けとだけあって、分かりやすく、学びやすかったです。

ただ、教材の違いから、それぞれのレッスンの個性がはっきりしていたので、使ってみて自分が学びやすい方をメインに使用したり、両方をうまく利用すると学びが深めやすいと思います。

 

HTML&CSSについてはじめてプログラミング学習を始める際、まずは何から始めたらいいのかな?と悩みますよね。そんな時は、HTML&CSSからはじめるのがオススメです。

HTML&CSSがオススメな理由

  • 初心者にも学びやすい難易度◎
  • 他の言語にも必要になる、プログラミングの基本的な知識!

関連記事
プログラミング初心者向けに「言語」を一覧にまとめました。

 

みつ
それぞれの具体的な使用感もお伝えしていきますね!

 

Progateを使ってみた感想

とにかく易しい!

レッスンは実践までレッスンページのみで完結

レッスンは、

  1. コードについてスライド説明で学ぶ
  2. 実践する(実際にコードを書いて、見本と同じページを作成する)

の流れなのですが、Progateのレッスンページをめくっていくだけで実践までレッスンをやりきることができるので、他に準備が必要なものはありません。

レッスン前の準備が手軽なのも、学習意欲が削がれず継続して利用しやすいと感じました。

 

解説、ヒントが丁寧

スライドではとことんシンプルに、わかりやすくコードの書き方が解説されています。

そして実践パートもサポートが手厚いです。

便利だった機能の一部を紹介しますね!

  • 開発画面のどこにコードを書いたらいいのか、目印がついている
  • 画面左側に、ヒント・補足情報・説明スライドを再確認できるボタンがある
  • コードを書くと同時に右上の表示エリアに反映されるので、すぐに確認できる
  • コードに誤りがあると確認ボタンを押した際、具体的にどこでエラーが起こっているのか知らせてくれる

わからなくなってもすぐに確認・解決をして、最後まで学習を進めることができます。

 

易しい分だけ、自分でも工夫が必要

ヒントも多く易しいというのは、裏を返せば、ヒントや解説をちょっと確認しただけで、意識しなくてもレッスンが完結してしまいます。

スキルとして身につかないと困ってしまうので、自分なりに工夫しながら進めていくことで、よりしっかりと知識や実践力が定着すると思います。

例えば…

  • コードを理解する・慣れることを意識して取り組む
  • 反復練習をする
  • コピペ(コピーアンドペースト)だけでなく、自分でも書いてみる など

また、レッスンページで実践練習まで完結する分、実際の開発環境(atomなど)を使ってのコード作成は自分でチャレンジしていく必要があります。実際の開発環境に慣れる時間を別途作っていくことになります。

 

みつ
アプリのような手軽さと、易しさがポイントでした。
初めての学習の導入としては◎です!

 

ドットインストールを使ってみた感想

便利な情報が詰まってる!

❶実際の開発環境で学ぶことができる

ドットインストールの提供しているレッスン教材は動画です。

実際にコードを書いたり、コードがどう反映されているのか確認するには、動画で使用されているのと同じ開発環境の設定を、自分自身のパソコンに行う必要があります。

準備が必要にはなりますが、本番と同じ環境で実践練習を積んでいくことができるので、学習しながら開発ツールに慣れることもできます。

 

❷情報が豊富

コードについての丁寧な説明もさることながら、開発環境(atom)で活用できる便利なショートカットキーもレッスンの中で教えてくれます

ショートカットキーは、時間を短縮したり、打ち間違いや、打ち忘れによるエラー発生を減らすことができるので、非常に強い味方です。

atomのみで有効なショートカットキーもありますが、atom以外でも活用できるショートカットキーもありますので、覚えて損がない情報ばかりです。

 

みつ
個人的にこれがとても便利で、嬉しい情報でした!

 

 

3分動画でスピーディー

レッスンは全て3分以内の動画なので、内容はとにかくスピーディーに進みます。

再生しながら同時進行でコードを書いたり作業するのはやや難しいので、一時停止や、巻き戻しをうまく活用しながら確認すると良いです。

解説は音声で聞き取っていくので、目で見た情報の方が覚えやすい場合には、自分でわかりやすく学習メモを取るのも必要な工夫の一つです。

みつ
私は、1回目は動画のみを見る、2回目は動画とatomの画面を並べ、動画を一時停止してコードを書く・学習のメモをとる、というスタイルで進めました。

 

3つの画面を行ったり来たりする

教材の動画はドットインストールの公式サイト、開発画面はatom、動作確認はGoogle Chromeを使用します。

そのため、動画をみるだけでなくコードを書いてみようと思ったら、最低でも3つの画面を同時に用意する必要があります。

動画を一時停止してから開発画面でコードを書いたり、開発画面で保存したコードをGoogle Chromeで再読み込みをして動作確認をしたりと、それぞれの画面を使って学習を進めていきます。

慣れるまでは煩わしく感じますが、少なくとも開発画面(atom)と動作確認(Google Chrome)の画面を同時に使用するのは、実際の開発でも必須の作業になりますので、コードを学びながら開発環境に慣れることができる、と考えたら良いと思います。

関連記事
ドットインストールとは?プログラミング初心者の強い味方を紹介します!

 

まとめ

今回私は、Progate→ドットインストールの順で、同じ内容(HTML/CSS)を学習したのですが、この流れがとてもしっくりきました。

とにかくわかりやすいProgateで初めての知識に触れ、実際の開発環境で扱うドットインストールで知識深めていく感じです。

 

学習サイトでの学びが楽しかった分、気になりはじめているのは、「もっと上級編の内容までしっかりと学びたい!」と思った時には、有料会員になる必要があるということです。

有料会員になって上級編のレッスンを開始する場合、せっかくお金を払って学ぶのであれば、何か具体的に趣味や生活に活かすことができるレベルになりたいですし、中途半端に挫折するのは勿体無い、というのが本音です。

今と同じように一人で理解して学習を進めていくことができるのか、という不安もあります。

目的と取得したいスキルレベルが明確にある場合には、学習サイト以外に、プログラミングスクールの利用も検討すると良さそうです。

プログラミングスクールに行くべきかどうか迷っている人へ。

続きを見る

【厳選】初心者(未経験者)におすすめのプログラミングスクール

続きを見る

【無料プログラミングスクールおすすめ6選】入学条件や推しポイントまとめ。

続きを見る

-プログラミング
-, ,

Copyright© LIYO MEMO リヨメモ , 2020 All Rights Reserved.