やりたいことは家に在る

営業を辞めた女がプログラマーになるまでの記録。

【プログラミングスクールウェブカツ6.5ヶ月経過】HTML部上級のVue.jsを学習して驚いたこと

f:id:echigorira-diary:20191114190607p:plain

 

みなさんこんにちは!

プログラミングスクールウェブカツで絶賛プログラミング勉強中のまるみです!

女性割引を適応させていただいており、格安な金額で入部させてもらってます。

 

ウェブカツでプログラミングの勉強を始めて6.5ヶ月経過しました。

半月前はVue.jsがわからなすぎて心折れていましたが、周囲の仲間に刺激を受けて気持ちを新たに頑張れています。

学習を進めていて、「あれ?私こんな初歩の初歩みたいな勘違いをしていたんだ」「もっと早く気づいていれば効率よかったのに…!」 と思ったことがありました。

自分の情報収集能力の低さに驚きつつ、もしかしたら私と同じ人が1000人に1人くらいいるのではと思い、今回のブログのテーマにしました。

最近Vue.jsを始めたばかりの方、これから学習する方がより効率よく学習できますように!

 

▼私がもやもやしていた時期を乗り越えた話

 

www.yaritaikoto-ha-ieniaru.com

 

▼そもそもプログラミングスクールウェブカツとは…?という方はこちら

 

webukatu.com

 

 

驚き①え、CDNあるんだ…

Vue.jsはCDNがあるんですね。

これ学習し始めて4日目くらいでやっと気づきました笑

VueCLIでやるもんだとばかり思っていました。

 

VueCLIとは…

Vue.jsの開発を手早く進めるためのシステムです。つぎのような機能が備わっています。

  • インタラクティブなプロジェクトのひな型作成 - @vue/cli
  • 設定なしに即使えるプロトタイプ作成 - @vue/cli + @vue/cli-service-global
  • 実行時の依存設定 - @vue/cli-service
    • アップグレード可能
    • webpackにもとづく実践的なデフォルト設定
    • プロジェクトごとの設定ファイル
    • プラグインによる拡張可能
  • 豊富な公式プラグインによりフロントエンドエコシステムに最適なツールを統合
  • グラフィカルユーザーインタフェース(GUI)でVue.jsプロジェクトの作成と管理

Vue CLIが目指すのは、Vueエコシステムを支える標準ツールです。さまざまなビルドツールを適切なデフォルトのもとで円滑に統合し、設定にわずらわされずに、すぐにアプリケーションがつくりはじめられます。また、ツールの起動・終了を繰り返すことなく、設定が柔軟に調整できます。

FumioNonaka.comより

 npmで使ってインストールします。

黒い画面が苦手なので最初時間がかかりました…。

 

いきなりCLIの勉強するのではなく、CDN使ってシンプルなToDoリスト作った方が難易度低くてよかったなと思います。

 

おすすめ学習

一、まずはCDNを使ってToDOリストを作るべし

▼こちらがわかりやすいです

https://cr-vue.mio3io.com/tutorials/todo.html

 

二、できたらCLIに挑戦してみるべし

▼こちらが最高にわかりやすいです

http://www.fumiononaka.com/Business/html5/FN1807001.html

 

 

驚き②動画見ただけじゃアウトプットできない…

私がReactをぶっ飛ばしたせいなのかもしれませんが、動画を理解できても「え?それで何をどうやって作ればいいんだー」となってしまいました。

そんな時は本とセットで学習をした方が良いみたいです。

先輩方のブログを読んだ色々調べた結果、私にはこれが合っていると思い購入!

 

f:id:echigorira-diary:20191114193419p:plain

https://www.amazon.co.jp/dp/B07X6F1C2P/ref=dp-kindle-redirect?_encoding=UTF8&btkr=1

手取り足取り教えてくれる感じでとてもわかりやすかったです!

わかるようになったら逆に物足りなくなるので、その時はまたレベルアップしたものを買おうと思います!

 

おすすめ学習法

一、動画と本をセットでインプットすべし!

 

 

驚き③本と動画だけでも完璧に理解できない…

