見出し画像

【ウェブカツ】WEBサービス部で5ヶ月溶かした話

ウェブおじ

どうもこんにちは、ウェブカツおじさんことウェブおじです。

顧問がRTしたくなるツイートを投下しRTしてもらうことでウェブカツコミュニティにおける認知を獲得するというなかなかコスいことやってましたんで僕のことをご存じの方まぁまぁいらっしゃるかもです。

さて、そんなしょうもない僕ですが、先日（2020年5月24日）無事ウェブカツを卒業しました。

スクリーンショット 2020-05-26 22.41.41

入部が2019年5月14日なので、1年ぐらいかかってしまいました…


一年も頑張ったなんてすごい！ウェブカツってそんなに大変なんだ！

と思う方がもしかしたらいらっしゃるかもしれませんがそうではありません。


というのも、ウェブカツ最初の難関と言われるWEBサービス部で5ヶ月近く費やしたからです。

いや、”費やした”というと頑張った感ありますが、かなりサボってました、モチベが完全に死んでたんです。なので、タイトルでは”溶かした”という表現を使いました。

早い話、ポンコツだったんです。マジで。部費にして（僕のときはまだ）3万×5ヶ月=15万ですよ？ヤバくないっすか？？？


ウェブカツ的スピリットで言えば

”モチベが上がらない？知るか！！グダグダ言ってねぇでコード書けよクソが！！根性出せやオラアｧｧｧ”

といった具合に顧問から肛門に腕突っ込まれて奥歯ガチガチさせられそうな話なのですが、

とはいえ卒業した振り返ってみると、精神論だけではなく

”もっとこうすればさっさとできたなぁ”

というポイントといいますかWEBサ部の取り組み方がありますので、今回は同じようにWEBサ部で苦しんでる方向けに遺言を残しておこうかた思います。参考になれば幸いでSう。


ちなみに、ココまで読んでなんかこのnote雑いなぁと思われるかもしれませんが深夜にストゼロをキメながら書いてるんでご了承ください無料ノートなんで文句言わないでください

画像2



さて、本題に入ります。

まず、僕はなぜ半年もかかってしまったのか、これまでの学習記録やツイートを見直して振り返ってみます。


2019年6月27日　WEBサービス部開始



ね、もうふざけてねえでさっさとやれよって感じですよね。


このツイートがまぁまぁバズって調子に乗ってました。これが僕のWEBサ部開始時のテンションです。

厳しいと噂のウェブカツの最初の難関として悪名高いWEBサービス部、怖い気持ち半分ぜってぇ乗り越えてやるぜｲｪｱ半分でよくわからないテンションになってました。

そして意気揚々と取り組み始め、Lesson8あたりまではよかったのですが…


2019年7月1日　Lesson9にて挫折



ここなんですよね、やっぱここなんですよ。急に顧問が牙を向き始めた感ありますよね。だってこのLessonから急に質問増えてますもん。

この頃からやっぱWEBサ部やべぇんじゃねぇかって焦りで若干お腹がゆるくなります。

動画を見て？？？となってはいても、まぁ全く理解できないわけではないし、100パー理解してないからって進まないのもアレらしいって情報が先輩方のブログにあったので、そこそこの理解度でとりあえず1週視聴することに。

理解が甘いなりにも、動画とサンプルコードを一通り写経しつつ勧めていきました。


2019年7月14日　高く保ってたモチベがダレてくる



2019年7月17日　WEBサ部１周目視聴完了



全然わかんねぇかったです。やばかったです。

こんなん絶対むりやん…てかコレ仕事にするとかヤバくない？無理じゃね？俺プログラマ~向いてないんじゃね？月3万って高くない？やめたほうがいいんじゃない？

割と本気で考えてました。マジで。

ここで思い知りました、

”みんなが言ってたのはこういうことか…”

そうなんです、マジでくじけます。

そして先輩方のブログを漁ります。藁にもすがる思いで。

すると、どうやらWEBサ部を1周目で理解するのは無理げ~らしい。

確か顧問自身もそのようなツイートをされていました。頑張って探してみてください。

なるほど！別に俺に才能が無いわけでは無いのか！2、3週すれば分かるのか！よっしゃ！んじゃとりま3週しよう！

気を取り直し、再度視聴を開始しました。



