【プログラミング】社会人初心者が2か月で動的なWebページを自作する方法
０．はじめに
この記事では時間のない社会人でも2か月くらいで動的なWebページを作れるようになる方法をお伝えします（1万字超）
想定している読者は社会人や大学生でスキルゼロだけどWebページを作れるようになりたい！と思ってる人です
使用する言語はRuby on Railsを想定していますが、全然知らなくても大丈夫です！というかWebについて何も知らなくても大丈夫です。僕も全然知りませんでした
当然ですが、高価な学習サービス(数十万)を使えば、快適に楽にWebページ制作は学べます。しかし初心者がいきなり大量課金するのは難しいので、僕が実際にやったお金のあまりかからないルートを紹介していきます。予定では4000円以内です
僕自身、2019/12上旬からプログラミング学習を始めて2020/1月末には基礎的なもの（ログイン・ログアウト・投稿機能などを持つ見た目が整ったサイト）は作れるようになりましたので安心して読んでください
こんな感じです↓
本記事の構成は以下のようになっています
１．Webページ制作に必要な技術の取得方法
２．学習継続方法
１．Webページ制作に必要な技術の取得方法
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でこんなことができる」と知ること、そして一度はやってみることです。何ができるか、それを使うと自分のやりたいことがどれだけできるかを知ることが最重要です。実際に成果物を作っていくと文法とかは自然と覚えるので初めから覚えようとするのは労力の無駄と断言します
（テニスで例えると、素振りするより実際に打つ方が何倍も成長することと同じです。素振りしすぎないでください。球はいつでも打てます）
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か月で来れるといいですね
アドバイスですが、学習する中で分からない言葉や概念はたくさん出てきます。これらを理解する一番の方法は使用者になることです
例えばドラクエを全く知らない人がドラクエの説明を10分受けるのと、実際に10分やるのとどちらが理解が進むでしょうか？プログラミング言語も同じです。実際に使って覚えましょう
３．フレームワークを使う（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の運用方法が教材としてまとめられています。しかも他の教材に比べて圧倒的に安いです。なのでワンランク上の教材としては人生逆転サロンの教材がおすすめです
僕は2週間ほど集中して取り組んだところRuby on Railsに関する主要な教材は一通り終えることができました。結果実践的スキルがめちゃくちゃ上がりました。会員になって一か月が過ぎましたが今も継続して学習しながら成果物も作ったりしています。やるべきコンテンツは尽きる気配がありません
Progate終わって結構できるようになったなあなんて思っていましたが、今となってはRuby on Railsの入り口に立ったに過ぎなかったと思います
集中して取り組めば（土日も）2週間で一通り終わり、動的なWebページを作るスキルは十分に保有している状態になります。ここまでで学習始めてから計8～9週間です。このように約2か月で十分にスキルを獲得できます！
サロン教材は一通りやってほしいのですが、一応以下にWebページ作りに欠かせないRuby on Railsの便利機能を並べますのでここは外さないで重点的に取り組みましょう
・Resources
・Devise
・Bootstrap
・ActiveAdmin
話がずれますが、人生逆転サロンに入るとサロンのコミュニティに参加できます。主にプログラミングとビジネス関係のチャンネルが色々あって目的に応じて参加して、有益な情報やスキルを持った人にアクセスできます
単純にプログラミング学習のために入ってもいいと思いますが、サロンの繋がりを活用すると費用対効果が爆上がりします
２．学習継続方法
この章では忙しい社会人でも上手く学習を続けるためのポイントをまとめます。1章より一般的な内容になりますがなるべく具体的にお伝えします
ちなみに僕は平日は3時間、休日は7～8時間は学習に充てています。建設現場で働いていますが全然無理はしていません。21時半には寝て7.5時間くらいは睡眠時間にあてているので毎日かなり元気です
それでは本題に入ります。ポイントは3つあります
１．目的意識
２．自分だけの時間を作る
３．生活リズムの確立と学習時間の埋め込み
【ポイント１：目的意識】
一番初めに固めるべきは目的意識です。目的がぼんやりしていると初めはモチベーションが高くても「あれ、なんでこんなに頑張ってるんだろう？」といつか疑問を感じて行動をやめてしまいます。目的が明確で強い願いと結びついていれば、疲れ迷ったときでも目的を見直すことで心をリセットすることができます
目的は自分を行動に向かわせるための強力な手段として使えるということです
目的はなんでもいいです。稼ぎたい、モテたい、自由になりたい、転職したい、サービスを作りたい、色んな願いがあります
【ポイント２：自分だけの時間を作る】
効率よく学習するには自分だけの時間が必要です。孤独な時間ということではありません。自分が完全に主体で中心の時間です。他人に振り回されない時間です
だいたいの社会人は仕事終わりに飲み会があったり、四六時中仕事の連絡が入ったりと何かと自分の時間を搾取されます。時間がないわけではありません。奪われているんです。搾取されているんです。この意識が大切です
まとまった学習を継続するには自分の時間を最大化する必要があります。そのためには無駄な時間を徹底的に排除します。よく見かけるのは無駄な飲み会、無駄な会話、無駄な残業、無駄な気遣いなどです
ただしこれらを排除するのは人によってはとても難しいことです。なぜなら人に嫌われるリスクが上がるからです。しかし他人時間を生きたら自分時間は生きられません。どちらか片方です。あなたはどちらが好きですか？他人時間はとめどなく押し寄せてきます。他人時間は疲れます。その疲れをとるためにまた時間を使います
自分の意思で断ち切らないといけません
僕は新入社員ですが、飲み会は普通に断りますし、必要性のない残業もしないですし、興味ない会話に付き合いません。もちろん丁寧に静かに、なるべく角が立たないようにはしています
こういったことをするためには周囲との普段からのコミュニケーションが大事です。普段から自分の行動の裏にある理由や気持ちを周囲に伝えておくことが、周囲の理解を得るコツです。また好きな人にはちゃんと好意や感謝を伝えておきましょう。そうすれば周囲のお願いやオファーを断るときに、しっかり理由を添えることで相手は「自分は嫌われてるのかな？」と思わず済みます。「あいつは○○が本気でしたいんだな」と分かってくれます
【ポイント３：生活リズムの確立と学習時間の埋め込み（習慣化）】
僕がおすすめするのは
無理のない 一定の生活リズムで 毎日同じ時間帯に 学習する
ことです。こうすることの主なメリットを並べます
１．型が決まるので、計画する余計な手間がない
２．心のリズムが整う
１．について
毎日同じ時間に同じことをやるようにすると、明日はいつ何をやって明後日はいつ何をやってと考える必要がなくなります。ストレスなく行動に入れます。ムスリムの礼拝の時間のようなものです。その時間はそれをやると決まっているんです。（自分時間を確保した前提で話しています）
僕はその時間になるとほぼ無意識にパソコンの前にいます
２．について
毎日同じ生活リズムを送ると身体がそのリズムに合ってきます。身体と心はめちゃくちゃ連動しているので（心は脳という身体の機能だから）、身体がリズムをとると心も安定したリズムに乗り、精神的なブレが減ります。モチベーションにも左右されにくくなります
ではどうすれば習慣化できるでしょう？以下の流れでやりましょう。
生活リズムの確立→学習時間の埋め込み
まずは自分時間を増やして生活リズムを確立します。この時点ではまだ学習できなくてもいいです。毎日不規則な生活をしていると絶対に何事も継続できないので、規則正しい生活リズムを作り上げましょう
生活リズムを整える最重要ポイントは睡眠時間を安定させることです。人によりますが6時間は絶対に寝ましょう。できれば7時間以上が良いです。また、その睡眠時間の中に22~24時の時間帯を入れてください。睡眠の質が全く変わります。体感としては、この時間帯の睡眠はほかの時間帯に比べて2倍効率が良い感じがします
次に大事なのは食のリズムです。1日3食で夜は8時までに食べるのがベストです。それ以降食べると睡眠の質が下がります。また、毎日同じ時間に食べるとよいです。酒は睡眠の質を下げるのでほどほどにしましょう
生活リズムが整っているか確認する最も分かりやすい方法は寝起きの状態を見ることです。寝起き時に頭がスッキリしていて空腹を感じていれば、非常に良いです。逆にそうでない場合、何か改善する余地があります
また、排便のリズムも指標です。毎日同じタイミングで起きていればかなり良いです
生活リズムができたら空いている時間に学習時間を埋め込みます。僕の例を出します
21時15分～ ：入眠
4時45分～ ：起床、シャワー＆髭剃り
5時～ ：プログラミングなどの学習（学習時間1）
6時～ ：朝ごはん
6時半～ ：通勤・勤務・帰宅
18時15分～ ：夜ごはん、風呂、歯磨き
19時～ ：プログラミングなどの学習（学習時間2）
21時～ ：寝る準備
僕はこのように生活リズムを守りながら、平日でも3時間学習時間を確保しています。何かの理由で自分時間が減った場合は生活リズムを優先して守ります。例えば帰宅が20時になったら学習時間2を減らして21時には寝るようにします。生活リズムが最重要なんです
あとちょっとしたテクニックですが、労働前と後では学習効率が結構違うので労働前のフレッシュな状態の朝に勉強すると効率が良いです
僕の例を見て、こんなに自由時間ないよと思われるかもしれません。その場合、今以上に自分時間を取り戻すしかありません。今が精一杯なら新しいこと（プログラミング学習）ができるはずはないです。今が精一杯なら何かを捨ててスペースを作ってそこに新しいことを入れ込むしかないです
僕はお酒が好きなので仕事終わりに家でよく飲んでました。でも今ではほとんど飲みません。その時間を学習に使うことにしたからです。どちらもすることはできないです。何かを選び、その裏で何かを捨てる必要があります
やや一般的な話でしたが以上が学習継続のコツでした。そしてここがこの記事の終わりです。ここまで読んでくださりありがとうございました！！
色々言いましたがまずはProgateを触ってみてください。ゲーム性があって面白いのでどんどんプログラミングが好きになると思います！
それではまた
追伸：人生逆転サロンやエンジニア転職に興味ある方は、サロン内の有料講座（エンジニア転職までサポートする共同開発講座）についてレビューしたこちらの記事も読んでみてくださいね
https://note.com/pomato/n/n7f9327be98ea
この記事が気に入ったらサポートをしてみませんか？