こんにちはまさのをです。


今回は、

プログラミング入門学習サイト「Progate」で
1か月間勉強した中でやったことや、感想などを書いていきます。




１. はじめに 


まず、Progateを始める前の僕の状態から説明していきます...

僕は今は趣味でUnityでゲーム作ったりしていますが、
もともとただの事務職公務員でした。

文系だし、専門的な知識とか全くないし、プログラミングとか知らんし...。
でもなんか新しいカッコいいことしたくて、公務員辞めて未経験でゲーム開発会社に入りました。

そこから初めてプログラミングを学んだので、
いろんなものはすっ飛ばし、Unity（C#）からスタートしていますｗ

他の言語は業務で使わないので全然勉強せず、Unityしかやってきてなかったので...
HTMLとかCSSは目に触れるので多少知っててもサイト作るとかは絶対無理だし、本当にほぼ何も知りませんでしたｗｗ





でも今から1か月前、急に
「自分でWebサイト作ってみたいなー」という思いがでてきたので
これを機会にちょっと勉強してみることに。


何かを学習するときは自分のペースで勉強するのが好き（というかやれと言われると逆にやる気無くす）なので、
独学でできて入門向けで学習モチベーションも保てる良いのないかなー...と探していると、

みつけました！初心者でも楽しくプログラミング学習できそうなサービス「Progate」

月額980円でいろんな言語の学習し放題。


とりあえず無料でできるHTMLの初歩の学習をやってみました。

専門用語などは使わずにわかりやすく説明されているし、
指示通り進めていくことで簡単に進めていける。
それにProgateのサイトのデザインもおしゃれ！（これ意外と重要）

いろいろ含めてこれはいいぞ！と感じたので、
すぐに有料会員に申し込み。それが3/7。



月額980円で学習し放題。

僕はとても貧乏性で、
こういう「やればやっただけコスパがよくなる」タイプのものはコスパをよくしないと落ち着かない。
ラーメン大盛無料サービスなら絶対大盛にする感じ。

なのでそっから1か月間使い倒してみましたｗ




２. 何を学習したか 


まずはもちろん、Progateを始める動機になったHTML＆CSSからスタート。

HTML＆CSSは、Progateのオリジナルサイト（ペライチもの）を徐々に作り上げていく感じで進んでいきました。

項目ごとに学びながらも、ひとつのページが徐々にできあがっていくので、
モチベーション保ったまま学習が進めていけてすごくよかったです。

HTML＆CSSとついでにCSSを書きやすくするSassの学習を
3/7、3/8 、3/11の3日間を使い完了。

最後にできあがったものはこんな感じ。


今風なデザインでいい感じですよね。
Progateサイト上では結構簡単にこんなモダンなサイトが作れてしまったのでかなり自信がつきました！


なんか無駄に自信がついてきたのでここで、
とりあえず自分でポートフォリオサイト的なものを作ってみよう！ということで、
3/12～3/14の3日間を使って作ってみました！


完成したのがこちら！
Progateで学んだデザインを土台に、自分が作ったアプリを紹介するサイトを作りました(^o^)
ポートフォリオサイト（https://masanohapp.web.fc2.com/）
※後からJavaScript入れてリンクスクロールだけ追加してしまいましたが...。


結構いい感じに作れた！＼(^o^)／



できた直後は「めっちゃいいのできた！」とすごくテンション上がってたのですが、
しばらく見てると、なんか物足りなくなってきて…。

「やっぱりもうちょっと動きが欲しい…。」

仕方ない、次はJavaScript、jQueryいくか。





ということで次は、
3/15,3/18の2日使ってJavaScript、jQueryの学習。

Webサイトに簡単にアニメーションつけるにはjQuery。

Progateのレッスンでは特に難しいことは無く、
早く自分のサイトの方をいじりたかったのでさっさと終わらせましたｗ




学習後、3/19と3/20でさっき作ったポートフォリオサイトをさっそく改修！


今度はこんな感じのサイトができました！
ポートフォリオサイト第2弾（https://masanohapp.firebaseapp.com/）

まさのを@masanoh_com

HTMLとCSSとJavaScriptの勉強をしたので、ポートフォリオサイト的なやつ作りました！
とりあえず無料で広告なしで上げられるところに公開しといた。
https://t.co/hWAxISuVLu

2019/03/20 17:51:58

