プログラミング初心者が2か月で動的なWebページを作る方法【必要な技術と学び方】

この記事はプログラミング初心者が2か月ほどで動的なWebページを作る方法をお伝えします。具体的には、そのために必要な技術の説明と低費用での学び方になっています

想定している読者は社会人や大学生でスキルゼロだけどWebページを作れるようになりたい！と思ってる人です

使用する言語はRuby on Railsを想定していますが、全然知らなくても大丈夫です！というかWebについて何も知らなくても大丈夫です。僕も全然知りませんでした

当然ですが、スクールの高価な学習サービス(数十万)を使えば、快適に楽にWebページ制作は学べます

しかし初心者がいきなり大量課金するのは難しいし断然コスパが良い方法があるので、僕の経験を踏まえて低コストの学習ルートを紹介していきます。予定では4000円ほどです

僕自身、2019/12上旬からプログラミング学習を始めて2020/1月末には基礎的なWebページ（ログイン・ログアウト・投稿機能など有り）は作れるようになりましたので安心して読んでください

実際に作ったものはこんな感じです↓

動的Webページ制作に必要な技術の取得方法

動的なWebページを作るには主に以下の3つのスキルが必要です。意味が分からないと思いますが大丈夫です。一つずつ見ていきます

動的Webページ製作に必要な3スキル

ページの内容やレイアウトを作る（HTML & CSSの運用スキル）
動的な処理を作る（Rubyの基礎的な運用能力）
フレームワークを使う（Ruby on Railsの活用）

１．ページの内容やレイアウトを作る（HTML & CSSの運用スキル）

【HTMLとCSSって何？】

Webページの内容やレイアウトを作るには、HTML（Hyper Text Markup Language）という言語とCSS（Cascading Style Sheet）というスタイルシートを用います。なんのこっちゃ分からないと思うので説明していきます

HTMLとはWebページの骨組み（主な内容）を作るためのツールとして使える言語です。HTMLを使うと、

他のページへのリンクを貼る
見出しを作る（大きさ6種類）
段落を作る
表を作る
リストを作る

といったことができます

しかしHTMLだけだとレイアウトや色などが設定できず殺風景なページになってしまいます

そこで活用するのがCSSです。その名の通りCSSはページの体裁を整えるスタイルシートのことです。CSSを用いると以下のようなことができるのでページを好みの表示にできます

ページレイアウトを整える（余白や大きさ、位置など）
色を設定する
背景をつける
レスポンシブデザインを実現する

このようにWebページはHTMLで内容を作ってCSSでデザインを整えることで成立します。この二つは切っても切れない関係です

なんとなくHTMLとCSSがお判りいただけたでしょうか？

【HTMLとCSSをどうやって学べばいい？】

HTMLとCSSさえできれば動きはないものの、Webページの見た目は作れてしまいます。楽しみですよね！ではどうやって学べばいいのでしょうか？

僕がダントツでおすすめするのはプログラミング言語のオンライン学習サービス「Progate」です！！もう一度言います。Progate一択です！！

Progateはプログラミング入門者にとって非常に有名かつ人気のサービスです。その特徴はとにかく初心者目線ということです

小学生でもできるようになっています。つまり予備知識は一切全くいりません。さらに月額1000円以内と超良心的価格になっています。プログラミング学習サービスで数万、数十万はざらなのであり得なく安いといえます

この1000円を渋る人は要注意です。この程度の課金もしたくない人は高確率でうまくいかないです

さて、ここからは具体的な学習方法になります

Progateは多彩なプログラミング言語のコースを提供しています。無料会員でもできるコンテンツがあるので試しにやってみましょう

感覚がつかめたら1000円払って有料会員になってHTML&CSSのコースを学びましょう。学習を無理なく進めるコツを並べます

通勤などの隙間時間にProgateのアプリ版を進める
アプリ版で概要をつかんだらWeb版をやってみる
量や質より、とにかく初めのうちは毎日少しでも触れて抵抗をなくすこと
なれてきたらガンガン進めて1～2周すること
難しく感じるパートは無理せずゆっくり進める
完璧にこだわらないこと
暗記しないこと、暗記しないで都度調べること

