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

進捗

基礎から学ぶ Vue.js

f:id:fatherofikura0107:20180810080001j:plain

  • 進捗30%(98/331)[前回+12%]
    • 読了まであと2ヶ月くらいかかりそう。

所感

  • Mustache記法をつかって属性にbindできないので、v-bindディレクティブを使う。
    • 省略記法だと「:」だけになる。使用頻度高いからここまでの省略が許されているのだろう。
  • JavaScriptのthisが何を指しているかを理解するのが難しい。JSの基本が分かっていないからであろう。
    • アロー関数:無名関数の省略記法。(サイト)
  • 複数属性をまとめてバインドできることを知った。特定の要素だけの変更もできると…。なるほどこれは便利。
  • Webではベクタ画像はSVGを利用するのか。EPSではないんだなぁ。
  • v-ifディレクティブとv-showディレクティブは同じように見えても描画結果が異なることを学んだ。
    • v-ifはDOMレベルで削除していて、v-showはdisplayをnoneにしている。どちらが適切かは構造を踏まえて考えないといけないのか。
  • templateタグという存在自体を知らなかった。この本はHTML素人にはハードルが高い。
    • templateタグ:ブラウザ上では表示されず、Scriptによって操作するためのタグ。HTML5で導入された。(サイト)
  • v-forディレクティブはJavaScriptの「for in」文と似ているが実際には「for of」文に近いとあったが、どちらも知らない…。
    • for in:オブジェクトのプロパティ名についての繰り返し
    • for of:オブジェクトのプロパティの値についての繰り返し
      • 違いがあることは分かった。for ofはECMAScript6から導入されているとのこと。(サイト)
  • 効率的な描画のためにデータに対して不変でユニークになるようkey属性を設定すべきとのこと。なるほど。
  • JavaScriptのreduce関数を初めて知った。ぱっとみて何やってるかよく分からなかった。(サイト)
    • reduceがcoolかは今の自分では理解が追いつかない。
  • axiosを使うと書いてあったがaxiosって何??という感じ。
    • axios:ブラウザや node.js で動く Promise ベースのHTTPクライアントである。REST-API を実行したいときなど、これを使うと実装が簡単にできるらしい。(サイト)
    • いざ使って見ようと思った時、初期設定ではChrome上でAjaxを使ってローカルファイルにアクセスできなかった。
  • Vue.jsのテンプレートの仕様上、JavaScriptを実行できるためユーザから送られたデータをそのまま使用するときは注意が必要とのこと。確かに。これは肝に命じておく必要があると感じた。
  • CSSにて「#app[hoge]」のように書いたときの、「[]」が何か分からない…
    • 特定の属性を持つ要素に適用したい場合に使うとのこと。なるほど!確かにこれは必要だ。

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

進捗

基礎から学ぶ Vue.js

f:id:fatherofikura0107:20180810080001j:plain

  • 進捗18%(59/331)[前回+8%]
    • 盆明けが木曜だったので2日しか実施できなかったが1日あたり少し多めに時間を割いた

所感

  • Vue.jsの様々なディレクティブを学んだ。これでもまだ一部。
    • v-for:dataオプションから要素を繰り返して取得するときに使用する。
    • v-on:DOMイベント(例:クリックしたとき)を受け取るときに使用する。
    • v-model:データとフォームの入力項目を双方向バインドするために使用する。
    • v-if:テンプレートベースで条件分岐するために使用する。
  • カスタムタグなんてものもあるのか…。使い慣れてないと覚えられないだろうなぁ。
  • Vueインスタンスの構成を学んだ。
    • マウントする要素、データ、メソッドのオプションは必要なのは至極当然として理解できる。
    • ライフサイクルフックのオプションは細かく用意されているがどのようなケースで使うのだろうか…。今の段階ではピンときていない。
  • dataオプションの直下のプロパティは後から追加できないとのこと。リアクティブデータを作るタイミングはNewした時だけなのかな。
    • 内容が決まっていなくても、初期値や空データをセットしておく必要があり、後から代入するデータと同じ型で定義しておくと良いとのこと。
  • それまで意味不明だったがChaper2あたりから詳しい説明になった。
  • 中括弧({{}})で記述する方法をマスタッシュ(Mustache)と呼ぶらしい。Laravelもマスタッシュ記法だったのでよく使われる書き方なのだろう。

