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

進捗

Whiteboard-Vue

所感

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

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

進捗

Whiteboard-Vue

所感

• 動くものを作ろうと考え「在席管理ツール」を作成中。
  • 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？？
  • Sass：Syntactically Awesome StyleSheetの略。CSSを効率的に書くことができるメタ言語(CSSプリプロセッサ)
  • Rubyのようにインデントのみで書くのを「SASS」記法、CSSと同じカッコでくくるのが「SCSS」記法
  • 参考はこちら
• yarnって何？？
  • 「yarn = npm install。npm installをより高速に、そしてコンパクトにしたもの」と思えばOKらしい。(サイト)
• Sass使うためにはsass-loaderのInstallが必要だった。どこかで見落としがあった？？開発環境の違いだろうか？？(サイト)

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

進捗

基礎から学ぶ Vue.js

• 進捗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

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

所感

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

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

進捗

基礎から学ぶ Vue.js

• 進捗88%(289/331)[前回+11%]
  • 来週終わりそう。次何しようか。。。

所感

• polyfill？？
  • モダンブラウザで普通に出来て、レガシーブラウザで出来ない機能を、既存の技術で（あるいはそれらの組み合わせで）同等のものを提供する、という手法。(サイト)
• Vuexのコアコンセプトは本を読んでもよく分からない
  • サイトのほうが分かりやすかった。
• マッピングヘルパーはコード行数減るかもしれないけど読みづらい。冗長でもちゃんと書いて欲しい派。
• 複数モジュールを一つのStoreで管理し且つ同一のmutationsやactionsが存在する場合、1度のコミットで両方共呼ばれる。意識して実装しないと嵌りそう。
  • 同期取らないようにするためにnamespacedオプションがあるのか…。名前被らないようにするのは辛いし納得。
• VueRouterのSectionに入った。RoutingをVueでやるようだが、Webサーバ側のRoutingとの棲み分けがまだはっきりしていない…。

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

進捗

基礎から学ぶ Vue.js

• 進捗77%(254/331)[前回+12%]
  • 祝日の影響で1日朝活できず。
  • あと2週間くらいで終わりそう。

所感

• 大規模開発のSectionに入った。SFCの説明があり大規模感が出てきてワクワクする。
  • Node.js、npm、Babel、Vue CLIなど怒涛の説明。聞いたことあるだけだったが、どういう目的で利用するか学べた。
• Section39の内容全然わからん。どこにどのjsを置くべきなのか…。
• Section40はES2015の記載方法がズラズラと書いてある。纏まっていて良いがJS素人には量が多い…