Vue.js

Vue.jsの勉強をするために必要なこと|コーダーがVue.jsでフロントエンドエンジニアを目指す Vol.02

不定期更新の『コーダーがVue.jsでフロントエンドエンジニアを目指す』シリーズ2回目です。
さっそく記事タイトルに困ってきました…。

今回もコーダーがVue.jsを学ぶための記事を書いていきます。

スポンサーリンク

Vue.jsの学習開始から約2ヶ月、何をしていたか

まずVol.01はこちらから

コーダーがVue.jsでフロントエンドエンジニアを目指す Vol.01
今回からコーダーがVue.jsを学ぶための記事を書いていきます。まずは動機などから。書いていて思いましたが面接の回答みた...

最初はもちろんVue.jsの基礎とVue3(Composition API)から入りました。
勉強をしていくうちに他のことも学ばなければいけないことに気付かされ、覚えることが多くて大変でした。

それが以下の2つです。

  • TypeScript
  • Vuetify

Vue.jsのフレームワークであるNuxt.jsも重要らしいですが、それよりもこの2つを先に学んだほうがいいと判断しました。
特にTypeScriptは現場ではほぼマストらしいです。

なのでこの2ヶ月間はVue.js(Vue3 Composition API)の基礎を学びながらTypeScriptにも触れながら、後ほど書くVuetifyにも手をつけました。

フロントエンド、大変すぎる…。

1日の勉強時間と勉強方法

正直、本業のフリーランスで働いたあと1日30分~1,2時間程度です。
独学というのもありますが、どうしてもやる気が出ないときは10分とかもありました。

ただ、私的に継続するために重要だと思っているのは以下です。

  • 毎日数分だけでも触ること
  • マイペースで進めること
  • 集中できる環境、時間でやること

これはあくまでも私に合ったやり方です。

毎日数分だけでも触ること

1~2日でも触らない日を作ると忘れてしまったり、もういいやとなって継続できなくなるときがあります(経験談)

継続は力なりとはこういうことなのかもしれません。

マイペースで進めること

これはきついとやらなくなってしまうのでマイペース、マイルールを決めてやるのがベストだということです。
もちろんその分、習得が遅れてしまう場合もありますが続けることも大切です。

実は2022年夏頃からダイエットをしていて今まで三日坊主だったのですが、このマイペースとマイルールを守ったら今も続いているんですよね。

三日坊主の私が1年続いているんです。
1年で10kg痩せました。

すごい効果ですよね。だから勉強にも取り入れています。

集中できる環境、時間でやること

これは勉強でも仕事でも同じです。

私は在宅フリーランスなので、昼間でも電気を消してヘッドフォンをして自分の世界を創り出し(厨二病)着手をしています。

昼間はカーテンを開けているので明るいですが、夜はカーテンを閉めて真っ暗になるのでより集中できる気がします。
余計な視覚、聴覚情報を入れないことが大切です。

Vuetifyはクセがあって慣れないと難しい

Vuetify3(UIライブラリ)の仕組みはだいたい分かっているので、習うより慣れろで実践で使いつつ調べながら使っています。

しかし、とはいっても自分にとっては初めて触るもの。
専用のタグ、class、属性がたくさんあり最初は要素を横並び(Flexbox)にするのも大変でした。

でも慣れてくるとほとんどデザインの必要なく、CSSを書かなくても良い感じにレイアウトしてくれるので、コーダーにとってはありがたいシステムでした。

TypeScriptは記述が少なく驚いた

JavaScriptを知っていると記述の少なさに逆に戸惑うレベルでした。
ゆえにJavaScriptを理解していないと、何をしているのか分かりづらいこともあるかも。

TypeScriptは今のところ、勉強することは多くはないので助かっています。

現在はVue.jsを使ったポートフォリオサイトを作成中

Vue.jsで作成中のポートフォリオサイト
Vue.jsで作成中のポートフォリオサイト

現在はVue.jsの基礎を終えて、Vue3、Vuetify3、TypeScript、Vue Routerを使ったSPAのポートフォリオサイトを作成中です。

Vuetify3、TypeScriptは勉強しながら、調べながら、ChatGPTをメンターとして活用しながらこのサイトを作成しているのでけっこうな時間がかかっていますがあと2ページです。

そのあとはブラッシュアップ、SCSSの適用などをしてNetlifyで公開予定です!

タイトルとURLをコピーしました