PHPフレームワーク Laravel入門 8週目(実施日33日)+基礎から学ぶ Vue.js 1週目(実施日2日)

進捗

PHPフレームワーク Laravel入門

f:id:fatherofikura0107:20180622075001j:plain

  • 進捗100%(355/355)[前回比+12%]
    • 完了するまで33日かかった。朝活でこなせるのは1日10ページくらい。

基礎から学ぶ Vue.js

f:id:fatherofikura0107:20180810080001j:plain

  • 進捗10%(34/331)[前回比--%]
    • Vue.jsを次の朝活テーマにする。
    • イントロや索引もあるが、おそらく8週間くらいかかるであろう。

所感

  • Session情報のDB化もコマンドを少し書けば実装できる。独自で実装したら大変だろう…
  • Laravelのペジネーション(Pagination)機能凄すぎ…。
    • ControllerとViewに1行足すだけのレベル。こんな簡単に書けていいのだろうか。
    • simplePaginate、paginateと切り替えも簡単。linkもテンプレートでカスタマイズできる。ゴリゴリ実装するのが馬鹿らしく感じる。
  • Laravelの認証(Auth)機能触ってみた。
    • ユーザ情報に更に情報(ロールとか)を追加したい場合はどうするだろうか…
      • サイトにロールの追加方法が書いてあった。Userテーブル拡張するのか…なるほど。
  • Laravelではユニットテスト用にPHPUnitが組み込まれているとのこと。
  • Vue.jsの基礎を学び中。
    • Vue.jsで意識すべきは画面の描画はJavaScriptデータからデータに適したDOMを構築しているとのこと。
      • ふむふむ。。。DOM構築の前にゴニョゴニョしているのか。。。
    • 「v-」から始まる属性はディレクティブと呼ばれ、データバインディングを行うために使用する。横文字多すぎ…。
      • ディレクティブ:DOM 要素に対して何かを実行することをライブラリに伝達する、マークアップ中の特別なトークンのこと。
    • Vue.jsにはコンポーネント機能があるとのこと。なにそれ??
      • コンポーネント機能:機能ごとにJavaScriptとテンプレートを1セットにし、他の機能と分離して開発できる仕組みのこと。
        • JS、HTML、CSSをセットにでき、コードの共有もできる。
      • 規模が大きいサイトを作ったことがないが、↑の恩恵は確かにあるだろうと感じた。

PHPフレームワーク Laravel入門 7週目(実施日31日)

進捗

PHPフレームワーク Laravel入門

f:id:fatherofikura0107:20180622075001j:plain

  • 進捗88%(311/355)[前回比+11%]
    • 私用のため1日間朝活できず。他の日でカバーしてどうにか進捗率は10%超えた。

所感

  • テーブルが複数パターン存在する場合のリレーションについて学んだ。
    • hasOne/hadMany/belongsTo結合は主テーブル/従テーブル側にhasOne/hadMany/belongsToと書くだけで実装可能。
    • リレーション用に用意したメソッド(例:boardメソッド)であれば$item->board()となるが、リレーション設定していれば$item->boardのようにプロパティとして扱えるとのこと。
      • Laravel全体に言えるけどコードを書く量は圧倒的に減るが、抽象化が激しいのはデメリットもありそう…。
  • withによるEagerローディング??何それ??
    • サイトによるとIn句を使ってWhereで一纏めにして取り出すことらしい。なるほど、確かにN+1問題は解決する。
  • コントローラ作成時に「--resource」オプションをつけるとCRUD機能一式を扱えるようになるとのこと。()
    • LaravelではResourceful(リソースフル)なコントローラと呼ぶとのこと。
    • routeへの登録も「Route::resources」で7つのアクションが全部登録できる。楽チン過ぎてびっくり。
    • RESTfulサービスもResourcefulを実装することで実現できる。Resourceful実装⊇RESTfulサービスの関係。
  • Laravelのアクションメソッドで配列をreturnすると自動的にJSON形式になるとのこと。今の御時世JSON形式前提なんでしょうね~。
  • LaravelのSession管理はデフォルトではファイルベースとのこと。実装も簡単。

PHPフレームワーク Laravel入門 6週目(実施日27日)

進捗

PHPフレームワーク Laravel入門