リスト最後の二つ「完璧にこだわらないこと」、「暗記しないこと、暗記しないで都度調べること」は重要です

プログラミングはテストじゃありません。コミュニケーションでもありません。文法を覚えといて助かるのは調べる手間が省けることくらいです。といっても、初心者が分からないことはググればすぐ出ます

大事なのは、「HTMLやCSSでこんなことができる」と知ること、そして一度はやってみることです。何ができるか、それを使うと自分のやりたいことがどれだけできるかを知ることが最重要です

HTMLやCSSで何ができるか分かれば必要なときに思い出したり調べたりして対処できますが、何ができるかさえ知らなければ調べようがありません

実際に成果物を作っていくと文法とかは自然と覚えるので初めから覚えようとするのは労力の無駄と断言します

1～2周やって、HTMLとCSSの機能を把握し、調べればやりたいことができる状態に持っていきましょう

そして簡単なオリジナル成果物を作りましょう。好きなサイトを模写してもいいですし、自分で考えた画面を製作してもいいです。簡単で少しでいいからProgateから離れて自分で作ってみましょう

これが次に進む一つの目安です。2週間でできれば上々です。できる人なら1週間で終わるかもですね

早さは重要ではないですが、トロトロやってると成長を感じづらいし、効率も良くないので、毎日少しは進めて、できるときはガンガン進めましょう

２．動的な処理を作る（Rubyの基礎的な運用スキル）

【動的なページって何？どうやったら作れる？】

動的なページとは簡単に言うと、入力に対して反応するページです。動的なページを作るには、ユーザーの入力を読み取り、それに応じた計算や表示をするための処理が必要です

例えば何かのサイトのログインページを思い浮かべてください。アドレスなどを入力してログインボタンを押すとログインできたり、失敗したりしますね。これが動的なページです

動的なページの裏にはプログラム（一連の処理）があります。そのプログラムを書くために使うのがプログラミング言語です

プログラムの例を見てみましょう

if comment == "YouAreBeautiful!"    #もしcommentが"YouAreBeautiful!"なら
     puts "OK"                      #OKと表示せよ
else                                #そうでない場合
     puts "NG"                      #NGと表示せよ
end                                 #条件分岐終わり

英語が分かればなんとなく分かると思いますが、これは条件分岐のプログラムの例です。"#"の後ろの文はプログラムの一文一文の意味を表しています

このプログラムの内容を訳すと
「もし変数comment に格納されたデータが YouAreBeautiful! だったら OK と表示せよ、そうでなかったら NG と表示せよ」
となります

よく分からなくても、プログラムでは条件を設定できるんだなあと何となく分かれば大丈夫です。これはプログラムのほんの一例に過ぎません

プログラミング言語を用いるとこういった条件分岐以外にも、非常に多彩なプログラム（処理）を書くことができます

プログラミング言語には様々な種類がありますが、本記事で紹介するのは「Ruby」という言語です

Rubyは非常に便利な言語でスタートアップでもよく使われています。なお、Rubyは後で紹介するRuby on Railsというフレームワークの中で用います

よく分からないと思いますが、これについても後ほど説明しますので安心してください

長くなったのでこのパートを以下にまとめます

動的なページとは：入力に対して反応するページ
動的なページの作り方：プログラム（一連の処理）を用意する
プログラムの書き方：プログラミング言語（今回はRuby）で書く

【Rubyをどうやって学べばいい？】

さて、Rubyの学び方ですがこれもProgateでやるのがいいです。くどいですが、とにかく初心者の入門はProgateで間違いありません

勉強の仕方はHTMLやCSSと同じです。アプリでちょこちょこ触ってWeb版で力にしましょう

ただしHTML&CSSと違ってロジック（論理性）が求められるのでプログラミング初心者にとっては難しく感じることは間違いないですが、成長は必ずするので少しずつ進めましょう

