Laravel+Vue.js+JWTAuth 1週目(実施期間:5日)

進捗

Laravel+Vue.js+JWTAuth

所感

  • 今まで学習してきたLaravel+Vueを使ってデータ永続化を学べそうなので学習題材として選択させていただいた。
    • @acro5pianoさん、ありがとうございます。勉強させていただきます。
  • JWTAuthという言葉を初めて知った。
  • perl -i -pe 's/DB_.+\n//g' .env」…perlのようだけどこれは一体何をしているのだろうか…
  • Vue.js側でvue-spinnerを使っている模様。
    • おー、オシャレ。Loadingに時間がかかる処理を入れるときは使ってみよう。
  • Windows環境で開発しておりPowerShellでのcurlコマンドがInvoke-WebRequestのエイリアスに割り当てられてて使いづらい…。
    • こちらのサイトの対応をして無事解決。素晴らしい。
    • ついでにChocolateyでjqも入れて快適になった!!が、この手間はWindows環境だから発生しており無駄に感じるところではある。
  • SQLiteはインメモリで使えるらしい。知らなかった。
  • 下記エラーが出てUnitTestが失敗する…
    • 「testing.ERROR: Symfony\Component\Debug\Exception\FatalThrowableError: Call to a member function fresh()」
      • 調べてみたが解決できず…。POSTで引っかかってるようだが、原因が分からなかった。
      • UnitTestではなくPowerShellからPOSTすれば成功するんだけどなぁ…

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のコード分割機能を仕様してロード時間を短くする工夫が必要。なるほど。