エンジニアのひよこ_level10

【毎日更新!】新卒2年目エンジニアブログです! プログラムだけじゃなく、マネジメントとかも書いていきたい!

このブログは? 毎日更新エンジニアブログです【更新:2018/09/12】

このブログは?

毎日新卒3年目が学んだことを記事にしているブログです。
ターゲットを広めに、簡単な記事を書いていることが多いです。

あなたは?

  • 新卒2年目のエンジニア
  • スクラムマスター見習い
  • 新卒2年目でLaravelにコントリビュート。
  • 趣味はVROculus Rift等。

使用技術

Docker,HTML,CSS,JavaScript,PHP等々...

こいつ面白いな?

そう思ったら、渋谷で良ければランチでもいかがですか!
twitterかメールで連絡していただければ、いつでも歓迎です!(メアドはgithub参照)

klack710 (Masaki Obata) · GitHub

https://twitter.com/nyamucoro

おすすめ記事

willow710kut.hatenablog.com

willow710kut.hatenablog.com

【一週間振り返り】Vueの勉強やりきったー!って一週間【555日目】

1.今週一週間の感想(ざっくり)

Vueの勉強やりきったー!って一週間でした。

2.良かったこと

  1. Vueの勉強、最後難しかったけど止めずに続いた!

  2. 動画投稿だけど、youtubeそのままより、twitterでshort版も一緒に流すのが良さそう

3.もっとこうしたかったこと

最近運動量減ってるぞ・・・2日BeatSaberサボったな私・・・

4.新しく気づいたこと

疲れ果てて家に帰って、ブログ書いたけどBeatSaberしてない日が出てきた。

あと腹筋ローラーも回数減ってるのはまずい。
続かない理由を分析しなければ

5.来週したいこと

Vueに対しての、次の一手を考えたい!このままだと勉強した満足!になってしまう。

6.その他

いいねされた回数だけBeatSaberや腹筋ローラーやるとか計画してみるか・・・?

7.体重

101.0kg

この、微妙に100kgを削れない!!!

100kgを超えるのはなかなかなかったが、逆にこっから削るのもなかなか大変!!!

【Vue】Vueの勉強始めようpart19(Last!!!)(本を読み返す!)【554日目】

前回

www.nyamucoro.com

参考書籍

今回やったことは?

  1. コードのリファクタ
  2. 本を再度読み返す

実際のコード

■プルリク

v-modelでgetとset出来るように変更 by klack710 · Pull Request #13 · klack710/study_vue_cli · GitHub

■作ったもの(ブランチはmaster参照なので、今後も更新されます)

competent-brown-63c0e3.netlify.com

学んだメモ

無事に、本が読み終わりました。

サンプルプログラムとかも、結構書けてよかった。
20日間、ワクワクしながら読んでました。

一通りコードを書いた後本を読み返すと、格段に読みやすくなっていました。
propで子に値渡して子で作業、$emitでイベント発火を親に伝えて親側で作業。

やっとdataとpropの違いがイメージ出来ました。コメントやTwitterで教えてくださった方、ありがとうございます!!!

とりあえず、コードを読んだり書いたりは出来るくらいにはなった気がします。
さすがに設計はすぐには出来なさそうですが、、、

ここからはNuxt.jsを学ぶか、何かしら自分でLaravel+Vueのサイト作ることで理解を深めることをやっていきたいと思います。

Vueをいつか会社に導入してみたいという野望があるので、それの説得が出来るように頑張ります!!!

最後に

さて、約1ヶ月やってきた、この勉強記事も終わりにしたいと思います。
この記事で、何かしら勉強することの勇気になった人がいれば幸いです。

twitterでいいねしてくれたり、
質問に答えてくださった方々、本当にありがとうございます!!!
おかげで続けられたと言っても過言ではありません!!!

これはあくまでスタートラインですが!ちゃんと立てたことが凄く嬉しいです!

それでは、ありがとうございました!
これからもういろうをどうぞよろしくお願いいたします!!!

ぼそっ

ほしいものリスト貼ってみる(^q^)←

ここにある飴はわりとおすすめ!

www.amazon.jp

【Vue】Vueの勉強始めようpart18(vuexでフォームの値を共有)【553日目】

前回

www.nyamucoro.com

参考書籍

今回やったことは?

  1. vuexでフォームの入力値をaction経由で保存

実際のコード

■プルリク

Vuexでフォームの値をaction経由で変更 by klack710 · Pull Request #11 · klack710/study_vue_cli · GitHub

■作ったもの(ブランチはmaster参照なので、今後も更新されます)

competent-brown-63c0e3.netlify.com

学んだメモ

