未経験からプログラミングを始めるならProgateが最適だった

＊2019年8月20日　更新＊

こんにちは、ワタリビト（@wataribito）です。

この記事では未経験からプログラミングを学べるWebサービス「Progate」を紹介しています。

Progateはプログラミングに必要不可欠な基礎のスキルを無料で学べるサービス。

PCではブラウザ、最近はスマホアプリも登場して使い勝手が良くなりました。

以前からプログラミングに興味があったけど、スクールに通うお金や時間がなくてなかなか踏み出せなかったんですが、ついこの間、Twitterで良さそうな学習ツールがあるとの情報をキャッチ。

さっそく試してみたところ、これから勉強を始める初心者の自分にぴったりだったので思わず記事を書いてしまいました。

ちょっとした空き時間もProgateでプログラミングの勉強にあてるぞ！！

Progateはこちら！

ブラウザ版はこちら

スマホアプリは?から

Progate -楽しく学べるプログラミング学習アプリ

Progate無料posted withアプリーチ

読みたい場所へジャンプ

Progateについて

まずはProgateについて紹介しますね。

Progateはプログラミングに必要な13のスキルの基礎がなんと無料で学べるんです。

無料で学べるアプリは他にもいろいろありますが、その中でもおすすめできるのがProgateです。

その理由はズバリこの3つ。

スライドを見ながら勉強するので動画のように置いていかれることがない
図が多く使われていて視覚的に理解しやすい
ゲーム感覚で続けれられる

つまりおすすめできる理由は初心者が続けやすいように工夫されているから。

プログラミングって一度つまずくと続けられませんよね？

ただでさえ意味の分からない記号やアルファベットがズラッとならんでいるのを見るだけで初心者のやる気なんてどこかに飛んでいってしまう・・・

（経験アリ?）

私がフォローしているプロのプログラマーさんたちもProgateを推してますね。

フォローしているテツヤマモトさんはProgateでプログラミングの基礎を身に着けたそうです。

Progateには勉強した分だけ各スキルのレベルがあがる仕組みがあるんですが、下のリンク先の記事ではだいぶ偏ったレベルの上がり方をしてますね?

これは必要度が高いものだけを集中して勉強しているからだそうです。

（マネさせてもらおう）

ちなみにテツヤマモトさんの記事からからProgateを知りました?

フリーエンジニアになるなら、まずはWordPress案件を目指すべき。僕自身、プログラミング未経験から3ヶ月で10万ほどの副収入に繋がりました。3ヶ月間、僕がどのように勉強してきたのかを共有します。

WordPressで月10万円稼ぐための最速勉強法【未経験から3ヶ月】https://t.co/9gHPYP8PGV

— テツヤマモト??メキシコ (@okapo192) 2018年5月30日

こちらのDaiさんのツイートでも基礎学習にProgateをおすすめしていますね。

プログラミング学習サービスをまとめてみました。

日本だと、基礎はProgate、AIはAidemy、プロダクト開発はUdemyがよさそう。ちなみに日本に探してたけどない！って場合は、海外で似たようなアプリがあるので、英語が得意な人はそっちを使ってみるのもありかと思います！ pic.twitter.com/RAYNc08Tcm

— Dai (@never_be_a_pm) 2018年5月31日

すでにプロとして一線で活躍している方もProgateで学習してるんですね〜。

その上でブログで紹介しているので信頼性は高そうです。

Progateで勉強するのは4つだけでOK！

Progateでは以下の13のプログラミングスキルの基礎が無料で学べるんです。

HTML
Javascript
JQuery
Ruby
Rails 5
PHP
Java
Pyhton
Swift
Command
Git
SQL
Sass

13個も勉強しなきゃいけないの？

13個も勉強できるか不安・・・

そう思った方はご安心を。

最初は赤線を引いた4つだけ勉強すれば大丈夫です。

この4つはプログラミングの根幹になる技術なので、とにかくこの4つを繰り返し勉強しましょう。

（テツヤマモトさんもすすめている勉強法です）

4つを身に付けたあと必要に応じて他のスキルを勉強すれば大丈夫です。

Progateで勉強しよう！

Progateを利用するのは簡単。

メールアドレスとパスワードを登録するだけですぐに勉強を始められます。

ログインするとこんな画面になります。

ログイン後の画面

この画面で各スキルの勉強具合がグラフに反映されます。

勉強すればするほどレベル（最初はLV.1）からが上がっていくのもゲームのようで楽しいんです。

ランキング機能もあって、1位の人はなんとレベル1200超えというモンスターレベル・・・！

まあスキル習得が目標ならレベルにこだわらず気楽にやりましょう?

勉強の流れは2部構成

Progateの勉強方法は2つの組み合わせで進みます。

スライドで勉強内容の説明
実際にエディターでコードを書く

エディターって何？？って方もわかりやすく説明されているのでご安心を。

さて、登録が済んだらさっそく勉強を始めてみよう！

まずは手始めにHTML＆CSSコースをやってみました。

最初に勉強する内容が数枚のスライドで説明されます。

内容を確認したあとに最後のスライドで演習に進むボタンを押すと演習モードに進みます。

HTMLコースのスライド

こちらが演習モード。

演習モードではスライドで説明された内容を実践していきます。

やっぱりもう一度スライドが見たいよ！！って方、大丈夫です。

画面左下のスライドを見るボタンを押せばいつでもスライドに戻れますよ。

エディターでコードを書く画面

このモードでは画面左にあるindex.htmlというボックスに今回のお題が表示されています。

今回はHello Worldという文字にh1タグを付けること。

Hello worldにh1タグを付けるには真ん中の黒い画面（エディターと呼ばれるもの）にh1タグを打ち込む必要があります。

Hello Worldの文字は最初からエディターに表示されているので、スライドに書かれていた通り最初と最後にindex.htmlボックスにあるh1タグを入力します。

h1タグ入力後

画面右上のプレビューはエディターに打ち込んた文字やタグがどのように表示されている確認できます。

下の見本と同じに表示されていればOKです。

最後に確認して次へのボタンを押して成功していればレベルアップ！次の練習問題に進みます。

間違っていればもう一度やり直しです。

（間違っていてもペナルティがあるわけじゃないので何度でもトライできますよ）

あとはこれの繰り返しです。

一度だけじゃなかなか身につかないので何度も繰り返してインプット?アウトプットして脳みそに刻みつけましょう〜?

まとめ　Progateは続けられる

Progateは未経験から初心者レベルの方にぴったりな学習システムだと思いました。

その根拠として次の2点が挙げられます。

説明にスライドを使用している
各課題でエディターを備えている

従来の動画での説明はいちいち再生とストップを繰り返す必要があるので忙しくなりがち。

加えて別タブでエディターを操作しないといけないので結構めんどくさいんです。

その点、Progateはスライドでの学習なので自分のペースで進められます。

各課題の演習モードにエディターが要されているのもうれしいですね。

スライド➜演習（エディター）の切り替えもProgate上で簡単にできるのでタブ切り替えの手間がありません。

一つ一つの課題のボリュームが多くないのも、経験が浅い人が続けやすい理由だと思います。