s平面の左側

左側なので安定してます

【資料あり】「Laravel/Vue.js 勉強会 #1」で登壇してきた

connpass.com

会社のつながりで「Laravel/Vue.js 勉強会を開催するので誰か登壇しませんか?」という話が挙がったので真っ先に手を挙げて挑戦してみた。

テーマは「Laravel Mix とは何なのか?」。

Vue.js に興味を持ったきっかけが「Laravel が公式採用した」という話だったが、そういえばその実体をよく把握していなかったなあ、と思ったのがこのテーマを選んだ理由である。

振り返り

発表者4名中、私以外の他3名がサービスでの採用事例だったのに対して、私は知識というか概念の説明だった。 かなり初歩的な内容だったのも併せて、聞いていた人に価値が提供できたのかは少し自信がない。

また、最後のデモで失敗しグダグダになってしまったのは大きな失敗だった。

事前の練習もしており、万が一のときのコピペ用ソースコードも準備していたのだが、ディスプレイを拡張モードにしていたことによる「画面を見ながらコーディングできない」ことが仇となって「ビルドに失敗する」「修正も満足にできない」という非常に後味の悪い終わり方をしてしまった。

次回このような機会があって、デモ(というよりライブコーディング?)を行う際には、

  • ディスプレイはミラーリングにする
  • 失敗したとき用に、成功時の画面イメージをスライドに入れておく(失敗しても結果を伝えられる)
  • 「成功したら、拍手をお願いします!」のような失敗する可能性をほのめかしておく(失敗しても微妙な空気にさせない)

といった布石を打っておくようにしたい。(当然、失敗しないための事前の入念な準備が何より大切なわけだが)

それから、発表時にストップウォッチを起動することを忘れてしまい、ペース配分が感覚に頼ることになってしまったのも反省。

デモ失敗した際に「時間押してますよね?」と確認していたが、実際には発表終わったのはほぼ予定通りの時刻だった(ただし私の発表がきっちり10分だったかはわからない)。

所感

発表を聞いていていろいろ知らない単語が出てきたり、LT 枠に Qiita の記事をめちゃくちゃ参考にさせてもらている nunulk さんが登場したり、懇親会でフロント界隈の情報をいろいろ聞くことができたりと、意義のある勉強会だった。

nunulk さんに話しかけようと思ったが、残念ながら懇親会にいらっしゃらなかったのは心残り。

自身の発表はいろいろと問題があって反省点の多く残る内容であったが、今後も継続的に発信を続けていって精度を上げていく所存。

コーディングするとき・プルリクにコメントするときの観点

2年目、3年目と時が経つにつれて、他人が書いたコード見てコメントをする機会は増えていく。

このときに(主にコーディングに関する)自分の考え方を言語化して他人に伝える、というのはとても骨が折れる作業だ。

そこで、これまでに他人にしてきたコメントを思い返しつつ「普段どんなことを考えながらコーディングしているか」「プルリクを見るときにどんなところを見ているか」という観点を整理してみた。

もちろんただ文字に起こしただけでは伝わらない。 何度も繰り返し改善案のコードとセットにして伝える、という積み重ねの先に観点・感覚が身につくはずだと信じている。

※この記事では主に「バグが発生しにくいこと」「バグが発生しても原因を特定しやすいこと」を目的としている。

※具体的なコード例を載せると長くなるので割愛。文字での説明のみ。わかりにくいのは承知の上。

目次

名付けについて

  • 理解までの時間が最短か
  • 実態を表しているか
  • 誤解を生まないか

正直これについては、感覚的な部分や語彙力(英語)に依存する部分であるので、コメントしたからと言って一朝一夕で身につくものではない。

習慣として他人が書いた「筋の良い」コードを読むのが力を身につけるための王道だろうか。

引数について

  • 引数によって過剰に挙動を制御していないか
  • メソッド名から引数を予想できるか(最も自然な引数になっているか、驚き最小の法則)

前者については別のメソッドやクラスに切り分けよう。

戻り値について

  • 失敗を表すのに null や false を使っていないか
  • 空の結果を返すのに null や false を使ってないか
  • 戻り値に型が混在していないか

1 つめについては例外を使いましょう、というお話。 null や false では「その時点」ではプログラムが動き続けてしまう。 もし戻り値チェックが行われなかったらおかしなデータのまま後段の処理に進んでしまい予期せぬ挙動を引き起こす原因になる。

2 つめについては空配列や空文字列を使いましょう、というお話。 ただし数値の場合は議論の余地があり、場合によって null を使うのもやむなし、ということもある(0 や負値をとり得る数値の場合)。

データとその型には意味があって、意味に沿ったプログラミングをすれば記述は自然なものになる。 null や false を返していたら都度戻り値チェックをしなければいけないが、空配列を返しているなら、配列が来ることを想定している後段の処理にそのまま渡して問題ない(場合が多い)。