2019年7月31日　しんどすぎてYouTubeでプリキュアショーの動画を漁りまくる




2019年8月10日　ハマり過ぎて近所のイオンに妹と一緒にプリキュアショーを観に行く



2019年9月23日　台風15号の被害にあった千葉県鋸南町に炊き出しのボランティアに行く


※台風被害以降、鋸南町はもともと高齢化が進んでいたのに加え人口流出が続き盛大にダブルパンチを食らっております、応援しましょう！


2019年9月25日　ジムに行き始める





2019年10月1日　脳内にスネ夫のテーマが流れる始める





2019年10月初旬らへん　3周目視聴完了、結局わからん


結局良くわかりませんでした…1周目よりかは理解が進んでいるのは間違いないのですが、それでも10→30%になった程度。習得したとはとてもじゃないけど言えない。

マジで凹んでました。

しかも、この時僕は新卒で入社した会社を8月で辞め排水の陣でエンジニアとして稼いでいくことを決心したばかり。

本当に落ち込みました。

本当はウェブカツみたいな動画じゃなくって本でやったほうが良いんじゃね？と淡い期待を懐きつつおっきい本屋さんの技術書コーナーを彷徨いこんな僕にピッタリな魔法の一冊を探すも、当然そんな都合の良い話はあるわけもなく。参考書コーナーを漁りまくる浪人生と同じ心理です。

どうしようどうしようどうしよう…一緒にウェブカツをやっている友人（ていうかそいつがウェブカツに誘ってくれた、なのにアフェリエイト経由せずに入部しちゃってゴメンねﾃﾍﾍﾟﾛ☆(・ω<)　）に相談と言う名の愚痴をこぼしつつたどり着いた結論が、

”もうよくわかんなくってもOP（アウトプット：実際の製作）すれば良くない？”

でした。

動画をぐるぐｒ見たところで、結局は受け身。手を動かしてはいても大して頭は動かしてみませんでした。

そしてなんと言ってもモチベが続かない。動画を見てもモチベ爆死おじさんだった僕は顧問の声が右の耳から入ってお尻の穴から抜けてばかり。

そうか、理解しきれていないなりにも、このままダラダラ動画とにらめっこしてるぐらいなら実際に何か作ろう。


そう思い立ったのが2019年9月末あたりでした。


ここから僕のWEBサービス部は動き出します。


2019年10月初頭らへん　OP製作開始


さて、何を作ろうか…と思ったときに、僕はアイカツというアイドルが主人公のアニメが好きなので、AKBみたいなアイドル投票サイトを作ることにしました。

ECサイトでユーザーが登録して商品を出品し、それをまた別のユーザーが購入する…というのを、

ユーザーが登録してアイドルを推薦し、別ユーザーが投票する…てな具合にちょっと変えたって感じです。

大学3年生の時に出会い、大学院入試（受かったけど教授陣にブチ切れて辞退しちゃったけどね☆）、卒業論文、就活、始めての社会人、脱サラ、そしてウェブカツと、人生の苦しい時期にいる僕をを常に支えてくれたこの作品に恩返しをしたいと思い、せっかくなのでこのテーマにしました。


2019年10月30日　CSS抜きでとりまシステム完成



製作開始から1ヶ月足らずの時点で、とりあえず骨格であるHTMLとシステムとしてのPHPは完成しました。


2019年11月6日　WEBサービス部OP完成



製作開始から一ヶ月半、完成しました。

ダサダサのダサいデザインではあるものの、一通り作った頃にはそれまで学んできたHTML、CSS、JS、PHP、SQLをだいたいわかるという域には達しいました。

そしてここから微調節を重ね…11月半頃、やっと僕のWEBサービス部との闘いは幕を閉じました。




おまたせしました、

ここからは、僭越ながら、これまでの学習を振り返ってみて、今、そしてこれからWEBサ部に取り組む方への提言をさせていただきます。

結論から言うと、次の3つです。

1.さっさとOPしろ

2.コピペでいいから

3.何でも良いからさっさとOPしろ

ごめんなさい、結局1つでした。

まぁ一応順に説明します。



1.さっさとOPしろ

今までのツイートを振り返ってみても分かるのですが、動画視聴を開始してから終わるまで3ヶ月半近くかかっているのに対し、OP製作を開始して完成するまでが1ヶ月半程。

