Progateとドットインストールの独学を経てポートフォリオサイトを作った

スポンサードリンク



Progateとドットインストールに感謝!無料オンライン学習サイトに別れを告げ、ポートフォリオサイトを作った

 

一度は諦めたプログラミング学習

 

こんにちは!タツノオトシゴです(@Phycodurus3

かなり久しぶりの投稿になります。

更新が遅くなった理由としては、単純にブログに飽きていたことと、プログラミングの学習に専念していたからというのが理由になります。

どんどんPV数が落ちていくかと思っていたのですが、それなりに閲覧してくれている方々がいらっしゃるようで感謝の気持ちでいっぱいです。

またちょくちょく更新していきたいと思います。

さて、本題ですが、今回はタイトル通りプログラミングネタでございます。

昨年の初めにJavaという言語でプログラミングの世界に足を踏み入れたぼくですが、過去の記事にも書いたように一度”挫折”を経験しています。

 

職業訓練まさかの挫折

 

挫折してプログラミングは自分に向いてないな〜と思い、完全に諦めていたのですが、昨年春頃YoutubeのホリエモンチャンネルでProgateが紹介されていたのを観て、もう一度興味を持ち、リベンジをすることに。

 

 

前半はProgateドットインストールの学習遍歴について、後半はポートフォリオ制作について書きたいと思います。

 

 

Progate期

Progateで学習を始めた頃はJava → Ruby → Ruby on Railsと学習を進めました。

初めての言語はとりあえず職業訓練で多少知識のあった”Java”という言語から。

無事Javaの学習コースを全て終えた時はもの凄く達成感がありました。こんなぼくでもとりあえず最後まで続けられたというのが嬉しかったのです。

しかし、ProgateでJavaの学習を終えたところで何をして良いのか全くわからなかったぼくは、続いてRubyの学習コースへ。

RubyはJavaを学習した後では非常に簡単に感じました。

Ruby終了後はProgateのオススメ画面に従ってRuby on Railsの学習へ。

そもそもWebアプリが作りたいと思っていたぼくは、何となくアプリが作れるよ〜と言われている言語を手当たり次第学習していました。

しかし、現役エンジニアの方やプログラミング歴の長い玄人の方がSNSなんかで言及しているように、オンライン学習サイトをグルグルして知識をつけているだけでは何も作れるようにはならないのです。

Ruby on Railsの学習を全て終えたところで、やっぱり何も作れない自分に気づき、当初目標としていた”Webアプリを作る”という目標は諦めました。

2度目の挫折です。

ここで既にProgateで学習を始めてから半年が経過していました。

何かを作るにはもう少しレベルを下げて初学者向けの言語から学習する必要があると感じたぼくは、Webサイトを作る言語であるHTML & CSS、JavaScript、jQueryを学習することに。

ここまで読んだ方はお気づきかと思いますが、かなり効率の悪い学習をしていることになります。

初学者のうちは学習する言語のチョイス、順番が非常に大事だと思います。

こうして昨年冬頃からProgateでの学習言語を方向転換し、HTML & CSS、JavaScript、jQueryを学習しました。

上記の言語は黒い画面に向かって一体何をやっているのか、何のためになっているのかよくわからなかったJavaとは違い、ブラウザを使ってすぐに変化がわかるので学習が楽しかったです。

HTML & CSSは厳密にはプログラミング言語ではなく、マークアップ言語と呼ばれており、どちらかと言うとデザイン寄りな感じです。

Webサイトの見た目を作る言語という認識でいいと思います。

JavaScriptやjQueryはHTML & CSSで作ったサイトに動きをつける言語になります。

最近のWebサイトはおもしろい動きのするサイトばかりですよね?

そういった諸々のアニメーションはJavaScriptやjQueryで作られている可能性が高いです。

HTML & CSSと違いif文やfor文、数学的な処理なんかも絡んできて少し難しいです。

プログラミング?なにそれおいしいの?というような人はまずHTML & CSSから学習してみることをオススメします。

Progateは超初心者向けと言われていますが、それぐらい易しい仕様になっています。

HTML & CSS、JavaScript、jQueryといったWebサイトを作る言語の学習コースは楽しかったこともあり、約3ヶ月程で学習を終えました。

学習を終えたぼくはここでポートフォリオを作ろうと決意し、エディタにAtomをインストール、いざHTMLを書き始めようとするのですが、やはりここでも手が止まってしまいます。

ここで初めてProgateをやっただけではコードを書けるようにならないという意味を身をもって知るのです。。。

 

 

ドットインストール期

Progateを批判するわけではありませんが、Progateを学習しただけでは自分でコードが書けないという事がわかったので、もう少し知識をつけたいと感じたぼくはProgateを卒業し、ドットインストールへと学習ベースを移すことに。

ドットインストール3分間の動画と実際にPCで手を動かしながら学習を進めていくというコンセプトのオンライン学習サイトです。

Progateは良くも悪くもブラウザで学習が完結するサイトであるのに対し、ドットインストールはある程度自分で環境を用意する必要があります。

ドットインストールの最大の強みはここにあります。

動画を観ながら手を動かしていくので、内容がどんどん頭に入ってきます。

結論から述べると、、、

 

  • 超初心者の方はProgateで感覚を掴む → ドットインストールで実際に手を動かしてコードを書けるようになる

 

という流れが学習効率が良いと思います。

ドットインストールでもHTML & CSS、JavaScript、jQueryを学習しました。

今振り返れば全部学習する必要なかったな〜とか思うんですが、とりあえず全コース学習しました。

動画を観ながら学べるというのは、好きなタイミングで動画を止めたり、わからない部分はもう一度動画を振り返って観ることができたりと、本当に良かったことが多かったです。

Progateで理解不足だった部分を補うことが出来たと思います。

ドットインストールもProgate同様、いくつか有料会員でしか学習できないコースもありますが、月約1,000円なのでコスパが良いです。

こうしてドットインストールでも学習をしたぼくは最後に書籍も購入し、いざポートフォリオ作りに臨むのでした。。。

 

 

オススメ & 参考にした書籍

ポートフォリオ編に移る前にポートフォリオを作成する上で参考にしたいくつかの書籍もご紹介しておきたいと思います。

実際にポートフォリオを作成する前、Progateやドットインストールで学習を終えた後の復習に良いかと。

 

 

 

ポートフォリオ作成

Pexels / Pixabay

まずは凄い人達のポートフォリオサイトをたくさん閲覧した

Progate、ドットインストール、そして書籍を購入して、いよいよポートフォリオ作成作業へ。

プログラミング学習始めて約1年

だいぶ遠回りしました。

知識ばっかりついて頭デッカチになっていたつもりですが、実際に書き始めると”あれ?ここどうやるんだっけ?”なシーンが多く、その都度ググったりドットインストールを観直したりしていて、ここでも現役エンジニアやプログラミング歴の長い玄人の方々がよく口にするプログラミングは作りながら学べの意味を理解することに。

やってみて気づくことってあるよね〜。

いきなりオリジナルなサイトを作るといっても、どんな感じにするかわからないというもの。

そこで、まず色んなWebデザイナーコーダーの方のポートフォリオサイトを閲覧し、参考にすることから始めてみました。

ググると優れたポートフォリオをまとめたサイトがあったので、そういったサイトを活用し、観て学ぶという作業をし、参考になりそうなサイトをピックアップしていきました。

 

 

シンプルで無駄のサイトを目指して

ポートフォリオまとめサイトを閲覧して、先人達のポートフォリオサイトを拝見させていただいたのですが、目につくサイトや、使いやすいなと感じるサイトは総じてシンプルなサイトだったので、ぼくもシンプルなサイトを目指しました。

個人的な意見ですが、オシャレなサイトやアニメーションを多様したようなサイトは実際に使う側として利用してみると、意外と使いづらかったりします。

メニューがどこにあるかわかりづらかったり、本来押したくないメニューを押してしまったりした経験は結構あるかと思います。

ということで無駄のないわかりやすいサイトを目指したわけです。

 

苦労した点

作っていく過程でもっとも苦労した部分ハンバーガーメニューの部分です。

PCやタブレット端末では横並びにして、スマホ表示ではハンバーガーメニューになるという、所謂、レスポンシブなデザイン。

この部分をCSSとjQueryを駆使して実装していったのですが、想定通りにデザインを配置できず、また、上手く動かずで何だかんだ解決するのに2週間を要しました。

解決方法としてオススメなのが、一人で抱え込まずさっさと誰かに相談することです。

そうは言っても身近にプログラミングの知識を持った人物がいないという方や、対面で相談することに苦手意識を感じる方もいらっしゃるかと思います。

ぼくもそんなタイプの人間の一人なので、気持ちはよくわかります。

そこでオススメなのが、teratail(テラテイル)というITエンジニア特化型Q&Aサイト↓

 

teratail 〜ITエンジニアQ&Aサイト〜

 

このサイトで悩んでいる箇所やわからない部分を質問しましょう!

現役エンジニアや知識豊富な方が回答してくれます。

ぼくも質問して次の日に回答をいただき、問題解決の大きなヒントを得ることが出来ました。

一人で頭を抱えているのは時間がもったいないです。

なるべく早く解決し、本来やるべきことに時間を使えた方が良いですからね。

 

 

ついに完成!ポートフォリオサイト『Reverie』

こうして制作開始から約3週間で初めてポートフォリオサイトを作ることが出来ました!

ダラダラと効率の悪い学習をしてきたのでかなりの時間を要してしまいましたが、色んな人の協力もあり作り上げることが出来ました。

サイト名のReverieは日本語で”夢想”という意味です。

夢想していることをどんどん形に変えていきたいという願いを込めて命名。

ロゴにはもちろん大好きな生物タツノオトシゴを。

 

Reverie

 

ポートフォリオを作ることが出来たので、今後はこのポートフォリオを添えて案件を獲得したり、Web業界に潜り込むのが目標です。

 

 

まとめ

以上、”Progateとドットインストールの独学を経てポートフォリオサイトを作った”でした!

独学からトータル1年くらい経ってしまいましたが、ポートフォリオを作れるくらいにはなりました。

Twitterなんか見てると『〇〇〇ヶ月でエンジニアになりました!』というような内容のツイートを見かけたりしますが、こんな感じで亀の歩みで学習してきた人間もいます(きっとぼく以外にもこの世の中にはいるはず)

今でこそ、”作りたいものを目指して学習するべき””学習したらすぐに実装すべき””書籍を読んでいたり、オンライン学習サイトを周回しているだけでは無意味”といった言い回しの意味が理解できます。

これからプログラミング学習を始める人たちには学んだ知識をすぐに何らかの形にすることをオススメします。

ぼくの経験が少しでも参考になれば幸いです。

ではでは。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です