こちらも学習コースを１～２周して何ができるのか把握して、オブジェクト指向（Rubyが持つ特徴）に馴染めたらOKです。ここまでくるとプログラミングがどんなものかだいぶ分かってくると思います

Rubyの学習は１～２週間で終わらせましょう。毎日やれば普通に無理なく終わります

ここまでHTML&CSSとRuby合わせて、計3週間から1か月で来れるといいですね

アドバイスですが、学習する中で分からない言葉や概念はたくさん出てきます。これらを理解する一番の方法は使用者になる（自分でやる）ことです

知らない聞きなれない機能や概念でも使ってみたら案外簡単だったということはよくあります

知らないうちから遠ざけないで、「よく分からんけどそういうものがあるんだな」くらいに思っておけばいいです

知らなかったものを使えるようになる楽しさがプログラミングの醍醐味の一つですからね

３．フレームワークを使う（Ruby on Railsの活用）

【フレームワークって何？Ruby on Railsとは？】

まずフレームワークの説明からです。フレームワークって抽象的で難しい概念ですが、簡単に言うと、手間を省いて何かをするための便利機能です

今回紹介するRuby on Railsというフレームワークを使うと、ひとつひとつプログラムを書かなくても（手間を省く）、基本的な機能を持った動的なWebページ（サイト）を作ることができます

例えば、動的な処理の例としてログイン機能があります。ログイン機能をRubyで一から書くと時間がかかります。しかしRuby on Railsを使うとプログラムを書かずに簡単に短時間でログイン機能を実現できます

このように動的なページの基本的な機能を楽に実現できるのがRuby on Railsというフレームワークです（このフレームワークは名前の通りRubyを言語として用います。だからRubyのスキルはここまでにある程度上げておく必要があります）

といってもRuby on Railsが具体的にどんなものかはまだ分からないと思います(笑)。こちらも実際に使うのが一番早いですので、考えすぎないでくださいね

【Ruby on Railsの学び方】

結論から言います。Ruby on Railsの学習は二段階でします

第一段階：Progate
第二段階：ワンランク上の教材

＜第一段階＞　Progate

第一段階はもはやおなじみのProgateです。学習は今まで通り進めます

HTML&CSSとRubyを終わらせてここまで来れていれば、Ruby on Railsの学習コースも絶対できます！

実はRuby on Railsのコースは今までで一番骨があります。今までの知識（HTML&CSSとRuby）を柔軟に引っ張り出して使う必要があります

初めは難しいですが、Progateには奇跡的に易しい（優しい）解説スライドが潤沢に用意されています。少しずつ慣れていきましょう！

今は想像つかないと思いますが、Ruby on Railsのコースを1周したころにはWebページの仕組みがかなり明確に理解できていると思います

コースを1周したら、次はRuby on Railsの環境構築に挑戦しましょう（ここまでで学習始まりから計５～６週間を想定）

ここで環境構築という聞きなれない怖いワードが出てきました。でも大丈夫です。説明します

環境構築とは自前のPCにプログラミングするための環境を準備することです

今まではProgateの中でプログラミングしてましたから、自分のPCにプログラミングする環境を用意しなくても問題ありませんでした

しかし自分でWebページを作るには自分のPCでやる必要があります。だから環境構築が必要なのです

といっても環境構築するために何をどうすればいいのか全く分からないと思います。しかし実はProgateには各プログラミング言語の環境構築方法が非常に丁寧な記事としてまとめられています

その中にRuby on Railsの環境構築方法もあります。なのでその記事の手順に従えば自分が何をしているのか分からなくても環境構築できます。（Ruby on Railsの環境構築にはRubyの環境構築も含まれます）

というわけでRuby on Railsの環境構築ができたので、ついに自分でWebページを作れるわけです！

実はここまでくればもう動的なページはそれなりに作れます。しかしもう少しRuby on Railsのスキルを上げましょう。（もちろん作ってみても全然いいですよ！！でももうちょっとスキルアップもしましょう！）

なぜ？

Progateはあくまで入門者がプログラミングの基礎的な部分を勉強するうえで最良のツールであって、実践からは遠いです。ここでいう実践とは、エンジニアが実際にするプログラムの書き方です