データの変更と描写をVuex経由でやることまでコード書きました。

action(actions), conputed(computed)とかって誤字のせいで、1時間動かないって悩んでました・・・

結構データの動きがイメージついてきましたφ(..)メモメモ
やっぱりグローバル変数、グローバル関数感あるので、もう少し勉強勉強。

また、前のdataとpropsの違いに関しては、未だピンと来てないので、色んな人の解説聞いて、頑張って理解します!

【Vue】Vueの勉強始めようpart17(dataとpropsの違いがわからない)【552日目】

前回

www.nyamucoro.com

参考書籍

今回やったことは?

  1. なし(´;ω;`)

実際のコード

■作ったもの(ブランチはmaster参照なので、今後も更新されます)

competent-brown-63c0e3.netlify.com

学んだメモ

現在Vuexを勉強中なのですが、
今更、propsと、dataの違いがわからなくなりました(´;ω;`)

今本を読み返しているのですが、propsは親からデータ受け取るって言われてるのに、『????』ってなってます。

今度、どなたかにpropsを使うと嬉しい時ってなに?みたいなのを教えてもらおうと思っていますφ(..)メモメモ
これはいろいろ勉強し直したほうが良い気がしてきています・・・!

どなたか解説いただけますと嬉しいです(´;ω;`)

【Vue】Vueの勉強始めようpart16(Vuexで、ページ読み込み回数保持)【551日目】

前回

【Vue】Vueの勉強始めようpart15(詳細ページをSPAで作成)【550日目】 - エンジニアのひよこ_level10

参考書籍

今回やったことは?

  1. Vuexで、ページの読み込み回数を記録

実際のコード

■プルリクエス

Vuexでページの読み込み回数持ち、consoleで吐き出す by klack710 · Pull Request #9 · klack710/study_vue_cli · GitHub

■作ったもの(ブランチはmaster参照なので、今後も更新されます)

competent-brown-63c0e3.netlify.com

学んだメモ

f:id:willow710kut:20190418004819p:plain

これだけ見ると全部のコンポーネントで扱える、グローバル変数ってイメージがあるのだけどどうなんだろう・・・? 真価が見えぬ・・・

グローバル変数って思えば、よくVuexは何も考えず使うとやばいって言われたら、まあせやなって感じ。

ただ、今の時点ではVuexの機能全く使ってないと思うので、これから勉強って感じっぽいφ(..)メモメモ

【Vue】Vueの勉強始めようpart15(詳細ページをSPAで作成)【550日目】

前回

www.nyamucoro.com

参考書籍

今回やったことは?

  1. 製品リスト、製品詳細をSPAで作成

実際のコード

■プルリクエス

APIで商品ページと商品詳細ページをつなぐ by klack710 · Pull Request #7 · klack710/study_vue_cli · GitHub

■作ったもの(ブランチはmaster参照なので、今後も更新されます)

competent-brown-63c0e3.netlify.com

学んだメモ

最初複雑かと思ったら、思ったよりシンプルでした。

vue-routerでルートの指定は凄くわかりやすい。nameも作れて、Laravel触ってるとわかりやすい。

今回は関数で仮APIっぽいのにしてるけど、ちゃんとURL指定してAPI飛ばせば、普通の製品詳細画面が作れそう。

フロントVue、バックエンドLaravelおすすめが今わかってきた気がするφ(..)メモメモ

もうそろそろこの本も終わりますね・・・すっごく分かりやすかった。
挫折しにくさでは、かなり優秀な本。最後まで頑張るぞー!

【Vue】Vueの勉強始めようpart14(vue-routerでSPA作成)【549日目】

前回

www.nyamucoro.com

参考書籍

今回やったことは?

  1. vue-router導入
  2. SPAページ作成

実際のコード

■プルリクエス

vue-router導入、SPAページ作成 by klack710 · Pull Request #5 · klack710/study_vue_cli · GitHub

■作ったもの(ブランチはmaster参照なので、今後も更新されます)

competent-brown-63c0e3.netlify.com

学んだメモ

めっちゃ簡単!!!

インストールはもちろんコマンド一個で出来ました。

app.jsの設定とかも、Laravelの元コード読んだり、オレオレフレームワークを作ったことがある人なら、
あーなるほどね(‘ω‘ )って感じになると思います。

プルリク見ると思いますが、構成は非常にシンプルに書いてます。
そしてシンプルに書けます。

これからいろいろ試してみて、何が大変かを学ぼうと思いますが、一旦ページ作るのだけなら、かなり簡単にできそうですφ(..)メモメモ

本当にここまでシンプルなら、保守性かなり高そう・・・!