Posted at

意識低い系フロントエンド勉強法


はじめに

@neet_seといいます。

普段はフリーランスエンジニアみたいなニートをしています。

今までJavaでバックエンドを作ったりインフラを構築する仕事がメインでしたが、最近ガッツリとフロントエンド開発に携わることになったため、今回はそこで得たナレッジをシェアしたいと思います。


やりたいこと

タイトルの通り、いかにコストを書けずにフロントエンド開発に必要なスキルを習得するか、です。

フロントエンドは地味に覚えることが多いです。

React、Vueなどのライブラリ、AngularJSやNext、NuxtなどのFWなど色々ありますし、流行り廃りが激しいといいます。

そこで怠け者な私が、いかに楽にフロントエンド開発に必要な技術を習得するかを考えてみました。

完全に初心者向けではなく、既にある程度勉強が進んでいる方、あるいは経験がある方向けです。

ちなみに現在の私のスペックはこんな感じです。


  • HTML/CSSは中学生の頃、ちょろっと触ってた

  • JavaScriptは基本文法は大体知ってる

  • Reactを1ヶ月ぐらい触ってた

  • 最近、VueやNuxtを触りだした


STEP 1 ざっと関連技術の書籍や記事を読んでみる

本当にざっと読むでよいのです。

無理に理解したり暗記する必要はありません。

そして私は意識低い系、そんなに頭の出来もよくないのです。

ざっと眺めるように全体的に読んでいきます。

本を選ぶポイントは「AmazonやGoogle、Qiitaなどで評判のいい、よく目にするもの」です。

ぶっちゃけた話、本をあれこれ選んでる暇があったら勉強したほうが良いですし、現在は教材の質も量も揃ってきていると思うので、どれを読んでも大して変わりません。

現在、私はVueを使っているのでこちらを読んでみました。


速習Vue.js 速習シリーズ

Kindle Unlimitedだと無料で読めます。

いつも新しいジャンルを開拓するときはKindle Unlimitedで何か一冊読んでから、普通の技術書を買うことにしています。

https://www.amazon.co.jp/dp/B07BS62Z94


基礎から学ぶ Vue.js

有名な猫本です。

完全にゼロからの人にはキツいと思うのですが、ある程度の開発経験とフロントエンドの知識があったら普通に読めます。(全てを理解、暗記できるとは言っていない)

https://www.amazon.co.jp/dp/B07D9BYHMZ


STEP 2 テンプレートを買う


envato market

envato marketというテンプレートを売っているサイトが有名です。

こちらではWordpressのテーマだけでなく、ReactやVue、その他フレームワークで作られたテンプレートがたくさん売られています。

高いものでも3000円いかないぐらいで買えます。

技術書一冊買うのと同じ値段ぐらいでお手頃。

https://themeforest.net/

使い方はこちらとか。

https://nomadicwood.com/archives/3256


動かして改造して遊ぶ

購入したら、ローカルで環境構築して動かせるようにして遊びます。

大体はダウンロードして解凍したら既にプロジェクトとしてできているので、後はnpm installとかして必要なパッケージを入れて環境構築完了。

エディタとかIDEでプロジェクトを開いたら開発を開始できます。

テーマはこれとかいい感じ。

https://themeforest.net/item/pragmatic-vuejs-admin-template/21775201

デモとして動いている実物も見れます。

https://pragmatic.ddmweb.it/


おわりに

いかがでしたでしょうか?

今回は意識が非常に低いフロントエンドの勉強法を紹介してみました。

確かに基本は大事だし、ちゃんと勉強するべきだと思います。

しかし、私は意識低い系…大体こんな感じで仕事をしています。

よろしかったらシェアしたり何か感想をください。

あなたのアウトプットが誰かのインプットの助けになると思います!

私の運営しているコミュニティTECH::Survivorは無料で参加できます。

月1程度でオフ会も行っていますので、もしご興味がありましたら参加してみてください。

http://techsurvivor.top