労力としては圧倒的に後者のほうが大きいのですが、かかった時間は前者の半分以下です。

これは、完全にモチベの問題です。

個人差がある話だとは思いますが、やはり受け身一方で動画を見ているよりも、あーでもないこーでもないと自分の頭を捻り作業をしている方がモチベーションが高く保てます。

そして何よりも学習効率が良い。

動画を見ていた僕よりもOPを制作していた僕のほうが何杯も学習効率が高かったです。

”でもそれって、何回も動画を見直したからこそOPできたんじゃないの？”

と思われるかもしれませんが、先述の通り動画を繰り返したところで得られるスキルはたかが知れています。

顧問も仰るとおり、プログラミングは学ぶものではなく、実際に手を動かし、体で覚える、”練習”するものです。ぼーっと動画を見ているだけではダメなんですね。

なので、ざっと目安として、


1周目：とりま黙って動画見る

↓

2周目：サンプルコードや動画を写経、実際に動かしてみる

↓

OP製作開始、わからないことがあれば都度動画を見直す


ってとこじゃないでしょうか。

アッそうだ思い出した、動画って、”ここがわからない！ココの知識が必要だ！”となってから見直したほうが何十倍も見になります。

つまり、上記の目安の3つ目のところです。

まだ何もしていない、OPに着手していないじょうたいで

”ココをこうするとこうなります〜”

と言われたところで、ふーん…って感じなのですが、

”やべぇ！ログイン機能できねぇ！なんでだ？？？”

ってなってから、つまり”必要”がはっせいしてから見たほうが圧倒的に身につきます。

そりゃそうです、わかんないと先に勧めないんですから、必死に見るんで、イヤでも覚えます。

そのためにも、理解度はそこそこでもいいんでOPに着手することが大事なんです。僕はココが億劫だったがためにずるずるずるずると長引いてしましました。



2.コピペでいいから

…とは言っても、

”OPってなんか難しそう、挫折したらどうしよう…”

という不安が過ぎったそこの貴方。

わかります。

わかりますその気持ち。

僕も、いざOPし始めたもののん、もしうまくできなくって、自分にプログラミングの才能が無いことが発覚してしまったらどうしよう…という恐怖心からOPになかなか着手できませんでした。

でもご安心ください。

OPの大半は、WEBサ部のコードのコピペでいいです。

これについては（もしかしたら顧問からも）反対意見があるかもですが、僕はこれで良いと思います。僕はOPは殆ど動画やサンプルコードのコピペで作りました。

というのも、そもそもWEBサ部終わって作るOPなんて、基本WEBサ部の動画で学んだ範疇の機能ぐらいしきできませんので、結果WEBサ部のコードをほぼ丸写しとなります。

試しに、Twitterに上がってる諸先輩のWEBサ部のOPを見てみてください。

ぶっちゃけ、殆どWEBサ部のパクリじゃないっすか？？？ #炎上ポイント

そうなんです、だからそんなに気負う必要は無いんです。コピペなんですから。


”でも、コピペで作っちゃったら身につかなくない？”

と思われるかもしれませんが、これまたご安心ください。

厳密に言うと、”コピペ”ではなく、”写経（手で書き写す）”してください。

そうすると、十中八九Typo（タイプミス、打ち間違い）でうまく動きません。

つまり、そこでエラーとの格闘が始まり、原因を探り、解決策を捻り出す…という過程に否応なしに突入しますので、結果プログラムの理解が深まります。

OPの目的は、あくまでも学習です。写経だとしてもこの目的は十分果たせるからいいんじゃね？というのが僕の考えです。

ただ、流石にまんまコピペだけは芸が無いので、動画のお手本にはない、何か独自の機能を搭載するべきです。

例えば、僕の場合ですと

・投票ボタンをポチポチクリックするだけで投票orキャンセルできる

・得票数を元にランキングをつける

・マイページに推薦した＆投票したアイドルを表示する

などの機能を付け加えました。

これがなかなか苦労する…のですが、その過程で多くのことを学びましたし、何よりも

”ウェブカツ外で自力で学んだことが実現できた！”

という体験は、それまでの受け身一方だった学習では決して味わえない達成感を得ることができ、結果それが自信へと繋がります。

なので、コピペとはいいつつ、写経で、かつ何かしらの独自機能を付け加えてください。

