[Я]無料プログラミング学習サービス「Progate」が楽しくてハマる

スポンサーリンク

プログラミング初心者の方々、やってみるべし!

Skitched 20150216 01

このブログ「りくまろぐ」は、WordPressというツールを使っています。現在は無料テーマをカスタマイズしたデザインで表示させているのですが、開設当初は自作テーマで表示させていました。

自作テーマ作成にしても、あるいは既存テーマを自分の好きなようにカスタマイズするにしても、ある程度の知識が必要になります。オリジナルのブログやサイトを構築する際に基本的な知識として、HTMLやCSS。WordPressで作るならPHPというプログラミング言語も知っていれば大きな武器になります。

今回紹介する「Progate」という無料プログラミング学習サービスは、OZPAさんのブログ記事を読んで知り、「おお、これは面白そうだ」と早速利用してみました。もう1ヶ月近く前の話。

全問正解したからといってWordPressを全構築できる知識が身に付くほどまでは行かないのですが、ほとんど知識がない初心者の方々は、その「とっかかり」として学習してみると大変イイんじゃないかな、と私自身も学習してみてスゴく感じました。

Progate | プログラミングの入門なら、基礎から学べるProgate (プロゲート)

入力用エディタが使いやすい

Skitched 20150216 02

↑ Progateはメールやパスワードを登録して利用できる他に、TwitterやFacebookのアカウントと連携させて利用することもできます。私はTwitterアカウントでログインしました。

2月16日現在で用意されてる学習メニューは「HTML/CSS」「PHP」「jQuery」の3つ。

Skitched 20150216 03

↑ 私は1月末頃に3つとも完了させてしまい、続編が来ないかなと楽しみにしてたのですが、HTML&CSSの応用編が新たに追加されていました。これもやらなきゃ。

HTMLやCSSはひとまず分かるし、PHPも基礎的なところは以前勉強したことがあるので知ってました。jQueryは、このブログでも幾つか機能を利用してるんですけど、解説本やサイトのサンプルコードをそのまんまコピペなんてことも多いため、実は基礎知識もあんまり持ってませんでした。

なので私自身はjQuery学習が最も楽しかった。もう全部終わっちゃったので続編に期待してます。そんな高度な知識じゃなくていいので、何かまた設問が増えると嬉しいです。

Skitched 20150216 04

↑ Progateの全画面表示は上のような感じ。中央に入力用のエディタ(黒い部分)があり、これがなかなかの高機能。左サイドバーには各チャプターの課題問題、右サイドバーにはプレビューと正解見本のイメージが表示されます。

Skitched 20150216 05

↑ 課題問題を解く前にはそれぞれ基礎的な解説のスライドが表示されます。それを読んで予習し、課題問題モードに入って左サイドバーの設問通りエディタに入力していき、答え合わせをしていく方式。コツコツと手作業でサンプルを作って学習するスタイルが大好きな方々には、Progateはとても向いてます。

予習した内容を忘れてしまった時は「スライドで確認」ボタンをクリックすると、先ほど表示されていた予習用のスライドが表示されます。

時々このスライドが真っ黒で何も表示されないことがあったり、以前のチャプターで学習した時のスライドを表示させた時、エディタ画面に戻れなくなるという表示不具合が何回かありました。現在は改善されてるのかもしれません。

Skitched 20150216 06

↑ 右サイドバーには、エディタで入力した内容を反映させるプレビュー画面が上半分、正解の見本が下半分にそれぞれ表示されてます。要するに上と下の画面表示が同じになれば正解ってことですね。

これもリアルタイムで入力内容が反映されればいいんですけど、少しタイムラグがあり、すぐには反映されません。PHPやjQueryの時はボタンを押すと処理が実行されるのですが、プレビュー表示が入力内容と明らかに一致してなくておかしいぞ〜ってな時もありました。それでも答え合わせしたら正解!なんてこともありますので、プレビュー内容はあんまり気にしなくてもいいのかも。

ちなみに正解すれば、直後にプレビューと見本が同じ内容にパッと変更されたりすることもあります。またプレビュー画面自体が小さくて見づらい場合は、右上にある矢印をクリックすればプレビュー画面が拡大されます。

Skitched 20150216 07

↑ 中央のエディタはタグが綺麗に色分けされていて見やすく、使いやすいです。HTML、CSS、jQueryはそれぞれ別エディタになっていて、エディタ上部のタブを指定することで切り替えられます。

Skitched 20150216 08

↑ 試しにspanタグを追加してみます。

Skitched 20150216 09

↑ spanタグのカッコを閉じると、右側に「</span>」と終了タグが自動で補完されます。これも何気に便利で使いやすい。

Skitched 20150216 10

↑ 設問のコードをどこに入力すればいいか分かんないよ〜、という場合も慌てる必要なし。「ここに入力するんだよ」という風に、該当部分にコメント指示があり、目印になります。

Skitched 20150216 11

↑ 設問通りに回答となるコードを入力し終えたら、エディタ右下にある「確認して次へ」をクリックすると、答え合わせをしてくれます。

Skitched 20150216 12

↑ 正解であれば「Congratulations!」と祝福してくれますが、

Skitched 20150216 13

↑ 不正解の時は「Incorrect」と冷酷に宣告されます。不正解の原因も表示され、上のように「すぐ気付く」簡単なミスの時はいいのですが、中にはエラー原因の意味が分からず初心者の方々は苦悩するかもしれません。

Progateに限らず、プログラミング学習なんてそんなもんです。何が間違ってるのかサッパリ分からず、何時間も苦悩し、よくよく見たらセミコロン1個を書き忘れのケアレスミスだったなんて、プログラミング経験者はみんな通る道ですから。

Skitched 20150216 14

↑ ヘルプで「今後の追加予定」をチェックしてみると、Rubyなども予定されてるみたいですね。私個人としてはPHPとjQueryをもう少し充実してもらって、中級編、上級編と増えていってくれれば大変嬉しいです。運営者の方々、どうか一つよろしくお願いいたします。

りくま ( @Rikuma_ )的まとめ

前述しましたが、私はjQueryをほとんど知らなかったので、ProgateのjQuery学習はとても参考になりました。

ただ、全問正解してホッとはするんですけど、やっぱりしばらく期間が空くと、完全に忘れてるわ、ってことに気付きます。1回学習しただけじゃ覚えられないですね。後日再びjQueryの問題を解いてみようと思っています。

初級編を学びたい方々、まずはProgateで全問制覇できるかチャレンジしてみてください。楽しく学習できますので、オススメですよ。

スポンサーリンク
この記事がお気に召したら
「いいね!」をお願いします!
「りくまろぐ」の最新情報を
Facebookにお届けします