f:id:fatherofikura0107:20180622075001j:plain

  • 進捗率77%(274/355)[前回比+7%]
    • 息子を保育園へ送っていく任務のため2日間朝活できず、進捗低め。

所感

  • Eloquentでモデル名の複数形のテーブルを自動で見るのはなぜか…という先週の疑問を解決してくれるサイトがあった。
    • そりゃベタベタな照合表を使わないとPersonがPeopleにはならないよね。納得。
    • 英語に疎いとORM活用できないとも感じた。(ちゃんとモデルとテーブルを紐付ければいいんだけど…)
  • Eloquentにてモデルのスコープという考えがあるとのこと。
    • グローバルとローカルという考えもあり、モデル自体に制限を加えることができる。この機能の活用方法/ありがたみがイマイチ良くわからない。
  • fillを使うことで一つ一つの値をインスタンスに設定する必要がなくなる。
    • ただテーブルに存在しないフィールドがいる場合は事前にunsetで削除する必要がある。
    • Laravel使うとコードはすごくシンプルになるが何か問題あった時のリカバリーが大変そう。

PHPフレームワーク Laravel入門 5週目(実施日24日)

進捗

PHPフレームワーク Laravel入門

f:id:fatherofikura0107:20180622075001j:plain

  • 進捗率70%(248/355)[前回比12%]
    • 進捗ペースは先週比とほぼ同じ。あと2週間では厳しそう。お盆休み超えちゃうかも。
    • そろそろ次の勉強ネタを考え始めないといけないなぁ。

所感

  • 本に「PHPでプログラムしているのにDB部分だけ別言語で書くのはストレスだ。」とあった。なるほど、そういう経緯でクエリビルダがあるんだ。
    • ↑のようなことを今まで感じたことがなかったのでそういう考え方もあるなぁ…とちょっと感心した。
  • クエリビルダはメッソドチェーンを使ってDB操作をしている。メソッドチェーン自体親しみがないので何だか新鮮に感じた。
    • メソッドチェーンは関数型言語になるのか…。そりゃ馴染みが無いわけですわ。
  • マイグレーションという言葉は知っていたがぼんやりとした認識だった。DBのバージョン管理機能と覚えるとよいとのこと。
    • Blueprintって何だよ。って思って調べたら設計図という意味なんだ…。英語力不足を痛感。
  • シーディングはDefaultのレコードを用意しておく機能のこと。テーブルの枠だけ作っても意味がないのでこの機能がないと不便でならない。
    • シード : Defaultで用意しておくレコードのこと。
    • シーダー : シードを作成するためのスクリプト
  • LaravelではEloquentというORMを使っているとのこと。
    • Laravelでは「テーブル名は複数形、モデルは単数形」とのこと。
    • PersonモデルがPeopleテーブルにどうやって紐付いているのかまったく謎。Eloquentさん頭良すぎでしょ…。
    • Eloquentで取得したデータはCollectionクラスに格納される。
      • 配列をラッパーしたクラスだと思えば良いらしい。サイト

PHPフレームワーク Laravel入門 4週目(実施日19日)

進捗

PHPフレームワーク Laravel入門

f:id:fatherofikura0107:20180622075001j:plain

  • 進捗率58%(205/355)[前回比:+15%]
    • 進捗ペースは先週比とほぼ同じ。あと3週間かかる見込み。

所感

  • ValidatorはFormだけではなく何にでも使えることを知った。ルールも場合によって追加もできる。やりおるなぁ。
  • Validator::Extendメソッドを呼ぶと「Call to undefined function」が出る問題にはまった。記載通りやるとハマる。
    • サイトを見てValidatorsのUse宣言を変更するとエラーがでなくなった
    • 「use Illuminate\Support\Facades\Validator」と「use Illuminate\Validation\Validator」は何が違うのか…
      • Validator::となっているのでValidatorファサードだと気づけないといけなかったのだろう。
  • DBの章に入った。この本でもSQLiteを使うらしい。Macは標準搭載なのは知らなかった。
    • DBファサード使うだけでも簡単にDBからデータ取ってこれる。便利だ。
    • DBの章をやることでtemplate、controller、route設定の関連がより把握できた。
      • こんな簡単に更新や追加のページ作れるは…。これがWebFrameworkの力か…。