jQueryはちょっと調べたら簡単に使えるカッコいいアニメーションがたくさんでてくるので、
トップのアニメーションはその中の一つをそのまま実装しました。

個人的にはこのサイトデザインはかなり気にいってます！！

思った以上に短期間でいいのができたｗ(^o^)




で、次は順番的にはPHPかなぁ。とりあえずやっとくか。
ということで、3/25～4/1でPHPの学習。
ちょっとこの週は忙しかったのでがっつり取り組めたのは1日くらいしかなかったのとやる気の問題もあり、今までの言語より時間かかりました；；


PHPならポートフォリオサイトにお問い合わせフォームつけれるし、つけよう！とか考えてましたが、
PHP動くサーバーは基本有料で、無料のやつもあるにはあるけど広告とかめっちゃ出たりしてたので
めんどくさくなって実装しませんでしたｗ

なのでPHPはProgateでの学習のみ。

でも個人的にはPHPはあんまり好きじゃなかったなぁ…。
なんかスッと入ってこなくて、頭の中がごちゃっとしてしまうｗ




と、この時点で4/1。

今までHTML、CSS、JavaScript、jQuery、PHPと十分やってきたのですが、
1か月の契約期間は4/7まで。

あと一週間ある。もったいない。何かやらねば。
貧乏性発動ですｗ




で目をつけたのが、Progateでなんか推されてる言語Ruby、、、

「TwitterのようなSNSサービスを作ってみよう！」

気になる...。でも難易度MAXだし、レッスン数も多い...やりきれるかな...。





結果、貧乏性が勝ちましたｗ



残り1週間でRuby、Ruby on Rails学習に突入。
4/2～4/6でなんとかやりきりました！



Rubyは確かに難しかった。でも楽しかった！

やっぱり、
TwitterみたいなSNSサービスを1から自分の手で完成させた！
という達成感を味わえるのはでかい。


これで、一応Webサイト＋Webサービスが作れるスキルを手に入れられた。



Progateではレッスンごとに経験値が得られるのでそれに応じてLv.が上がったり、


言語の習得を終えるとバッジがもらえたりしてなんか嬉しい。
Railsはレッスン全部できたけど、道場が一部やりきれなくて達成90％で終わってしまった＞＜




３. まとめ 


980円という最小課金で1か月間学びまくって、
HTML、CSS、JavaScript、jQuery、PHP、Ruby、Ruby on Rails
の基礎を十分に学ぶことができた。

もしこれを入門本を買ってきて自分でやっていたらこんなに短期間でこれほど学べてなかったと思う。
というか1言語でも続いてなかったかもｗ


やっぱり、


段階を踏んで丁寧に解説されているスライドを見て学ぶ
↓
示されている手順通りにプログラミング
↓
無事実装されているか確認


というプロセスを繰り返しながら徐々に完成品に近づいていく感覚と、

言語ごとのレッスンが基本的には１コンテンツを完成させるという形で組まれていて、

最終的に自分でこれを完成させたという達成感を味わえることができるのが、学習継続につながったと思う。




これからプログラミングを始めよう！とか、
新しい言語やってみよう！
と考えている人はProgateはかなりオススメ。




でもどんな学習でも一緒だと思うけど、
インプットした後はちゃんとアウトプットしないと知識として定着しない。
Progateやっただけでプログラミングできるようにはならない。


実際、
Webサイトは自分で作ったので、HTML、CSSの定着は少し実感できてるけど、
Rubyは最後に駆け足でやったので、自分の環境では何も作ってなく
この状態でRuby使ったサービスをどんどん作れるか、と言われると普通に無理ｗ

1か月のProgate学習時間は超えてしまいましたが、
作りたいSNSサービスの案は既にあって、それをRuby on Railsで作ってみようと考えてます！




さいごに、
今回いろんな言語を駆け足で学んで思ったことは

• なにがしたくてその言語を学ぶのか、目的を持つ
  
  
• モチベーションを保ちながら学習をすすめる
  
  
• 学習した後は必ず自分で考えて作る
  

この３つがプログラミング学習では特に大事だなと。

実際PHPでは、学んだあとのイメージを持っていなかったのでやる気があまり出ませんでしたが、
Rubyは、短期間ながらも作りたいものがイメージできていたのでどんどん進めることができました。




なんか長々といろいろ書きましたが、
とにかく、プログラミング入門者にはProgateおすすめですｗ