🐣 ENJIN最終発表会
作成日: 2022/03/01
4

ENJIN最終発表会

ENJINに参加してVue.jsを学習する

Vue.jsは、これまで何冊か書籍を購入して学習しようとしていたのですが、挑戦しては中断していました。

JSのフレームワークを学習する人たちのコミュニティENJINのことを知り、「期間を決めて学習することで、成果が出せるかもしれない」と考え、参加しました。

(ENJINウェブサイト:https://www.webstaff.jp/enjin/)

学習目標

教材を中心に学習することで、

  1. Vue.jsそのものの理解を深める
  2. 小規模なアプリケーションの設計の考え方を学ぶ

以上を目標としました。

まとめ

  • 教材に沿って、Trello風タスクアプリを制作することができました
  • Vuexについて教材だけでは理解することができませんでした…
  • 1月中旬から忙しくなり、定例会に参加できず、学習も進まない時期がありました…
  • 現在、書籍をつかってVuexの概念について学習しています

学習目標の

  1. Vue.jsそのものの理解を深める

については、当初よりも少しずつ深まってきたと思います。ただし、Vuexの理解については、まだまだです…。

  1. 小規模なアプリケーションの設計の考え方を学ぶ

については、復習が不十分ではありますが、学ぶことができたと思います。設計について継続して学ぼうと思っています。

Trello風アプリの作成(1周目)

Techpitの教材「Vue.js/Vuexを使ってTrello風アプリを作成しよう!」を見て、アプリを作成しました。
01.png

3-1 ListAddコンポーネントを作成しよう
という章で、Vuexという状態管理パターン+ライブラリを使うのですが、覚えなくてはならない概念が多く、「これは1周目で理解するのは無理だ、2周目で理解することにしよう」と思いました。

「手を動かすうちにコードを覚えられたらいいのだが…」と期待しながら、1周目を終えましたが、「あの章が理解できなかった」という気持ちのままでした。

1周目のまとめのticketnote(Trello風アプリをデプロイした):
https://ticketnote.dev/ticket/zXQMlKYHyFJf2nxeR5or

アプリのデプロイ先:
https://fervent-poincare-8d152f.netlify.app/

Trello風アプリの作成(2周目)(中断しました)

ENJIN学習メモ(my-trello2周目)
にまとめたものの、3-1 ListAddコンポーネントを作成しようの章で、やはり、Vuexの詳細がよく理解できず、詰まってしまいました。

2周目を中断して、書籍『これからはじめるVue.js実践入門』でVuexについて学ぶ

book01.png
index01.png
Vuexの理解を目標に、学習中です。

ticketnote((更新中)読書ログ『これからはじめるVue.js実践入門』):https://ticketnote.dev/ticket/pfjvrv5Fusbrwf8SPEJW

カウンターアプリ:ステートをミューテーションで操作する

  1. データを格納するストア(Vuex.Storeオブジェクトのstateオプションのこと)を定義する
  2. ステートを操作するメソッド(ミューテーション)を定義する
  3. コンポーネントでは、定義済みのミューテーションを、ストアのcommitメソッド経由で呼び出す

https://hungry-agnesi-c3398b.netlify.app/

https://github.com/asakon/vuex-basic/blob/main/src/store/index.js
https://github.com/asakon/vuex-basic/blob/main/src/App.vue

本のリストを表示するアプリ:ステートをゲッターで表示する

  1. (カウンターアプリと同じく、ストアを定義する)
  2. ステートにアクセスしたり加工したりするゲッターを定義する
  3. コンポーネントでは、算出プロパティにmapGetters関数を使ってゲッターをマッピングしておく

https://jovial-einstein-6a0603.netlify.app

https://github.com/asakon/vuex-books/blob/main/src/store/index.js
https://github.com/asakon/vuex-books/blob/main/src/App.vue

次に学習すること

  • ストアの状態を操作する(ミューテーション、ペイロード)
  • 非同期処理(アクション)
  • ストアの分割管理(モジュール)

コーダーです。