s平面の左側

左側なので安定してます

勉強会「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 で行おうとしているバージョンになっている。

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

【資料あり】Vue.js 入門の勉強会の講師をやってみた

少し前になるが、Vue.js に関する勉強会の講師というものをやってみた。

そのときに使用した資料がこちら。

github.com

私自身フロント側のプログラムなんて全然触ってきていないし、Vue.js についても個人的に数日触っただけだが、 触ってみたときにはかなりの感動があったし、私と同じレベル感で Vue.js(あるいはJSフレームワーク)に興味はあるけど触る機会を得られていない人も結構いるのではないかと思ってこのテーマを選んだ。

心がけたこと

準備をするにあたって以下の3点を意識した。

  • 実際に手を動かしてもらう内容にすること
  • どの環境でもすぐに動かせること
  • 参加者の期待値を調整しておくこと

実際に手を動かしてもらう内容にすること

普段勉強会に参加していて思うのは、話を聞くだけでは「わかった気になる」だけで何も身にもつかないよなぁ、ということ。

もちろん優秀な人というのは得た知識について、早速手を動かして試して自分のものにしていく。

だけど、就活・研究・業務が忙しいとかの事情もあるだろうし、ついつい後回しにしてそのまま……ということになってしまうこともあるだろう。

私自身面倒くさがりなのでTODOリストの「あとでやる」に残り続けることも珍しくないのでその気持ちはよく分かる。

せっかく参加してくれたのだから是非「体験する」までやって欲しい、ということでその場で手を動かすハンズオン形式にしようと思った。

どの環境でもすぐに動かせること

ハンズオン形式にしたときに問題となるのが環境差異や準備のこと。

勉強会自体30〜40分と短めの時間で、かつ参加者もどれくらいの人数になるかは未知数だったので、 環境構築に手間取る人が出て時間が取られることは極力避けたかった。

Vue.js については他のJSフレームワーク同様 npm からインストールして云々という構築方法もあるが、jQuery や Bootstrap のように CDN から読み込んで使うという方法も提供されている。 (このお手軽さが Vue.js の魅力のひとつだと思っているし、実はこういう背景があったから題材に Vue.js を選んだという部分もある)

これならネット環境とインターネットブラウザとテキストエディタさえあれば、(おそらく)あとはどんな環境でも動く。

実際に当日はこのような問題で進行が止まることはなかった。

参加者の期待値を調整しておくこと

次に避けたかった問題は、すでに入門レベルは終えている人が来て「それ知ってるよ」な内容になってしまうことだった。

こうなってしまっては、講師にとっては何も価値を生み出せない、参加者にとっては時間の無駄、さらに一連の勉強会に「レベルが低い」というレッテルを貼られてしまっては講師を努めている他の方にとってもマイナスになってしまい誰も幸せにならない。

これへの対策は、単純に勉強会の募集内容に「勉強会のゴール」と「対象と『しない』内容」を明記したこと。

supporterzcolab.com

【勉強会のゴール】
* Vue.js を使って動くページを作ってみる
* なんだか JS フレームワーク良さそうと思える

【対象と「しない」内容】
* 昨今のフロントエンド界隈のお話
* デザインやUI/UXについて
* Vue.js の活用事例

※実は勉強会ページにはしっかり「UI/UX」のタグが付けられてしまっていたりする(笑)

その結果については肌感でしか語れないが、参加者の9割近くは想定したレベルの人が集まっていたのではないかと思う。

もちろん、もう少しレベルの高い内容を希望する声や、逆についていくことができなかったという声も頂いたので、募集の文言については改善の余地はあるだろう。

前者については具体的な成果物を見せて「このレベルの内容をやります」と明記することなどが考えられる。

後者については「前提となる知識」といった項目を追加することが考えられる。

やってみて思ったこと

最終的に30名弱の方に参加していただいた。

懇親会でも参加者の側から話しかけてくださり、普段の懇親会では人に話しかけるのに緊張しまくる私にとっては非常に有難かった。

冒頭でも述べた通り、私自身普段は Vue.js はおろか普通に JavaScript さえなかなか触らないレベルの人間だが、 「実力・知識がないから、講師なんてやれない」というより、「実力・知識がないからこそ、講師をやっていったほうがいい」と思った。

レベルについては前述の期待値調整次第だと思うし、月並みな物言いにはなるが、人に向けてアウトプットすることで自分の知識を体系立てて整理できるので学習の過程において大きな効果があると思う。

さらには同じレベル(であろう)人たちとのつながりができたり、同じようなことで悩んでいる人がいることが知れて元気づけられたりと、人の面でも非常に意義があるものになったと思う。

また機会があれば積極的にやっていきたい。

はてなブログを始めたときにやったこと

背景

以前にブログだけ作ってしばらく放置していたが、友人との会話の中で「資産としてブログを書いていくことは大切だなー」と思ったので今日からはじめる。

やったこと

最初の一歩として、このブログをはじめるにあたりやったことをまとめる。

名前を決める

まず「okashoiの日記」というデフォルト名前を今の「s平面の左側」という名前に変えた。

名前を決める際には、いくつかの友人のアドバイスがあって

  • 覚えやすい(インパクトのある)
  • しっくりする略語にできる
  • ユニーク(他には無い)

というところから考えて、高専時代の専攻である制御工学のネタから名前をつけた。

  • 「s平面」って言葉はまず聞かないのでインパクトありそう(+ネタが分かる人にはニヤリとできる?)
  • 略語はあまり考えてない
  • 多分ユニーク

でも、制御工学系の記事は書かないので悪しからず。

基本設定

  • ブログアイコン
  • about ページ
  • 編集モード

を設定。

ブログアイコンはいったんプロフィールと同じにした(favicon などに反映される)。

編集モードは Markdownモード。

詳細設定

  • 解析ツール

はてな側でデフォルトでアクセス解析ツールを提供していて素敵だと思ったが「取れるものは取っておこう」の方針で Google AnalyticsGoogle Search Console を設定。

設定するには Google Analytics 側でプロパティを追加してトラッキングIDを取得する必要がある。

Search Console は埋め込みタグの content の中身をコピペ。

この2つの連動なども行ったが、本題から外れるので割愛。

meta description と meta keywords は少し続けてブログの方向性が固まってきてから決める。

アイキャッチ画像はすぐにいい画像が見当たらなかったので保留。

最初の記事を投稿

つまりこの記事のこと。

今後の展望

頑張って1ヶ月3記事を半年くらいは続けたい。

最近 Qiita にもちょくちょく投稿しているが、使い分けはこれから模索していく。