まぁ、これは驚きというかあたりまえですね。

だってコード書いてないんだもん!

ということでコードを書きました。

先ほども紹介したVueCLIを使ってToDoリストを作成するあれです。

▼最高にわかりやすいですこれです

http://www.fumiononaka.com/Business/html5/FN1807001.html

 

まず1周してよくわからなくても作ってみることをしました。

ただ、それでもよくわからない。

なんかコンポーネントがありすぎて、どこに何書かれているか全然理解できなかったんですよね…

というわけでいつもの紙にコード印刷して頭整理するやつをやりました。

いつものことながら汚い字ですみません。

毎度のことながらこれをやるだけですごく理解が深まります。

一見効率悪そうですが、私はこれをWebサービス部の時も、オブジェクト指向部の時もやりました。

 

おすすめ学習法

一、動画→本→ToDoのアウトプットをすべし!

二、頭が混乱したら紙に書いて整理すべし!

 

 

まとめ

以上をまとめるとこんなやり方が効率良いのではないかと思います!

①ウェブカツの動画を見る

②本を読んで理解を深める

③CDNを使ったサイトを写経してみる

④CDN使ってアウトプットしてみる

http://www.fumiononaka.com/Business/html5/FN1807001.htmlを1周してみる

⑥⑤を参考にToDoリストをアウトプットしてみる

⑦余裕があればもう1つアウトプットしてみる

 

こんなところでしょうか?

私はまだ終わっておりませんのでここから巻き入れて頑張りたいと思います!

 

余談

この半月はとても良い気づきが多かったです。

 

まず、私は本当に人に恵まれています。

今までもそうだったけど、プログラミング学習においてもラッキーなことにたくさんの人に支えられていると思えたことがありました。

ウェブカツが炎上したとき、いつもなら「なんかやってるなー」くらいにしか思わなかったのですが、前回の炎上は少し心がざわざわしてツイッター6時間も見ちゃうくらい笑

完全にこの時頭おかしかった。

 そんな時に周囲の仲間が私のことを引っ張り上げてくれました。

今心を安定させて勉強できているのも、その方々のおかげだと思っています。

そしてみんな客観的に、そして強い意志をもって学習されていてすごいなと思いました。

自分の気持ちくらい自分でコントロールできないとこれからやっていけないなと気づかされました。

 

 

また、現在共同開発もやっているのですが、本当に勉強になることばかり。

詳しくは言えませんが、私月に約2万円しか払っていないのに、こんなに勉強になることばかりでいいんですか?ってくらいコスパ最強です。

プログラミングだけではない部分まで学べることがとてもありがたいです。

 

特に1番勉強になるのは、かずきちさんのビジネスやサービス、カスタマーに対する考え方を身近に感じられること。

私はWebサービス作る時に主観が強くて、全然カスタマーのことを考えられていないと気づくことができました。

カスタマーが一目見て価値を感じる見た目になっているか、価値を感じるサービス内容になっているのか。

新しいサービスを作ることの大変さ、この2ヶ月で身を以て知ることができました。

 

本当はブログ5回分に分けて共同開発について語りたいくらいなのですが、無事にリリースできてからにします!笑

お楽しみに!←

 

 

そんなこんなで、かなり働く勇気も湧いてきまして、12月21日までに内定をもらうという目標を決めました。

ウェブカツでプログラミング学習初めてもう6.5ヶ月…やっと働けるかも思えてきてよかったです><

 

Webサービス部終わってからも面談や説明会には行ってましたが、落ちるのが怖くて面接は受けておりませんでした。

2019年の締めくくりを良いものにするためにもここで活動し始めようと思います。

 

なぜ行動に起こそうかと思ったかというと、とても行きたい会社があったからです。

スキル不足で仮に落ちてもプログラミングスキルを磨いていつか絶対また受けたいと思うほど、私の今の理想にぴったりな会社です。

落ちるのが本当に怖いけどでも勇気を出して受けようと思います。

 

目標は

11月中でVueとLaravel終わらせる(できるのか?)

12月から就活開始!21日までに決める!

ということで最後の追い込み頑張ります!