3
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

【おっちゃんがエンジニアになるまで】@2ヶ月目〜ポートフォリオサイトを作る〜(継続編)

Last updated at Posted at 2020-01-03

#こんにちは。ばーんです。

30歳、独学、業界未経験、既婚者、働きながら
のおっちゃんが具体的にどうやってエンジニアになれるのか?
を(ほぼ)リアルタイムで振り返り共有させてもらいます。

自身の思考整理がメインですが、これから目指す方の指標に少しでもなれれば幸いです。
1ヶ月目はこちら
3ヶ月目はこちら

(2020.2.4追記、編集)
初学者の方が参考になるように、相互リンクの設置&当時の制作物の表示
2ヶ月目でこの程度だったらOKなんだな。という1例になれるように。

##まずはじめに
独学と言ってますがメンターはいます。
ただ、技術的な支援は数多くないので、一応独学というスタンスでいます。

今、2ヶ月目を振り返って感じるのは、今から独学で始める人はメンター雇った方がいいです。
スクールより安くて、良質なものを受け取れる可能性が高いと思いますし、自分が今から始めるなら雇います。※もちろんその人によりますが

というか、独学の基準って曖昧ですよね…
個人的にはスクールに高いお金払わなくてもなれる!を証明したくて行動してます。

##数字でみる2ヶ月目

1ヶ月目 Total 76h(1日平均2.5h)
2ヶ月目 Total 91h(1日平均3h)

31-40日 23h
41-50日 41h
51-60日 27h

全体で見ると「時間増やせた!」なんですが、細かく見ると41-50日の影響が大きいですね。また、31-40日の時間も気になります。

何故時間が減ったのか?何故時間をかけれたのか?は時系列で掘り下げていきます。

##Day31-40:モチベーションちょっと落ち着く

この日程はインプットメインでした。
内容は「Sass,AdobeXD,jQuery,ミートアップ」でした。
一番良かった!と思ったのはミートアップでした。

特にスクール等に通えていない人は、何も武器(実績)を持たなくて良いので行ってみて下さい!
気軽に相談できる人が増えたり、実情を知れるのでめちゃくちゃ有意義でした!

ちなみに僕が参加したのはこちらです。

そして、モチベーション落ち着いた理由は、
1.1ヶ月目に自作サイトを作り満足してしまった
2.環境構築や、wifiの接続で躓いてしまった
3.インプットばかりで達成感がなかった

1,2の原因は目標がふんわりしてたので
3の原因は、自身のモチベーションを管理できていなかったので。自分はエニアグラムでいうと達成者です。
何かを達成することが、モチベーションに繋がるのですが、インプットばかりだったので...
※エニアグラム・・・自己分析の際に使用できる診断表です。かなり精度は高いと思います

##Day41-50:ポートフォリオサイト作成

ここで目標を見直します。
先に進むor学習したものをアウトプットする
なんですが、アウトプットを選択しました。

▪覚えたモノが多すぎて、整理の必要があると感じていたこと
▪メンターからも同様のアドバイスを受けたこと
30daysトライアルでもここで一度アウトプットしている
と言った理由です。

時間をゴリゴリかけれた理由は、ポートフォリオサイトを納期までに作る必要があったからです。
▪家族に説明する為
▪案件獲得に繋がるかも?のイベントが発生した為

また、やはりインプットだけでは覚えておらず、
できないこと→できることに変わるのは単純に楽しかったですね

ここでアウトプットしたのは「Bem記法,Sass ,jQuery,AdobeXD,cssアニメーション,レスポンシブ」です。

##Day51-60:初めての模写と自己分析

ここではポートフォリオサイトのコードレビューをメンターから頂けました!
コードレビューは本当にありがたいですね...

ここで次にやること(自分の課題)が見えます。
1.正しいマークアップを学ぶ
2.デザインの基礎を学ぶ

どちらも基礎ですね。

これを両立する為に模写を始めました!

参考サイトはこちら(僕はAirbnbを模写しました)

模写はかなり学びが多く、
###1.デザインの理解が深まる
模写でオススメされてるサイトは、作り込まれているものが多いです。
▪基本的な余白(padding,margin)の感覚が分かる
▪意外と細かく色が違う
などの気付きを得られました。

