フロントエンドエンジニアは覚えることがたくさんありますよね。

フロントエンドは覚えることがたくさん

• html
• css
• javascript(typescript)
• react.js(vue.js)
• httpの基本

勉強を始めたときには、ひたすらインプットでした。
でも人間って不思議とインプットだけでは身につかないんですよね。

100回の目撃 < 1回の経験

なにかの本で読んだのですが、経験に勝るものはありません。
ということで辿り着きました。
作りながら覚えればいいじゃん。

何を作るのか

目的によって作るものを考えました。

• 転職なら掲示板
• 勉強ならブログ

勉強ならブログ

wordpressや外部サービスを使えばブログというか、アウトプット先ができます。
でも今回はフロントエンドのお勉強です。
せっかくならオリジナルブログをHelloWorldから育ててみたいと思いました。
流行りの技術など組み込みながら実装するの、楽しそうじゃないですか！！

技術選定

最近の傾向としてはSSG（Server Side Generator）があります。
よく耳にするのは以下の通り。

• Nuxt.js(vue.js)
• Gatsby.js(react.js)
• Next.js(react.js)

NuxtとNext、よく見まちがいます。

Nextを選定した理由

アジアだけvue.jsが先行していますが、世界的に見るとreact.jsですね。
あとはフレームワークの差ですが、理由はそんなになくて最初に触ったのがNext.jsだからですね。
子供というのは最初に触ったものを親と勘違いしてしまうのですよ。

使用したもの

cssフレームワークなど使えるものはどんどん使ってます。
電車を車輪から作るのは非効率的です。

npm

• typescript
  • javascriptの静的型付言語
• Tailwindcss
  • cssフレームワーク
• Next.js
  • reactフレームワーク
• Fontawesoe
  • iconフレームワーク

フォント

• Google Font

デプロイ先

• Vercel

CMS

• microCMS

作り方

1. npxでプロジェクトディレクトリの作成
2. Vercelデプロイテスト
3. Tailwindcssの導入
4. FontAwesomeの導入
5. microCMSとの連携
6. ブログデザインの選定とコンポーネントへの落とし込み
7. Google Analyticsの導入
8. 画像の最適化
9. SEOの最適化
10. 動的OGPの導入

時間できたらブログの記事に落とし込むのもありかと思っています。
ちなみにリポジトリはこちら。
https://github.com/ei-show/offiter

今後追加したい機能

• 記事内に目次の作成
• 記事内のリンクにOGPを
• PWAの導入
• お問い合わせページの導入
• レビュー機能の導入
• 無限スクロールの導入
• テストコードの実装

まとめ

機能を作りながら覚えていっている感じです。
やっぱり手を動かして経験することが一番の近道なんだと実感しました。
まだ他にも作りたいサービスもあるので更新を続けたいですね。