Cute is better than ugly.

かわいいものを追求しているエンジニアのブログです

クリスマスでもソロコードキャンプ

メリークリスマス。
世間ではクリスマスのようですがエンジニアに休みはないので、クリスマスは存在しないのです。

それよりもソロキャンプ(コーディング)をしましょう。
来年からゆるキャン△の実写版も始まりますからね。

freeCodeCampについて


GitHubを漁るのが好きな人は知っている方も多そうですがオープンソースのプログラミング学習サイトです。
github.com
www.freecodecamp.org

日本だとProgateのようなもので、Web上で指定された内容に合わせてコーディングをしていきながら勉強するアレです。
ちなみに日本のコードキャンプは有料なのでお間違いなく
もちろん有料だとしても個別指導してくれるのはそれはそれで良いのかもしれないですね、自分は受けたことないので何も言えませんが

学習できる内容について

なぜにこのサイトで学習し始めたかと言うと、
個人サイトを作っている時にBootstrapを多用していて画面がいい加減クソダサいことに気付いたり
※Bootstrapを使ってもカッコイイサイトは作れます
flexboxってなんだよ…こっちはレイアウトをtableタグで組んでいた世代なのです。そんな最新の技術は良くわからねえよ…
といった具合になっていたのでモダンなHTML/CSS構造を学びたくなって調べていて見つけました。

学べるコンテンツを抜粋

ヤバイですね! キャルちゃんもヤバイしか言わなくなるレベルで情報が豊富ですね。
フロントエンド技術ならここでしっかり学べば後はどうとでもなるんじゃないのかと言わんばかりの情報量

じゃあ全部やりましょうといいたいのですが、サイト上で大まかな学習時間がかかれていて
全てのコンテンツを学ぼうとすると1800+α時間かかるようです。
1日10時間としても180日(半年) ヤバイですね…
半年の間、必死で頑張ればフロント側の技術が大まかにでも身についてしまうと考えればかなり効率的かなとも思えます

オススメの使い方

私は、プログラミングはとりあえず書いていくことを優先しています。
動かさないとマジ意味わからなくなります(動かしていても意味わからんこともあるけど)
そして一個一個学習するのがすごい面倒な質です

なので、私は各カテゴリ毎にあるプロジェクトを作ってみよう!みたいな箇所でコードを写経しています
たとえば、レスポンシブWebデザインを作ろうだと
HTML5/CSS(Flexbox/Grid)を使ったページを作ります。
参考画像
f:id:ponny_anna:20191223213036p:plain

こんなようなものを全部で5個作るのです。
モチロン自力で書き上げるなんてできません。
各プロジェクト毎にサンプルとしてCodepenのリンクがあるのでそちらからコードを確認します。
そのコードを自前のエディタにでも写経しつつ、わからないことをググればいいのです。
そっちのほうが明らかに早いですし、わからないことだけをキャッチアップできます。
f:id:ponny_anna:20191223213302p:plain

後は、写経だけだと飽きるので一回作り終えたら文言とかを自前で考えたりしつつ色々調整していくと楽しいです。
そうすると気づいたら自前のサイトができるじゃないですか、弄っている内にコードの内容も理解できるようになるし一石二鳥だね!

ソロキャンプのススメ

まだレスポンシブWebデザイン部分しか触れられていない新米ソロキャンパーですが、中々に有用なサイトに感じます。
時間に余裕があればJavaScriptの学習も進めてみようかなと思っています。

来年のゆるキャン△の実写に向けて今のうちにキャンプに慣れてみてはいかがでしょうか。
福原遥ちゃんがめちゃくちゃかわいいので個人的には期待しています。
でもリンちゃんじゃなくてなでしこ役をやって欲しかった

そして最後にはなりますが、今期の新米姉妹のふたりごはんも最高な百合ドラマなのでAmazonプライムに契約して見るといいのですよ。
それではメリークリスマス