###2.タグの理解が深まる
始めたばかりは、div,spanまみれになると思います。
引き出しを増やす為にもガシガシ見ていきましょう!

他には、ちょっとした小技を知れたりします*(Airbnbはヒーローイメージが白背景なのに、タイトルが白文字です。なのに目立ちます)*
といったメリットがありました!

後は模写を始めると「検証どれぐらい見ていいんだろ?」と悩む人多いですが、基本的には見ていいです。
ただ、答えを写すだけは時間の無駄なので仮説を立てて答えを見ると良いかと。
難しい...で諦めちゃうのが一番ダメなので。

模写は良いことなのですが、やり過ぎる必要はないな。と思っています。実績ができるわけではないので。

また、この時に大事なことに気付きます。

アウトプットしないインプットはクソ

この時は「統計学って学んだことないよな〜」と思い統計学の本を買って数日した時の話です。
ところが後輩に言われて振り返ると過去に購入して読んでいたのです…

そこで、内容を覚えている本と覚えていない本を照らし合わせると、**アウトプット(行動)に移せていたかどうか?**が鍵になると気付きました。

アウトプットの重要性に気付き、QiitaとTwitterでアウトプットを増やしていこう!
と考えました(他の記事はこちら)

##成果物一覧

ポートフォリオサイト第1弾
40日目ぐらいに作成。20hほど

残りはQiitaの記事です
Qiitaにcodepenを取り込む時の注意点

要素配置時のポイント【ポートフォリオ作成編】

flexboxについて【ポートフォリオ作成編】

【重要】HTMLの基礎

【初学者がCSSと向き合うお話】命名規則編(BEM etc...)

記事の上3つはあまり大した内容ではないので見なくていいと思います。どちらかと言えばアウトプットを癖付けるために書いたものなので。
ただ下の2つは初学者がProgateだけでは理解できない部分でかつ重要なことなので、是非見てみて下さい^^

ちなみに記事はポートフォリオ作成後から作り始めたので40〜60日ぐらいで段階的に書いてます。
最後の2つはい1記事6hぐらいかかってます。それだけ自分も理解していなかった内容でした…

##まとめ
今回振り返ったまとめ(皆様にお伝えしたいこと)は、
###1.アウトプットはめちゃくちゃ大事。恥じらいとか意味不明なんで、全力でアウトプットしましょう。
極端な話ですが、「恥をかかない為にエンジニアを目指しているのか?」「エンジニアになって成し遂げたいことがあるのか?」を天秤にかけて動いていきたいですね。

###2.点と点は繋がっている(スティーブ・ジョブズ氏の有名なスピーチですね)
特に僕と同じように本業があって副業で目指していたり、転職を考えている方に伝えたいのですが、学ぼうと思えばどんな環境でも学べます。

正直転職を意識しだすと、本業って恐ろしくつまらないものに感じると思います。
ですが、同じ時間をかけるなら有意義にした方がいいです。

専門性の高い技術を本業でやり始める必要性は低いですが、
対人スキル、自己管理、数値分析など実は探すと鍛えられる能力は沢山あります。

例えば、美容師の人でカットの技術を伸ばしても転職後活かせるか?は微妙ですが、
人を纏めたりするのを苦手な人が、チームで目標立てて行動する!とかは有意義だと思います。

###3.目標(納期)を明確に
何当たり前のことを?と思うかも知れません。**僕自身も「目標は大切だ」**と認識している人間なので、
???
と思うのですが、2ヶ月目を振り返ると今まで以上に必要だと認識しました。
リアルタイム(Day66)で納期に追われて焦っており「納期が変なプレッシャーを生んでいるかも…」と思っていたのですが、とんだ勘違いでした;;

##さいごに

いかがでしたか?
駆け出しエンジニアの皆様に**「これでいいんだ!」**が伝わると幸いです^^
(なのでかなり本音で書いてます)

来月も振り返る予定ですので、ご要望や意見などありましたらご連絡お待ちしています。

ばーん

3
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?