実践的なプログラムは簡潔で整理されています。またProgateでは教わらないRuby on Railsの便利な機能をかなり活用します

だからProgateだけで実際にWebページを作るのはちょっともったいないです。もう少し学習すれば飛躍的にスキルが上がり、できることもかなり増えます

では次はどうすればいいのでしょう？

＜第二段階＞　ワンランク上の教材

基礎が固まったらRuby on Railsをより実践的に扱えるようにワンランク上の教材に手を出しましょう

以下にワンランク上の教材の例を３つ並べます。他にも色々ありますが割愛します

・TECHACADEMYのWebアプリケーションコース
URL: https://techacademy.jp/rails-bootcamp
価格: 10～20万円
専属メンターのカウンセリング有、メンターのチャットサポート制度あり
Gitを学べる（チーム開発時に必須のプロジェクト管理ツール）

・Udemyの教材
URL: https://www.udemy.com/courses/search/?q=ruby%20on%20rails&src=sac&kw=ruby
価格：１～２万円
メンターなし
現役エンジニアなどが教材を作成し投稿、教材によって内容は異なる
ユーザーが教材を評価するので、上位の教材の品質は保証されていると思われる

・人生逆転サロン会員用のRuby on Railsの教材集
URL: https://still-badlands-20737.herokuapp.com/
価格（会員費）： 3000円/月（教材費無料）
メンター常駐
Git学べる、その他Ruby on Railsの実践的便利機能を幅広く教材にしてある
サロン会員として様々な情報や人にアクセス可能

このように価格もサービスも様々ですが、初心者にとって重要なのはメンターの有無です

調べても分からないことを聞けるので時間の浪費を避けられますし、自分では気づかないコードの非効率な部分や良くない書き方を指摘してくれるので、より良いプログラムを書けるようになります

僕が実際にやったのは人生逆転サロンの教材でした。サロン会員になると無料で使えます

人生逆転サロンはサロンオーナーがエンジニア（プログラミング講師もしてた）だった + アラサーからのエンジニア転職を応援しているので現場を意識したかなり実践的なRuby on Railsの運用方法が教材としてまとめられています

しかもスクールと同様にメンターの手厚いレビューが受けられる割に圧倒的に安いです。なのでワンランク上の教材としては人生逆転サロンの教材がおすすめです

【注】なお、サロンの会員になれば教材を使うことはできますが、サロン内の有料講座で共同開発講座という初心者をエンジニア転職まで持っていく企画もあります。（詳しくはこちらhttps://ichitasu.com/2020/03/15/%e3%83%97%e3%83%ad%e3%82%b0%e3%83%a9%e3%83%9f%e3%83%b3%e3%82%b0%e5%88%9d%e5%bf%83%e8%80%85%e3%81%af%e3%82%b9%e3%82%af%e3%83%bc%e3%83%ab%e3%81%ab%e8%a1%8c%e3%81%8b%e3%81%aa%e3%81%8f%e3%81%a6%e3%81%84/ ）こちらはチーム開発を経験できるのでエンジニアとしての総合力が非常に高まります

僕は2週間ほど集中して取り組んだところRuby on Railsに関する主要な教材は一通り終えることができました。結果実践的スキルがめちゃくちゃ上がりました

会員になって2か月が過ぎましたが今も継続して学習しながら成果物も作ったりしています。やるべきコンテンツは尽きる気配がありません

ProgateのRuby on Railsコースが終わって結構できるようになったなあなんて思っていましたが、今となってはRuby on Railsの入り口に立ったに過ぎなかったと思います

（土日も）集中して取り組めば2週間で一通り終わり、動的なWebページを作るスキルは十分に保有している状態になります。ここまでで学習始めてから計8～9週間です。このように約2か月で十分にスキルを獲得できます！

サロン教材は一通りやってほしいのですが、一応以下にWebページ作りに欠かせないRuby on Railsの便利機能を並べますのでここは外さないで重点的に取り組みましょう