こんにちは、アンドエンジニア編集部です。
「プログラミングを学んでいまの業務への活用や転職・キャリアアップに繋げたい・・・」
そのような思いから、プログラミングを学ぼうと考え中の方・あるいは学習中の方も多いのではないでしょうか?
しかし、実際どのように環境構築やテストを行えばいいのか、分からない方も多いと思います。
プログラミング学習ができる有名なサービスのひとつにProgateがありますが、Progateで学習したユーザーが実際に開発を始めると、「開発環境の構築方法が分からない」「エラーが発生した時にどのように解決すればいいのか分からない」といった課題に直面することもあるかと思います。
そんな中、Progateでプログラミングを学んだ人が「その先」の「実践的なプログラミング」を学べるサービス『Progate Path』が2022年11月に公開されました!
そこで、今回はProgateとProgate Pathの間にどんな違いがあるのか?Progate Pathで学べる実践的なプログラミングとは?アンドエンジニア編集部員が実際に体験してみました!
文系出身の元Webデザイナーで、使用経験があるのはHTML/CSS/PHP。Progateでプログラミング言語を学んだ過去あり。
元Webエンジニア。前職では企業向けのWebシステム開発案件でPHPを用いて開発していた。Progateを利用してプログラミングを学んだ過去あり。
Progate Pathとは?
まずはProgateってご存じですか?
知ってる知ってる!プログラミング学習ができるサイトでしょ。有名だし使ったこともある!
私はHTML/CSSのレッスンとかをやったんだけど、スライドの説明がイラストになっててわかりやすかった記憶がある。
その分かりやすさから、プログラミングをはじめたての場合まずProgateから手を付けるという人も多いですね。しかし、Progateは始めやすい一方で、「終わったらどうする」「簡単すぎる」といった意見もあるようです。
終わったらどうするはたしかにそうかも。JavaScriptレッスンとかなら、「ホームページのこの部分を作るぞ!」みたいに学んだ内容を活かすイメージがなんとなく湧くけど、Rubyとかのレッスンになると「書き方覚えた!…このあとどうするの?」ってなっちゃいそう。
そんな人たちにオススメなのが『Progate Path』です!
Progate Pathは「実務につながる経験を積めるプログラミング学習サービス」として、2022年11月にリリースされました。
Progateではプログラミング言語の書き方を中心に学べますが、エンジニアとして仕事をする上では他のスキルも必要です。例えば、「コードを読む力」や「デバッグ力」、「検索する力」や「公式ドキュメントを読む力」などです。
Progate Pathでは、それらの「エンジニアの実務に必要なスキル」を学ぶことができます。
(急に説明口調になった...)つまり、Progateは基礎となるプログラミングをメインに学べて、Progate PathはProgateで学べるプログラミング含め実務で使用する技術も学べるってこと?
その通りです。
なるほどね。私が始めるならもう一度Progateからかな...。昔Progateでプログラミング言語を学んだけど、十分に勉強できていないから。
なおさんのような「昔Progateでプログラミング言語を学んだけど、十分に勉強できていない初心者」には、Progae Pathの公式サイトに公開されている『学習ロードマップ』を元に学習を進めてみるのが良いでしょう。
Progate Pathでは、本気でエンジニアを目指す人向けに『学習ロードマップ』が公開されています。
今回は、そんなロードマップに沿って体験してみました!
まずはProgateから
Web開発コースをはじめる方へ(Node.js)
このコースを最後までやりきったらどうなるのですか?(Progate在住 わんこさん)
かわよ
こういうのが書いてあると、自分でも「私は何のためにこのコースを受講するんだ?」って最初に意識できていいね!
「なんとなくやりました」より「このためにやってます」と意識できていた方が真剣に取り組めそうですよね。
自分は2018年頃にProgateを使っていたのですけれど、当時はこのように改めてProgateの使い方や学習前の心構えを教えてくれるページがなかったので良いなと思います。
学習レッスン HTML & CSS 初級編
直接学習と関係ない箇所はコピペできる機能があったり、分からなくなったらコーディングの画面から直接スライドへ戻れるようになっているんですね。
プログラミング初心者でもついていけそう!初心者に優しい設計だね。
HTML&CSSなどのマークアップ言語は、PHPやPythonなどのバックエンド言語とは異なり、プログラムが間違っていても動きます。プログラミング初心者あるあるの「エラーで詰まって先に進めない」という現象に陥りにくいこともあり、ついていきやすいと思います。
学習レッスン Node.js I
急に難易度が上がった気がする...。
Node.jsはサーバーサイド側だからですね。前レッスンで学んだJavaScriptは「フロントエンド言語」、Node.jsは「JavaScriptをサーバーサイド上で動かす仕組み」という違いがあるので、なおさんのような初心者には難しく感じるかもしれません。
飛ばしちゃダメ...?
Node.jsはこの後のProgate Pathでめちゃくちゃ使いますし、Progate Pathを進めるのに不可欠な「コマンドラインの操作」も併せて覚えられるので、頑張って進めましょう!
Progate Pathをやってみた
Progate CLI と Node.js の開発環境の構築
Progate一通り終わったー!いよいよProgate Pathを進めていこうと思うんだけど「Progate CLI」と「Node.js」の準備が必要って書いてあるね?「Node.js」はさっきレッスンでやったけど…「Progate CLI」ってなに?ワンチャン無しでもいける???
なんでいけると思ったんですか?Progate Path で学習を進める上で、「Progate CLI 」は必須ツールです!
■Progate CLIとは?
Progateが独自に開発したコード判定ツールです。Progate CLIを導入することで、ローカル環境でコードを書きながらも、Progate Pathのブラウザ上で自分自身のコードの判定を確認することが可能になります。
ProgateはWeb上だけで学習を進められましたが、Progate Pathは公式サイトにある説明を見ながら、自分でローカル環境を用意してレッスンを進めていくんです。
ただ、最初の『Progate Pathとは?』でお話ししたようにProgate Pathではデバッグのレッスンも行うので、コードの判定や進捗の同期を行うために、Progate CLIが必要なんですね。
デバッグってあれでしょ、バグ探すやつ。
正しくは、プログラムのバグを見つけ、手直しする作業のことです。
Progate CLIがあれば、自分がローカル上で書いたプログラムを、Progate Pathのサーバー上に送信し、書いたコードをCLIが判定することでテストできるようになっているんですね。
すご。なんかIoTみたい。
繋げるという意味では同じかもしれませんね。
Progate CLIをインストールしてみた
だから黒背景に英文バーッと流れるのはこわいって言”っ”て”る”じゃ”ん”!!!!!!
普段から言ってますよねそれ。なにがそんなに怖いんですか?
バグったのかもって不安にならない???これ以上触らんどこってリタイアする人絶対いるって…まぁ私なんだけど
触らないといつまで経っても怖いままですよ。仕事でプログラミングする時は、自分のPC内やクラウド環境にサーバーを立ててプログラミングの開発環境を構築することが多いです。
そのため、この「開発環境の構築」はすごく大変だと思いますが、実務感を養う上ではすごく重要なんですね。
すぐ正論言う。…ってあ”!!エラーっぽいの出た...けど、なに…?
エラーが出たら読んでみましょう。
ただ、エラー文読んだだけだと原因がハッキリしない場合があるので、そのような時は同じ現象が起きて解決した人がいないかググってみると良いでしょう。
はい!まずエラーの英文が読めない場合はどうしたらいいですか!
Progate Pathでは、解決ページにエラーの英文の読み方から優しく書いてあるので、そちらを参照してみるのも良いかもしれませんね。
ヘッダータイトルのCSSが適用されていないバグの修正
あ、CSSの修正だ。タイトルの文字色変えるだけなら私でもできそう。
CSS修正自体は楽にできると思いますが、このレッスンを通して、エンジニアの開発現場で実施されている「修正→テスト→リリース」のステップを踏んでいるため、エンジニアの実務感を得られるようになっていて良いですね。
ルーティング追加とビュー表示におけるバグ修正
ここからJavaScriptも入ってくるんだ。だんだん難しくなっていくね。
このレッスンでは、Progate Pathで用意された「PayCalculator」という割り勘計算アプリを開発していきます。状況としては、「PayCalculator」を開発するプロジェクトに参加したと想定して、タスクを進めていきます。
実際の開発現場では、プロジェクトに途中参加することが多いです。プロジェクトに途中から参加した際は、用意された仕様書を読んでプロダクトの仕様を把握する必要があるので、良い練習になりそうですね。
「仕様書」があると、「こう書けばいいんだ」の参考になるね。
「仕様書」とはアプリやシステムなどのプロダクトを作る上で必要な要件をまとめた開発者への説明書のことを指しますが、ある程度の人数で開発が必要なプロダクトには、この仕様書が用意されていることが多いです。
途中からプロジェクトに参加した際は、用意された仕様書を読んでプロダクトの仕様を把握した上で、開発を進めていく必要があるので、このレッスンを通して仕様書を読む力も培うことができると思います。
ピッタリ賞の画像が出力されないバグの修正
このレッスンから出てくる、「チャレンジタスク」ってなに??
「チャレンジタスク」は、各レッスンで覚えた内容を自分のものにできているかを確認するテストのようなものですね。
チャレンジタスクでは、タスクの概要と仕様書が手渡され、まるで実務のようにタスクを進める必要があります。
ちなみに、チャレンジタスクをクリアするために必要になる知識を「特訓タスク」で復習することができます。
まずは、チャレンジタスクに取り組んでみて、難しかった場合は「特訓タスク」で必要な知識を身につけましょう!
ログインページのテキスト修正
このレッスンからは、「Tweet App」というツイッターのようなアプリを作っていくんですね。
え?ツイッターを作れるの? テンションあがってきた
「Tweet App」は、Progateの「Rails」レッスンでも題材になっています。Progateの経験者には馴染みがあるのではないでしょうか。今回はそのProgate Path版のようなレッスンですね。
ProgateではレッスンがWebで完結していたため、学べることはプログラムの書き方がメインでしたが、Progate PathではGitでのソースコード管理と、ESLintとPrettierを用いたコーディング規約を学べるので、よりチームで開発する時の勉強になりそうですね。
まとめ
ProgateとProgate Pathの進め方で違う点
・Progate:Web上でプログラミング学習を完結できる
・Progate Path:公式サイトの説明文を読みながら、ローカル環境で学習を進めていく
ProgateとProgate Path、それぞれで学べること
・Progate:プログラミング言語の書き方
・Progate Path:プログラミング言語の書き方と、エンジニアの実務で求められる「コードを読む力」「デバッグ力」「検索する力」「公式ドキュメントを読む力」
Progateに向いている人
・プログラミングを触ったことのない初心者
・プログラミングを一から丁寧に学びたい人
Progate Pathに向いている人
・Progateや本などで、プログラミングを学んだことがある人
・プログラミングを仕事に活かしたい人
今回の体験で、ProgateとProgate Pathを併せて実践することで、技術だけでなくプログラミングの考え方も学べるように感じたので、これならエンジニアの現場でも通用する力を身に付けることができるのではないかと思いました。
後編では、Progate Pathが大事にしているエンジニアの実務感や、IT業界の課題感を解決するために、Progateで展開しているサービスについて、Progate CEOの加藤さんとProgate教材制作担当の福井さんにお話をお伺いしました。
▼後編はこちら
Progate Path:https://path.progate.com/
編集部オススメコンテンツ
アンドエンジニアへの取材依頼、情報提供などはこちらから