Help us understand the problem. What is going on with this article?

【おっちゃんがエンジニアになるまで】@1ヶ月目〜自作サイトを公開する〜(継続編)

はじめまして

ばーんと言います。この記事は、

30歳、独学、業界未経験、既婚者、働きながら

のおっさんが具体的にどうやってエンジニアになれるのか?
を(ほぼ)リアルタイムで振り返り共有させてもらいます。

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

2ヶ月目はこちら
3ヶ月目はこちら

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

Day0:準備

  • PC購入
  • Twitterのアカウント作成
  • 関連本の購入

PC購入はできればMacがいいそうです(https://kitsune.blog/programming-pc) 引用
Macは予算が…という方は24回払い無利子で新品が購入可能です(月1万円程度)
自分は実際に↑この24回払いを選択しています

あと、Mac操作したことない…という方でも大丈夫です!

自分も初めてでしたが1日で慣れますし、むしろ今ではWindowsが使いにくいぐらいなので

Twitterは、はじめたての人から刺激をもらえたり、有益な情報が多く流れているのでおすすめです!
転職を考えている方は、「Twitter転職」という言葉があるぐらいなので、やって損はないかと

関連本は空き時間を有効活用できるのでいいですよ〜

Day1〜10:Progate奔走

知人のアドバイスに従い、HTML→CSSからWebサイト作成を短期目標にしました。
今更感はありますが学習サイトは主に、
・Progate(https://prog-8.com/dashboard)
・ドットインストール(https://dotinstall.com/)
を使いました。まだ未使用ですがUdemy(https://www.udemy.com/)
も勧められることが多いです。こちらはセール期間があるのでそこで買うといいですね。

Progateもドットインストールも有料版はありですが、重ねて受講しなかったので
Progateで有料を進める→詰まったらドットインストールをみて必要であれば課金
がいいかと思います。

HTML&CSSのコースを10日間でクリアしました。
自分で決めたことは「道場編は絶対テキストを見ないこと」でした。
Progateは初学としてはいいですが、基本テキスト通りに打ち込むだけなので、
このままだと自力がつかないと判断し、より本番に近い形に近づけました。

躓く→Google検索 を繰り返しました。

この判断は大きかったと思います。かなり時間はかかりましたが理解度が深まりました!

Day11〜20:Twittwerの工夫と挫折

ここで周りのツイートをみると、自分のツイートの稚拙さが…
どうせやるなら目標を決めようと思い、
1.フォロワー数を増やしていく(フォローを多くしていく、#をつける 等)
2.後で検証できるように時間を明記する の2点を変更しています。

そして、プログラムの方はローカル環境でのプログラミングにトライしましたが…
Git、Terminalがうまく使えず無事死亡しました。あまりにも理解が出来なさすぎたので、
できることからしようと考えProgateのJavaScriptをクリアします。

ここでTwitter有効活用の成果が!デイトラに出会います!!!

https://tokyofreelance.jp/daily-trial-map/

分かりやすく説明すると、初学者が進むべきロードマップが具体的に記されていますToT
今までの道のりもデイトラ通りでしたし、今後については引き出しが増えました!
デイトラ通りにBootstrapを学習し次のステップに進みます。

Day21〜30:自作サイト完成編

デイトラ通りに進めるとLP(Webサイトの見出し)作成ですが、ここでふと思います。

「いっそのこと自作サイト作った方がいいんじゃ…」

そして、友人が実際に民宿を経営しているので、そこから依頼が来たと仮定して作成し始めます。
(実はこの時実際に友人の民宿HPつくれそうだったのですが、残念ながら流れてしまいましたToT)
画像は商用可のフリー素材を使用。テキストは頭で捻出しました。

ここで学んだことは、
・Google Chromeの検証が神すぎる
・コードはコピって貼り付けでOK

Google Chromeの検証は主にCSSの確認、修正で大活躍しました!
手順を踏めば、検証での修正&保存も可能です。
特にBootstrapは、どのスタイルが適用されているか分かりずらいと思います。
検証で一発確認できるのでめちゃくちゃオススメです。

最初はコードの意味を一語一語理解して進めるべきっ!
と思ってましたが、それを解説しているサイトも少ないので、そのやり方だと日が暮れます。
考え方を変えて、完成品を作りそれを壊すことで理解するように変更しました。
パズルやプラモデルを思い出して欲しいのですが、バラバラで説明書がない状態から始めるのは厳しいと感じませんか?
僕はそう感じたので、ネット上にあるコードを貼り付けて壊し、理解していきました。

そんなこんなで、できたサイトがこちらです(https://minsyuku-example.netlify.com/index.html)
まだまだ修正点はありますが、公開できて一安心です。

(ちなみに使用したテキストエディタはVScodeで、サイト公開はNetlifyです)

成果物一覧

Day21~30 作業時間:20h「自作サイト(仮定の民宿)」制作

+この記事を作成

初月なので基本的にはインプットがメインでした。

さいごに

いかがでしたか?
今回は細かい技術は書かずに、考えた内容を思い出して記載していきました。
細かい技術はググればでてくるので。

今後も定期的に振り返っていく予定ですので、ご要望や意見などありましたらご連絡お待ちしています。

ばーん

baan_nasebanaru
2019.11~ITに興味を持ち学習開始。現在は副業としてWebサイト制作やシステム開発に携わっています。React中心でお仕事を受けています。 転職活動開始しました。 わくわく会というコミュニティにも所属しており初学者の方のサポートや、案件の紹介をしています。もちろん無料のコミュニティなので、興味のある方は是非お声掛けください^^ (TwitterのDMが1番反応しやすいです!)
https://baan.work/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away