こんにちは😊たまごテラスです🥚
プログラミングをオンラインで学びたい方へ
Progateの評判や、プロゲート無料でどこまでできるのか、プロゲート有料でできることについて書いていきます。
プログラミング初学者がProgateプロゲートを満了するのに何時間必要か。どこまでいけるか、実際に体験していきたいと思います。
こちらのブログで進捗アップしていきますので、これからプロゲートでプログラミングを始めたい方、何の言語から始めようかと考えている方、参考になればと思います。
フルタイム勤務、残業月40時間。自分時間はなかなか取れず、、プログラミングができるようになりたいと前々から思っていたところ、
オンライン授業が多くなった大学生2の娘が始めたことに触発され、同時にスタート。親子で全くのビギナーですが、プログラミングに年齢は関係ない・・みたいなことがProgateのHPにあり、プログラミングの扉を開きました!
株式会社Progate HPビジョンに書いてあったことを信じます✨
プログラミングは、年齢、性別、人種、立場を問わず、自分や周り、世の中を変えられる力だと信じています。この素晴らしい力を誰もが手にできるようにしたい。そして、一人でも多くの人生の可能性を広げたい。私たちは『誰もがプログラミングで可能性を広げられる世界』を目指します。 株式会社Progate ホーム<ビジョンより抜粋
Progateのホームページこちらです。
プロゲートのプログラミング学習サイトから引用させていただき、初学者目線で読者さまにプロゲイトのプログラミング学習をお伝えしていきまます(^ ^)
Progateとは?
![](https://futagotamago.com/wp-content/uploads/2021/09/laptop-1205256_1920-1024x615.jpg)
![tamagosan7](https://futagotamago.com/wp-content/uploads/2021/08/vaclav-D2t8LmcpWmo-unsplash-scaled-e1628998712381-150x150.jpg)
Progateってなあに?
『初心者から、創れる人を生み出す』の理念のもと、オンラインプログラミング学習サービスの企画・開発・運営している会社です。
Progateプロゲートで学べる言語の種類は
![](https://futagotamago.com/wp-content/uploads/2021/09/スクリーンショット-2021-09-08-22.02.13-848x1024.png)
![tamagosan7](https://futagotamago.com/wp-content/uploads/2021/08/vaclav-D2t8LmcpWmo-unsplash-scaled-e1628998712381-150x150.jpg)
どんな言語が学習できるのでしょうか
HTML&CSS JavaScript JQuery Ruby. Ruby on RailsS PHP. Java. Python. Command line
Git. SQL. Sass. Go. React. Node.js. Quest
かなりたくさん網羅してます。初めて見る言語も。
Progateプロゲートをどう使う?目標設定がわからない方へ
![](https://futagotamago.com/wp-content/uploads/2021/09/question-mark-3839456_1920-1024x683.jpg)
![tamagosan](https://futagotamago.com/wp-content/uploads/2021/08/vaclav-D2t8LmcpWmo-unsplash-scaled-e1628998712381-150x150.jpg)
何から始めていいかわかりません。
どういう方向へ進めば良いかわからない方へ
学習ロードマップを見てみましょう
![](https://futagotamago.com/wp-content/uploads/2021/09/スクリーンショット-2021-09-08-22.49.17.jpeg)
![](https://futagotamago.com/wp-content/uploads/2021/09/スクリーンショット-2021-09-08-22.49.21-1024x480.png)
Progateプロゲート学習ロードマップ
![](https://futagotamago.com/wp-content/uploads/2021/09/スクリーンショット-2021-09-08-22.47.02-1024x593.png)
![tamagosan7](https://futagotamago.com/wp-content/uploads/2021/08/vaclav-D2t8LmcpWmo-unsplash-scaled-e1628998712381-150x150.jpg)
学習ロードマップは、自分に合ったシーンを教えてくれる。
自分の進みたいシーンで、どの種類の言語を学んだらいいかわかります。
各々の学習シーンで何を学ぶもかもわかるので、目標に向かって進めます
![tamagosan7](https://futagotamago.com/wp-content/uploads/2021/08/vaclav-D2t8LmcpWmo-unsplash-scaled-e1628998712381-150x150.jpg)
では、どんなシーンがあるのでしょうか?
プロゲート学習ロードマップ、シーン1からシーン5までを簡単にまとめました
シーン1 Webページを作ろう
ゴールは:Webページの公開です
このシーンでは、簡単なオリジナルのWebページの開発をローカル環境で行い、インターネット上に公開するまでを学びます。
一般的な教材を使ってWebページの開発を一通り学んでも、オリジナルのWebページとなると不安を感じてしまうかもしれません。ここで紹介するスキルをしっかり学び、自信を持って開発と公開ができるようになりましょう。
学習すること:HTML&CSS エディタ JavaScript 開発者ツール
レイアウトを作れるようになろう
HTMLとCSSはWebページを作るために使われる言語です。
HTMLやCSSが書かれたファイルをWebサーバー上に置くことで、全世界の人にWebページを公開することができます。
快適にコーディングするために開発環境を整えよう
エディタ(テキストエディタ)はプログラミングのコードを書くときに使うツールです。HTMLとCSSはWebページを作るために使われる言語です。
エディタを利用するとコーディングが快適になり、開発効率の向上が期待できます。
Webの仕組みを知ろう
私たちが利用しているWebページは、インターネットの仕組みの上で動いています。
Webページを作れるようになるには、インターネットとWebの仕組みを理解する必要があります。
Webページに動きをつけてみよう
JavaScriptは世界でもっとも使われているプログラミング言語の1つであり、近代的なWebページを作成するためには欠かせません。
クリックでHTML要素の色や形を変えたりアニメーションを表示したりなど、JavaScriptはWebページにさまざまな動きをつけることができます。JavaScriptはHTMLやCSSと共に、Webページの表示や動作の処理に使われます。
Webページ開発のデバッグをしよう
開発者ツールはWebページ開発のデバッグに使える機能で、各ブラウザが提供しています。
開発者ツールを使えば、HTMLソースコードがWebページ上のどの部分に表示されていて、HTML要素にどのようなCSSプロパティが適用されているかを一覧で確認することができます。また、JavaScriptの実行状況も確認することが可能です。
シーン2 Webアプリケーションを形にしよう
ゴールは:Webアプリケーションの公開です
シーン1ではHTMLやCSS、JavaScriptを用いたWebページを作りました。これだけでも静的なWebページとして公開できましたが、Webページの作成者が更新しないかぎり毎回同じものが表示されるため、ポートフォリオや、製品やサービスの紹介ページなどしか作れませんでした。
会員制サイトや商品検索ページなどの機能を持つWebアプリケーションはどのように作られているのでしょうか。さまざまな機能を持つWebアプリケーションを開発するために、このシーンのスキルを学びましょう。
学習すること:サーバーサイドプログラミング オブジェクト指向 ターミナル操作 データベース Webアプリケーションフレームワーク WebAPI
サーバーで動くプログラムを作ろう
動画サービスやECサイトなど、世界中で使われているWebアプリケーションは、いずれかのサーバーサイドのプログラミング言語を用いて作られています。
HTML、CSS、JavaScriptだけでは、いつ誰がアクセスしても同じ表示となる静的なWebページしか作れませんでした。サーバーサイドのプログラミング言語を学ぶことで、ユーザーのリクエストに応じた動的なWebページを作れるようになります。
コードを整理し、機能の追加や変更をしやすくしよう
オブジェクト指向を学ぶことで、作りたい機能をどのようにプログラミングすると良いかをイメージできるようになります。
オブジェクト指向を学んで、メンテナンスしやすいプログラムを書けるようになりましょう。
コンピュータの操作を効率的にできるようになろう
ターミナルを利用することで効率的にコンピューターを操作することができます。
Webアプリケーション開発では、ライブラリのインストールやデータベースの操作などを行いますが、これらの作業はターミナル上でのコマンド操作が基本です。
データベースを扱ったWebアプリケーションの機能を作ろう
データベースとは、アプリケーションで扱うべきデータをプログラムコードから分離して集中管理する仕組みです。アプリケーションは、データベースを使うことで正しく安全にデータの追加・更新などができます。
データベースの最初の学習は、現在広く使われているリレーショナルデータベースから行うのがよいでしょう。まずは、リレーショナルデータベースを操作するためのSQLについて学びましょう。
フレームワークを使用して効率よく開発しよう
フレームワークを利用して、Webアプリケーションの基本的な動作や仕組みについて学びましょう。
RailsはRubyでWebアプリケーションを開発するときに、もっとも使われているフレームワークです。豊富な機能や開発におけるコード量の少なさが特徴です。まずは、Railsを使って簡単なSNSアプリを作ってみましょう。
公開されたAPIの機能を取り入れ、作れる幅を広げよう
APIとはApplication Programming Interfaceの略で、アプリケーションの個々の機能を分離して使用するための取り決めのことです。
Web APIを活用して自分のアプリケーションに機能を追加してみましょう。まずは、無料のデータを使ってWeb APIのイメージを掴みましょう。
シーン3 みんなアプリケーションを開発しよう
ゴールは:チームでのアプリケーション開発
シーン2ではフレームワークを使ってWebアプリケーションを開発できるようになりました。ここまでは1人で開発を進めてきましたが、実際の開発ではチームで進めることが多いです。
チーム開発ではお互いの得意なことで助け合ったり、より大規模な開発に挑戦できたりなど、1人では体験できないことがたくさんあります。チームで開発するために必要なスキルを確認しましょう。
学習すること:開発フロー 仕様と設計 Git テスト リファクタリング
実際の開発現場をイメージできるようになろう
開発フローとはWebアプリケーション開発の作業工程のことです。開発フローには主に、設計、実装、テストの作業フェーズがあります。
開発フローを学ぶと、チーム開発を効率的に進められるようになります。
どんなものをどうやって作るのかを考えよう
アプリケーションの開発を始める前に仕様と設計を決めましょう。そうすることで手戻りを少なくすることができます。
仕様をチームで共有できていると、ユーザーがどんな風にアプリケーションを利用する想定なのかを、各メンバーがイメージできるようなります。
バージョン管理システムを使ってチームでコードを共有しよう
Gitはプログラムコードなどの変更履歴を管理するバージョン管理システムです
Gitは開発の効率化や不具合の迅速な修正など、コードをバージョン管理をするメリットは強力なため、多くの現場で使われています。Gitが使われている現場では、Gitが使えないと開発に加われないため、必須のスキルと言えるでしょう。
不具合の少ない高品質なコードにしよう
テストとはアプリケーションが想定どおりに動くことを確認するプロセスです。「期待する動き」をまとめたテストケースをもとに、「実際の動き」を確認します。
アプリケーションの開発現場では機能追加や変更のたびにテストを行います。自動テストについて是非学んでおきましょう。
開発を進めやすいコードに改良しよう
リファクタリングとは、プログラムの機能を保ちながら理解しやすいコードに改良することです。具体的には、重複したコードを整理したり、変数や関数の命名を分かりやすくしたりすることなどが挙げられます。
リファクタリングの目的や方法と実施範囲を確認し、チーム内で相談しながら進めましょう。
シーン4 公開できるプロダクトに必要なことを知ろう
ゴールは:ユーザーの利用を想定した環境とセキュリティの理解
シーン3まででチームでWebアプリケーションを開発できるようになりました。プロダクトが完成したら、いよいよ公開です。
本格的なプロダクトを公開することには責任が伴います。とくに、ユーザーの個人情報を取り扱う場合は、大切な情報が漏洩することの無いように細心の注意が必要です。
このシーンでプロダクトを公開するためのスキルを学び、ユーザーに安全で安定したサービスを届けられるようになりましょう。
学習すること:サーバー構成 ネットワーク クラウドサービス Webセキュリティ
アプリケーションの公開に向けてサーバーの準備をしよう
サーバーとはクライアントの要求に対してさまざまな機能を提供する、ネットワークに繋がったコンピューターのことです。サーバーがクライアントとやり取りするには、ネットワークで繋がっている必要があります。
Webアプリケーションの公開のために必要となるサーバーの役割やスペック、調達方法を決められるようになりましょう。
サービス公開に必要な通信の仕組みを知ろう
ネットワークとは、コンピュータなどの機器が相互に接続してデータ通信を行う仕組みのことです。インターネットはネットワークの一部であり、プロトコルという多重構造の通信技術を基本としています。インターネット上の通信は、TCP/IPプロトコルに基づいてやりとりされます。
知っておくべきこととしては、グローバルIPアドレスとローカルIPアドレスの仕組みやNAT変換、プロトコルとポート番号の関係性、ルーティングの仕組みなどが挙げられます。リファクタリングの目的や方法と実施範囲を確認し、チーム内で相談しながら進めましょう。
クラウド環境にプロダクトを公開しよう
クラウドサービスとはネットワークを経由してサーバーやソフトウェアなどを利用できるサービスの総称です。その中には開発したWebアプリケーションを公開するためのサービスがあります。
AWSはITインフラのクラウドサービスの中でもっとも使われているサービスです。ここでは、AWSを使ったWebページのデプロイから始め、APIやデータベースの追加までできるようになりましょう。
安全なサービスを届けよう
ユーザーが安心して使い続けられるWebアプリケーションを作るために、セキュリティ対策について学びましょう。
ユーザー登録機能の実装を通して、セキリュティを意識したアカウント管理方法について学んでいきましょう。安全なアカウント管理は、多数あるセキュリティ対策の一部ですが、一般的なWebアプリケーションに含まれる機能です。実際に手を動かしながらセキュリティのイメージを掴みましょう。
シーン5 プロダクトを接続して届けよう
ゴールは:Webアプリケーションの運用と保守
シーン4まででユーザーの利用を想定したプロダクトを公開することができました。
プロダクトを公開すると、新しい機能の追加や改善したい問題がたくさん見つかります。プロダクトは公開されてからが本番なのです。
このシーンのスキルを学んで、問題の発見や改善を迅速に行い、継続的にプロダクトを届けるためのスキルを学びましょう。
学習すること:CI/ CD データ分析基盤 パフォーマンス スケーラビリティ 耐障害性
継続的にプロダクトを改善しユーザーに素早く届けよう
CI/CDとはContinuous Integration(継続的インテグレーション)とContinuous Delivery(継続的デリバリー)の略称です。
CI/CDを取り入れることで、開発者の生産性向上やアプリケーションの品質向上が期待できます。
プロダクトの利用状況を把握し改善に役立てよう
Webアプリケーションをリリースしたら、ユーザーのサービス利用状況やシステムの稼働状況を知るために、データの分析を行いましょう。分析することで、アプリケーションの改善点やシステムの問題点を把握することが可能です。
Google Analyticsは、もっとも使われているデータ分析ツールです。 ここでは、分析基盤を構築する前にGoogle Analyticsを通じて、データ分析の目的や指標について学んでいきましょう。
ユーザー体験を向上させよう
パフォーマンスとは、Webアプリケーションが限られたシステムリソースで、効率よく機能しているかを示すものです
ここでは、Webページのパフォーマンス改善について学んでいきます。まずは、パフォーマンスの計測やチューニングを体験してイメージを掴みましょう。計測方法は、Chromeの開発者ツールを使うのがオススメです。記事やブログで使い方について調べてみましょう。
ユーザー数が増えても動き続ける仕組みを作ろう
スケーラビリティとは、ユーザー数の増加に伴う負荷の増加に対し、システムが適切に対応できる能力のことです。スケーラビリティの高いシステムを作るには、負荷に応じて処理能力を上げられる構成である必要があります。
スケーラビリティの高いシステムを構築できるようになれば、ユーザー数が急激に増えてもサーバーが落ちることはなく、サービスを提供し続けることができます。将来的なサービスの成長を見越して、スケーリングの仕組みを取り入れたシステムの構築を目指しましょう。
プロダクトの問題に対応できるようになろう
障害によるサービス停止を起こしにくいシステムを構築できれば、ユーザーに安定してサービスを届けられます。
障害に関するスキルは実際に運用や保守を経験しながら学ぶのが理想です。ここでは、障害に関するスキルには、どんなものがあるのかイメージできることを目指しましょう。
無料?有料? 無料でどこまでできるかな
![](https://futagotamago.com/wp-content/uploads/2021/09/ilya-pavlov-OqtafYT5kTw-unsplash-1024x684.jpg)
![tamagosan7](https://futagotamago.com/wp-content/uploads/2021/08/vaclav-D2t8LmcpWmo-unsplash-scaled-e1628998712381-150x150.jpg)
無料でどこまでできるの?
初級編まではひと通り学ぶことができます。
中級編に進むには有料会員になる必要があります。
月額1078円ととってもお得なのでおすすめです
![tamagosan7](https://futagotamago.com/wp-content/uploads/2021/08/vaclav-D2t8LmcpWmo-unsplash-scaled-e1628998712381-150x150.jpg)
さあ、始めましょう!
Progate コース一覧のWeb開発パスからスタート!
![](https://futagotamago.com/wp-content/uploads/2021/09/3DC5D5CC-B27F-4CF1-A310-2E58F0225B83_1_201_a-1024x348.jpeg)
Web開発パス(Node.js)
初級編:無料でできるHTML&CSS
STEP1では進め方の説明です。ステップ2へ進むと、初級編が始まります。
![](https://futagotamago.com/wp-content/uploads/2021/09/28B7BFB6-5938-4DC4-AF9C-D05409FABE48-1024x694.png)
まずはHTML&CSSの初級者編。
![](https://futagotamago.com/wp-content/uploads/2021/09/0E432DAD-6D8F-41CD-8DD6-67FFF996E994_1_201_a-1024x993.jpeg)
スライドを見ながら進めること3時間。超集中!
無事完了しました。↓こういう演出。けっこう嬉しい💓
![](https://futagotamago.com/wp-content/uploads/2021/09/EF5876C6-E2E9-4365-971C-7DF83BA29255_1_201_a-1024x541.jpeg)
![tamagosan7](https://futagotamago.com/wp-content/uploads/2021/08/vaclav-D2t8LmcpWmo-unsplash-scaled-e1628998712381-150x150.jpg)
初級編の感想
楽しかった!スライドを進める→演習。この繰り返しで作っていきます。
固まってしまうこともなく、スムーズでした。
ちなみに大学生の娘はここまで1時間半ほど。1日目にして、倍の差!面白いくらい差をつけられました。めげません💦・・あきらめないぞ。頑張る💪
中級編:有料 HTML&CSS
中級編に進むべく有料会員になりました。ひと月1078円。
スクール通いを考えたらお得な価格だと思います。
いよいよ中級編です!
![](https://futagotamago.com/wp-content/uploads/2021/09/8721260F-F471-4733-8EEA-6BF3C9021D45-1024x887.png)
有料会員のみトライすることのできるHTML中級編
続きはこちらでアップしていきます→
コメント