また、逆に言うと、WEBサ部で紹介されてた機能の全ては搭載しませんでした。だって自分で考えた機能を搭載する過程で十分学べたんだもん。それでいいじゃん。


3.何でも良いからOPしろ

…とは言っても、

”OPってなんか難しそう、挫折したらどうしよう…”

という不安が過ぎったそこの貴方。

わかります。

わかりますその気持ち。

僕も、いざOPし始めたもののん、もしうまくできなくって、自分にプログラミングの才能が無いことが発覚してしまったらどうしよう…という恐怖心からOPになかなか着手できませんでした。

コピペでもいいよ…とは言われても、不安になりますよね

#何ならこの部分 、さっきの2.コピペでいいから初頭部分のコピペです




では、こんなのどうでしょう？

OPの初日は、

<!DOCTYPE html>
<html lang="ja">
<head>
 <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
 <title>Document</title>
 <link rel="stylesheet" type="text/css" href="./css/style.css">
</head>
<body>
   
</body>
</html>

とだけ書いて(html初級でやったようなヤツですね、なんならエディタによっては"!"って打ってEnter押すと出てきます)、なんか適当にindex.htmlって名前つけて適当なフォルダに保存して、TOPページの下書きとして終わったとしましょう。






…









天才。


マジ天才。


最高。


結婚してください。


だって始めたんですもん。


０から１が生まれたんですよ？

もう全体の半分は終わったようなもんじゃないですか。


いやいやそんな、流石に言いすぎでしょ…と思われるかもしれませんが、

僕はここまでたどり着くのに３ヶ月半かかりました。

この程度の事もできず、いたずらに貴重な時間とスズメの涙の貯金を溶かしていたんです。

コレさえできれば、あとはその勢いに乗るだけなんです。


どうやら、ウェブカツを始めたものの、WEBサ部にぶつかり挫折して去っていく方はちょくちょくいるようです。

何度も何度も繰り返しますが、気持ちはわかります。

これは僕の勝手な推測ですが、WEBサ部で退部する人って、OPに着手せずに終わったんじゃないでしょうか？

動画にただただ圧倒されて、

”あぁもうダメだ、こんなの絶対に無理だ…”

ってな具合で。

無理もないです、だって何も作ってないんだから、自信ないんだもん。

だから作るんです、まずは。

モチベーションがあって作るんじゃなくって、作るからモチベーションが生まれるんじゃないんですかね。


くどいぐらいいいますが、作ることが大事です。なぜなら私達は、作って、それを売って、お金を稼ぐためにウェブカツに入ったからです。


なので、とにかく、つくってください。

その代わり、ほんのちょっとでも、クソみたいに簡単でもいいです。

とにかく、まずは、小さくてもいいから、最初の一歩を踏み出してください。

赤ちゃんみたいな一歩だとしても、踏み出さないことには先に進みません。


なので、動画の視聴はそこそこに、

１回ざっと見て、

２回目は手を動かしつつ見たら、

もう次は作り始めてください。お願いします。



まとめ

…てなわけで、ごめんなさい！ストゼロの勢いで書いたら気がついたら6000文字越えてましたwww

長ったらしくなっちゃったので、ここんところでWEBサ部の攻略法をまとめます。

・とにかくOPをつくるのが大事

・というより、OPをつくって初めて身につく

・動画視聴はやってせいぜい2週、3周目以降はOPを作っていってわからなかったところを見直していく

・動画を見終わった時点で理解しきれていなくてもいいからOPをつくる

・サンプルコードのコピペでいいからOPをつくる

・サンプルの全機能搭載していなくてもいいからOPをつくる

・だってあくまでもPHPとかの仕組みを学ぶためにつくるんだからそれさえ達成できるのであれば全部やんなくってもOK

・その代わり何かしらの独自機能に挑戦してみること

・ごめん、コピペじゃなくって写経だった

・マジでクソみたいにしょぼくってもいいから、動画2週終わったらOP作り始める

・マジで

・ほんとに

・お願いだからOP製作に着手して

・アイカツはいいぞ

・あと鋸南町マジで大変だからみんな頑張ろうな


以上、そんな感じでーす、うわー7000文字超えちゃったごめんなさい！

それでは遅くなっちゃったんで寝ます、おやすみなさい〜皆さんは夜ふかししちゃダメですよ〜

いいなと思ったら応援しよう！