こんにちは。副業で本業を超えることが目標の菅生です。
このブログでは、私が副業の実践のために調べたり行った経験を書き連ねています。
本記事は
- Progateってほんとに身に着くの？
- どれくらいプログラミング勉強したらホームページとか作れるようになるの？
という疑問をお持ちの方向けに、菅生の実体験をお話しします。
この記事の1文まとめ
・菅生は未経験からスタートして3ヵ月くらいの学習で妻のキャンドルサイトを作れた！
前回の副業日記では、未経験者はProgateを始めて、
基本的なことを学んだらとにかく何か作ろう！というお話をしました。
でも、
- Progateやったら、本当に身に着くの？
- どれくらい勉強すればいいの？
という疑問を持ったことってありませんか？
私はありました。
なにせ、まったくの未経験なので、学習中の自分のレベル感とか、学習後の自分がどうなっているか、などが全く予想できませんでした。
初めて自力で完成させるまでどれくらい勉強した？
結論から言えば、菅生は3ヵ月程度の学習で、LP(ランディングページ）を作れるようになりました。
3ヵ月、と書きましたが、菅生は本業を終えたあと、自宅で学習することになるので、平日の学習時間はせいぜい1～2時間。休日も勉強しましたが、それでもせいぜい2～3時間。
そもそも菅生は勉強嫌いのダメ人間なので、まったく勉強しない日も割とありました。
ですので、3ヵ月の間でも、おそらく30～40時間くらいが学習に充てられたのではないかと思います。
一日のうち、どの程度学習に充てられるかは人により異なると思いますので、一日4時間とか時間を取れる方であれば、もしかしたら10日程度の学習でも成果物を出せるようになるかもしれません！
ちなみに、私の勉強方法としては、
- Progate
- Youtube
- わからないことはググる
のみ、完全独学です。
コードはかなり汚いですが、それでも、冒頭にリンクを貼りました通り、この程度のLPであれば作れるようになります。
これから独学でプログラミングを学ぼうと思っている方の励みになればうれしいです！
妻の活動ためのホームページを作ることにした
ホームページ欲しいんだけど。
以前、妻からそう言われていました。
私の妻は、JCA（日本キャンドル協会）認定キャンドルアーティストという肩書を持っており、オリジナルのキャンドルの制作・販売を行っています。
参考：日本キャンドル協会ホームページ
ただ、HP制作を外注するとけっこう高いね～、ということもあり、実現せずにおりました。
ですが、Progateで勉強したという絶対の自信を持つ今の私には良い機会です。
力試しも兼ねて、妻のホームページを実際に作ることにしました！
今回、使用した言語は以下のものです。
- HTML&CSS
- JavaScript
- jQueary
現状の私のレベル感としましては、HTML&CSSはかなり理解できていると自負していますが、JavaScriptはまだあまり良くわかっていません。
Progateで初めて学習した時も、JavaScriptの難易度には衝撃を受けました。
バリバリのエンジニアからすると、むしろJavaScriptは優しい方らしいですが、初学者の私にとってはかなり難解に感じます。ひたすら、JavaScriptを用いた制作物を作って身体に刷り込まなければいけませんね。
JavaScriptが難しかったため、jQuearyを結構使っています。
jQuearyとは、JavaScriptのフレームワークの一種で、簡単に言うと、JavaScriptを用いた公式のようなものですね。
例えるなら、JavaScript=英語、jQueary=イディオム、といった感じでしょうかね？
「プログラミングはカンタンです」と英語で言いたいとき、英語を話せない人は表現できませんよね。
でも、英語を知らなかったとしても、”A piece of cake “というイディオムを知っていたとしたら、”Programming is a piece of cake.”と表現することはできます。
ただし、英語を話せる人であれば、”Programming is a piece of cake.”でもいいし、”Programming is easy.“とも表現できます。
ホームページを作るにあたり、画像が下からスライドして表示されるようなデザインにしたいとします。このように動きのあるホームページを作るには多くの場合JavaScriptが有効ですが、JabaScriptを理解していなくても「画像をスライド表示させる」というjQuearyを知っていたり、知らなくてもググって調べれば、実装することはさほど難しくありません。
もちろん、JavaScriptを理解できていれば、自分でコーディングしてスライド表示を実装できます。英語を話せる人が、自由に英会話で自分を表現できるように。
JavaScriptと比較すると、jQuearyは比較的優しいので、理解するのもそれほど苦労しません。ただ、エンジニアの方々の中では「jQuearyはオワコン」という話をよく聞き、いまから勉強するのはあまりお勧めではないという意見も多いです。
個人的にはですが、未経験者がjQuearyも学んで損はないと思います。現状、JavaScriptやjQuearyの知識がゼロであれば、少なくとも現状よりステップアップするわけだし、何より、jQuearyがオワコンだとしても、自分でコーディングしてホームページに動きをつけるのは楽しいです。
学びに楽しみは必要ですので、私はjQuearyが好きです。
ちょっと話がそれてしまった感がありますが、とりあえず、繰り返しになりますが基本を身に着けたらとにかく何か作りましょう！
ちなみに、私の場合はたまたま妻がHP需要を持っていたからちょうどよかったですが、
作りたいことがパッと思いつかない方もいらっしゃるかと思います。
そういう方は、以下のことを試してみるのはいかがでしょうか？
- 既存のサイトをコピーしてみる
- 友達と一緒に秘密基地感覚でホームページを作ってみる
- 自分の趣味の為だけのホームページを作ってみる
既存のサイトのコピーというのは、何でもいいので、自分がよく見るサイトなどを、そっくりそのまま表現してみるのがいいと思います。ただ、おしゃれすぎるサイトなどはたぶん難しいので、広告用のLPなどでチャレンジすると良さそうですね。
友達と一緒にサイト作ったり、自分の趣味のサイト作ったりはそのままの意味です。個人的には友達と一緒に作るのをお勧めします。例えば、株式会社社畜みたいな架空の会社を作って、俺が社長やるわ～、お前はバイトな、みたいな感じで、遊びながらコーポレートサイトを作ってみると楽しみながら学べます。
とにかくProgateを真似てみる！
Progateの効果的な使い方は二つだと私は思っています。
一つ目は、前回の記事にも載せたように、コースを受講して、プログラミングを体験し、出来ることを知ること。
もう一つは、何かを作ろうと思ったとき、Progateで書いたコードを真似る、ということです。
前回の記事でも触れましたが、実際にゼロからコードを書こうとすると、結構難しいです。
ですが、せっかくProgateで学んだわけですから、これを使わないのはもったいない。Progateで自分が打ってきたコードをとりあえず参考にして、コーディングを始めてみることをお勧めします。
そうすれば、Progateで学んだとおりの構成のコーディングはできるため、初心者でもめちゃくちゃな構成にはなりません。
なによりも、「わからないことを調べてコーディングする」ことの練習になります。
コーディングしていると、わからないことが山ほど出てきます。その都度、ググったりして調べることになります。
その「調べる」ための最初のツールがProgateであり、もっとステップアップしていくにつれて、ネット上のたくさんの情報からコーディングに取り入れていくとよいと思います。
Progateを参考に土台を作ったら、あとは自分なりのデザインを施しつつ、わからないことはググってコードなどを調べて、自分のオリジナルサイトを表現していきましょう！
最も苦労したのはレスポンシブ対応
はぁ・・・はぁ・・・できた・・・完成したぞ！
すべてのコーディングを終え、達成感に満ち溢れていました。
そう、F12ボタンを押すまでは。
ご覧ください、この右側の空白を。
しかも、文字もめちゃくちゃです。
F12ボタン（ファンクションキー）を押すと、レスポンシブ対応がちゃんとできているかどうかの確認ができます。
レスポンシブ対応とは、PC、スマホ、タブレットなど、画面サイズの異なるデバイスそれぞれできれいに表示させるようにコーディングを施すことです。
上の画像は、コーディングが終わり達成感に満ち溢れた私がF12ボタンを押して出てきた画面です。達成感は一瞬で崩れ去りました。見てわかる通り、スマホへの対応がまるでなっていません。
このレスポンシブ対応、ほんとに苦労しました。
慣れている人なら大したことないのかもしれませんが、私はレスポンシブ対応のことを考えずにゼロからコードを書いたので、ここまで完成した段階にもかかわらず、かなりの部分を書き直しになりました。
この時に心がけたことは、制作の最初の段階で、レスポンシブまで視野に入れてコードを書く、ということでした。
とりあえず心がけた点は以下のものです。
- 各セクション（Progateだとclass=”wrapper”になっていたところ）には、背景色をつける
- 画像やテキスト、幅や高さのサイズはpxで指定しない
- Flexboxの使い方をしっかり覚える
まず1.については、下の画像をご覧ください。
それぞれのwrapperに背景色をつけているのですが、もうめちゃくちゃですね。
キャンドルの画像が４枚ありますね。本当は、４枚とも緑の背景色の部分に収まっているはずだったんです、イメージでは。
ですが、背景色をつけることで全くできていないことがわかります。このようにセクション内に正しく収まっているのかはっきりわかりますので、製作途中では背景色をつけることをお勧めします。
次に、2.については、下の画像をご覧ください。
ーゆるっとキャンドルは、”あい”をつなげますー
このテキストが、非常にバランスが悪いというか、整っていませんね。これではあいはつながりません。
これは、テキストの大きさをpxで指定したためです。pxで指定すると、文字の大きさが変化しないため、画面サイズが小さくなるにしたがって相対的に文字が大きくなり、上の画像のようにアンバランスに大きくなってしまったり、変なところで改行されたりしてしまいます。
それを防ぐためにも、基本的にサイズ指定はpxを使わずに、%など、大きさに応じて変化するものを使用するといいと思います！サイズの単位には%以外にも変動のものがいくつかありますので、調べてみて、自分のサイトにマッチするものを選んでいくとよいですね。
最後に、3.は、これはある意味Progateの罠だと個人的には思っているのですが、横並びの際などにはfloatを使わず、Flexboxをしっかり覚えましょう！
というのも、画像を横並びにするにあたり、Progateだと最初にまずfloatを教わります。そのためfloatの意識が強く根付きがちですが、レスポンシブ対応するならFlexboxの方が良いです。
ProgateでもFlexboxのコースはあるのですが、かなり終盤で、しかもおまけみたいな扱いで学習するので、記憶に残りにくい方が多いのではと思います。え？私だけ？
ですが、横並びでfloatを使うと、レスポンシブがめんどくさかったり、思わぬ不具合があったりするので、Flexboxをお勧めします。
さんざん苦労しながら、よしできた！と思い再びF12を押します。
なんだよこの微妙なスキマは。
こういうことが何度も繰り返し起こり、ほんとに苦労しました・・・
苦労しまくった上、最終的には
ぴったり埋まりました！
まとめ
- 30～40時間も学習すれば、十分自力で成果物を出せる
- なるべく楽しい方法で、とにかく作る
- Progateを真似る、その次はググって調べて自分のものにする
- 未経験者はきっとレスポンシブに苦労する
ちなみに菅生は、一緒に株式会社社畜のホームページ作成に付き合っていただける方を募集しています！楽しく一緒に学びましょう！
それでは。
コメント