前回の『【～Day 30】#100DaysOfCodeでプログラミングを独学して、成長した話』の続きです。
今回は40日目まで、書いていきます。
初めてWEBに公開！
自分のポートフォリオみたいなサイトを作成し、初めてWEBに公開しました！
それはうれしかったですね。
手順としてはこんな感じ
- Figmaでデザインを作成
- デザインを見ながら0からコーディング
- お名前.comでドメイン取得
- firebaseの構築(ドットインストール「FiraBaseでウェブサイトを公開してみよう！」)
- firebaseとドメインの紐づけ
- 公開！
Figmaについて
WEBデザインをするためのツールに代表的なのが
- Adobe XD
- Sketch
- Figma
- PhotoShop,illustrator
が上げられると思います。
詳しくは、ググるとたくさん記事があるので、調べて欲しいのですが、
まず、なぜ「Figma」にしたのか。
それは、ドットインストールさんのツイッターで
社内では「Figma」を使っています
というツイートがあったからです。
僕みたいなデザインに鈍い人だと、
「イラレかフォトショで作るのかな」
と考えがちだと思います（あくまで個人の意見です）。
少なくとも僕は最初そう思いました。
でもイラレ、フォトショは高機能すぎて、
まず使い方を学ぶ必要があります。
「そんな時間、僕にはありましぇん！」
ということで、何か簡単に使えるものはないかなと思ったときに
ドットインストールさんのツイートみたのです。
他のデザインツール
他にAdobe XDやSketchなどありますが、
まず、Sketchは当初、Windowsでは使えませんでした。
（今はLunacyというSketchのWindows版が出ているみたいです）
また、Adobe XDは、有料だと思い込み、とても使いやすいのに、候補から外していました。
今は、Adobe XDを使っています。
めちゃくちゃ使いやすいです。
なので、デザインを作成したい場合はAdobe XD激推しです！
Adobe XD公式サイトにあるチュートリアルをするだけで、かなり使えるようになります。
コーディングについて
vsCodeというテキストエディタを使って、コーディングしました。
ぐちゃぐちゃコードでしたが、なんとか形にしました。
この形にするというのが大事なポイントなのかなと思います。
コーディングしていると、基礎が身に付き始めたほとんどの方は、
「汚いな」
とか
「もっときれいにしたい」
と思うと思います。
そう思って、修正していくとおそらくだいたいの方が挫折します。
時間がかかりすぎてしまう。
ここで、Facebookの創始者、ザッカーバーグの明言を・・・
「Done is better than perfect.」
完璧を目指すより、まず終わらせろ
という意味です。
だいたい形になってればいいのです。
細かいところは、その後でも修正できる。はず。
たくさん自分で作成していくと、だんだんうまくなっていくものだと思います。
firebaseとドメインの紐づけ
設定の手順としては、
- firebaseに設定したいドメインを入力する
- txtレコードが発行される
- txtレコードをお名前.comに登録する
- firebaseからAレコードが発行される（時間かかります。）
- Aレコードをお名前.comに登録する
だいたい、公開できるようになるまで、1日かかります。
ここでミスしていたら、時間がかかるので、慎重に行いましょう。
100DaysOfCode【Day31～Day40】まとめ
- 40日間で、オリジナルサイトを作成できるようになります
- 細かいことは気にせず、とりあえず終わらせる
- ドメイン設定は慎重に！
