Whiteboard-Vue 4週目(実施期間:17日)

学習

進捗

Whiteboard-Vue

f:id:fatherofikura0107:20181121075157j:plain

動くものは★こちら★

未着手/作業中/完了 内容 詳細
完了 在籍状況のフィルタリング 画面上部のSwitchを利用し、Table表示対象をフィルタリングする
完了 在籍状況の変更 画面下部のButtonを利用し、選択している行の在籍状況を変更する
完了 課の切り替え機能 画面上部のMenubarを利用し、課ごとの在籍状況を切り替える
完了 在籍状況の補足情報を登録する(テキストボックス) 在席状況変更時にテキストボックスに入れた補足情報を登録する
完了 在籍状況の補足情報を登録する(プルダウン) 在席状況変更時にプルダウンにて選択した補足情報を登録する
  • 木曜/金曜と朝活できなさそうなので今週は切りが良いのでここまで。
    • 上記の一覧を対応出来たので第一段階は終了。データ永続化のためにWebAPIサーバを作りたい。

所感

  • iconが出ないので気になっていたが、こちらを参考にしたら表示された。
    • BuefyはMaterial Design Iconsがデフォルトであることを知った。
    • CDN使わない方法にしたいがどうすればよいのだろうか。
  • soussuneを聞いていてNetlifyが気になったので試しにリリースしてみた(参考)
    • 簡単に公開できた。データの永続化を考えたらこれじゃ駄目だけど。

Whiteboard-Vue 3週目(実施期間:14日)

学習

進捗

Whiteboard-Vue

f:id:fatherofikura0107:20181116172606j:plain

未着手/作業中/完了 内容 詳細
完了 在籍状況のフィルタリング 画面上部のSwitchを利用し、Table表示対象をフィルタリングする
完了 在籍状況の変更 画面下部のButtonを利用し、選択している行の在籍状況を変更する
完了 課の切り替え機能 画面上部のMenubarを利用し、課ごとの在籍状況を切り替える
作業中 在籍状況の補足情報を登録する(テキストボックス) 在席状況変更時にテキストボックスに入れた補足情報を登録する
作業中 在籍状況の補足情報を登録する(プルダウン) 在席状況変更時にプルダウンにて選択した補足情報を登録する
  • 上記の一覧を対応したら取り敢えず第一段階は終了として進める。
    • 今は内部的にデータを保持しているだけなので、次はデータ永続化の検討をしたい。

所感

  • VueRouterを使おうと考え以前読んだ猫本を読み直す
    • VueRouter以外で自作しようとした際に自分で調べ直している内容が多いことに気づいた。
      • 本を読むだけでは駄目で、読んだ内容を利用して何らかのOutputが必要だと感じた。
    • どうやって課の情報を渡そうか。今は$route使えば簡単だが実装的に良くはないだろう...。猫本はprops使っているがstore化できないのかなー。
  • 課や在籍状況などがハードコーディングになっている...どうにかしたいが第一段階としては取り敢えず動く形を目指す。

Whiteboard-Vue 2週目(実施期間:9日)

学習

進捗

Whiteboard-Vue

f:id:fatherofikura0107:20181109082059j:plain

所感

  • 複数コンポーネント間の連動＝データ共有が必要なのでVuexを導入。
    • 初めは全然コーディングが進まなかったが時間が経つにつれてデバッグしながらのコーディング方法がだいぶ分かってきた。
  • 「在籍状況のフィルタリング機能」は動くようになった。
  • 後は「在籍状況の変更機能」と「課の切り替え機能」をつけたい。
    • 「課の切り替え機能」はRoutingで対応したいので後回し。次は在籍状況変更を次のターゲットとする。
  • mapGettersを使い複数のストアのGetterを1つのモジュールで利用する方法が分からず悪戦苦闘
    • サイトを見て動くようになった。オブジェクトスプレッド演算子という謎の言葉があった。
      • オブジェクトスプレッド演算子：Array.prototype.concat()(＝配列連結)相当のことが簡潔にかける。

Whiteboard-Vue 1週目(実施期間:4日)

学習

進捗

Whiteboard-Vue

f:id:fatherofikura0107:20181102080246j:plain

所感

  • 動くものを作ろうと考え「在席管理ツール」を作成中。
    • UIにはBuefyを導入。
  • MenubarのDropdownに更にそこからメニュー出したい場合どうするんだろう…自力で実装する？？
    • bulmaの拡張としてmegamenuがあるので使ってみようかな。
  • 見た目はだいぶできたのでコンポーネント間の連動をつけていきたい。
    • 行を選択したら自動でチェックが入って欲しいけどできるのだろうか…
  • 下記の点がおかしいので修正したい。
    • Paginationで使うページ移動ボタンのアイコンが表示されない。Font Awesomeって特別の設定がいる？？
    • is-linkとis-primaryが同じ色になる。Bulma公式サイトとちがうやん！！

Blackjack-Vue 1週目(実施期間:4日)

学習

進捗

Blackjack-Vue

https://qiita.com/t2kojima/items/88a924fa3807909e0488

  • コードを一行一行確認しながら意味を確認/理解しながら写経。

所感

  • @t2kojima様、写経させていただいております。ありがとうございます。
  • SCSS？Sass？？
  • yarnって何？？
    • 「yarn = npm install。npm installをより高速に、そしてコンパクトにしたもの」と思えばOKらしい。(サイト)
  • Sass使うためにはsass-loaderのInstallが必要だった。どこかで見落としがあった？？開発環境の違いだろうか？？(サイト)

基礎から学ぶ Vue.js 11週目(実施期間:42日)

学習

進捗

基礎から学ぶ Vue.js

f:id:fatherofikura0107:20180810080001j:plain

  • 進捗100%(331/331)[前回+9%]
    • 1日RaspberryPiを触っていたため朝活できず

所感

  • HTMLのdlタグが出てきた。これは何だ…
    • HTML5からdlはdefinition list(定義リスト)⇒description list(記述リスト)に意味合いが変わったらしい。(参照)
      • セマンティックを表現できるのでComputerにとって解釈しやすくなるとのこと。へぇ～。
  • SECTION52が同様の手順で…となっているが同様にできない自分がいる。理解が追いついていない証拠。
    • だいぶ理解が出来たが、かなりの時間を使ってしまった
  • Vue CLIのデフォルトだとアプリケーションコードが「app.js」1つになるらしい。
    • コンポーネントの数が多い場合、webpackのコード分割機能を仕様してロード時間を短くする工夫が必要。なるほど。

基礎から学ぶ Vue.js 10週目(実施期間:38日)

学習

進捗

基礎から学ぶ Vue.js

f:id:fatherofikura0107:20180810080001j:plain

  • 進捗91%(301/331)[前回+2%]
    • 祝日＋出張(SPI Japan 2018)により2日しか朝活できず
      • 出張で良い刺激を受けた。エンジニアとして自分の価値を少しでも高められるよう日々研鑽したい。
    • 来週でやっと終われると思う。

所感

  • Vue Routerは「hash」と「history」の2種類のモードがあるとのこと。なぜ2種類あるのか…。
    • HTML5のhistory.pushStateAPIが使えるか否かが分かれ目のよう。古いブラウザであればhash選ぶと良いとのこと。(参考)
  • replace属性はwindowオブジェクトのhistory.replaceState()と同じとあるが、そっちも分からない…。
    • 現在の履歴を書き換える(＝履歴に追加したくない)時に使うのか。なるほど。(参考)