余分な処理が増えれば当然コーディングの量が増えて生産性は下がるし、バグが入り込む余地も増える。

3 つめは「処理の結果によって数値が返ってきたり、配列が返ってきたりする」みたいなことになっていないか、というお話。 実は2つめの内容を内包している。

期待される型が 1 つだけなら、後段の処理も1種類の型を想定すれば済む。

オブジェクト指向プログラミングなら継承の仕組みもうまく使いたいところ。

例外について

  • 例外を握りつぶしていないか
  • 失敗等のときにすぐに例外を投げているか

パフォーマンス面を気にするのであれば、また事情は変わってくるが。

責任範囲について

  • 1 メソッドが大きすぎないか
  • 複数箇所のデータにアクセスしていないか
  • 一言で表すことができる名前をつけられるか

名付けに悩んで良い答えが出ないときは、往々にして設計を見直したほうが良いという場合がある。

既存のプログラムについて

  • すでに「それ」を実現できる組み込みまたは公開されている関数・クラスはないか(車輪の再発明
  • 低レイヤーの処理をよしなに wrap してくれているものはないか
  • 既存のものを使うとき、「イケてない」仕様を wrap してあげられないか

2 つめの例を挙げるなら PHP における curl に対する Guzzle のようなもの。

その他

  • 余分な処理をしていないか
  • ネストを少なくできないか
  • クラスやメソッドの階層・粒度が一致しているか
  • 処理が何かの文脈に依存していないか

3 つめの話は設計の領域に入ってくるので、少し抽象度が高く伝わりにくいかも。

4 つめは「暗黙の前提条件を満たさないと正しく動かない」ということがないか、というお話。

「メソッド B は先にメソッド A を呼び出してから使わなければいけない」とか。 この場合、メソッド A の戻り値となるクラスの方にメソッド B を生やすなどして、間違って使われる余地が少なくなるような設計にすると良い。

その他、感覚レベルの話(オカルト含む)

  • コードの文字の密度が高すぎないか

→ 集中力が分散し、「見落とし」が起こりやすくなる。

  • コードに対称性はあるか

→ 対称性があると「異物」を見つけやすい。前節で説明した「階層」「粒度」が揃っているかが分かりやすい。

  • ざっと見渡したときに「違和感」がないか

→ ここまでに説明した内容が守られていると、コードは「美しい」

余談

ここまでまとめてきた内容は、概ね次の3つの資料でカバーされていると思う。

勉強会「Rails 5.1 + Webpacker + Vue.js 入門」にいってきた

イベント概要

connpass.com

普段触っているのは Rails ではないものの webpack + Vue.js の事例が知りたかったのと、「お話する内容」の

主に jQuery ベースのコードを Vue.js を用いて書き換えたい人向けにお話します。

に惹かれて参加。

所感

具体的なソースコードがあるのがとても良い。

github.com

ver0 というタグが jQuery ベースの状態で、そこから jQuery を抜いていく。

しかしそれを事前情報で知れなかったのと、会場で wifi が利用できなかったので、その場で手を動かしながらついていくのは断念。事前に情報として知らせてほしかった。

Rails や yarn が動く環境が必要だった)

内容としては感覚的に 6 割 Rails 固有の話、残りが Vue.js の話という感じで得たいと思った情報はそれほど得られなかった。(ある程度覚悟の上だったので、不満はない)

逆に言えば webpacker(Rails 用に webpack を使うための gem)の設定など、Rails に特化させて必要な手間をできるだけ省こうとするのは Rails の思想らしいといえばらしいと思った。

得た情報

  • webpack ではエントリーとなる js ファイルが重要
  • vue.esm の esm は ES modules の略(ES で書く際にはこちらを使う)
  • webpack-dev-server: 自動ビルド・シンタックスエラーを検出してくれる
  • Turbolinks: Rails のページ表示高速化のための何か(Vue.js とは相性が悪いということで今回は外す手順を踏んでいた)
  • vue-data-scooper: form に予め入っている値で Vue.js の data プロパティを初期化してくれるパッケージ(今回の勉強会主催者である黒田さんが作ったもの。yarn で入れられる)
  • Vue.js の v-cloak ディレクティブを使うと Vue インスタンスコンパイルが完了するまで画面に表示しない、とかができる
  • web アプリケーションフレームワークが提供するレンダリングエンジンと、 Vue.js のレンダリングをどう使い分ける?→インタラクティブなことをやるところは Vue.js のものを使って、残りは web アプリケーションフレームワークが提供するレンダリングでいいのでは(すべてを Vue.js に置き換えるのはけっこうたいへん)

余談

上記ソースコードsfc ブランチはレンダリングをすべて Vue.js で行おうとしているバージョンになっている。

バリデーションとかが大変そう。