特集 2019年7月1日

Vue.jsでアホなジェネレーターを作る勉強会をやると予想以上にガチになる

デイリーポータルZが「Vue.js勉強会」というWeb開発系のイベントを開催した。サイトを知っている人なら「え?あのデイリーが?なんでそんな真面目なイベントを?」と驚くかもしれない。

急に真面目なことをやりだすと、ヤンキー母校に帰る的な心変わりでもあったのかと心配になる。

僕自身がWeb開発の仕事をしているため「ふざけたサイトがやる勉強会なんて…」と最初は不安に思っていた。しかし、蓋を開けてみればエンジニア業務を擬似体験できるくらい内容のしっかりした勉強会だった。

大学中退→ニート→ママチャリ日本一周→webプログラマという経歴で、趣味でブログをやっていたら「おもしろ記事大賞」で賞をいただき、デイリーポータルZで記事を書かせてもらえるようになりました。嫌いな食べ物はプラスチック。(動画インタビュー

前の記事:ドラクエに出てくる「やくそう」は現実だとどう使うのか専門家に聞く

> 個人サイト ジャーニーとモアイとめがね

「お前のものは俺のもの」的な勉強会

d38ab183037fb103d56fccbba9e92ff4.jpg
なくなったサイトで見る場所へ行く」はWebサイトを長年つづけてきたからこそできる名作記事

デイリーポータルZは「してみよう!拾い食い」や「ペリーがパワポで提案書を持ってきたら」といったような記事を毎日3本ずつ更新しているサイトだ。真剣にふざけながらちょっとした狂気を交えつつ運営されている。

ベテランライター陣は10年以上もこういった記事を書き続けているのだがら狂気の沙汰ではない。賽の河原で石を積み続けていたら、いつしか鬼に認められて飲み友達になるような所業である。

4b0ff68eb8179f29ea59ebb89acc294f.gif
今回の勉強会では文章が自動で生成されいていくジェネレーターを作成していく

今回、勉強会を開いたのは「これからは真面目なサイトとしてがんばります!」というような意味合いでは決してない。

理由は簡単で「動かなくなったプログラムをみんなに作ってもらおう」ということことなのだ。

技術イベント:Vue.jsで実装する「風邪で休みますメール ジェネレータ」ハンズオンを開催します」より引用

> 話は去年にさかのぼりまして、2018年の10月、デイリーポータルZはシステム移行を行いました。
大半のページは無事移行されたのですが、唯一見捨てられたのが、ジェネレータ。

> 再実装にあたり、独学でやると大変なので講師をお迎えすることになりました。さらにせっかく教わるのであれば、独り占めしないでみんなで一緒に教わろうということに。みんなで実装すればジェネレーターがたくさん作れる!というメリットもあります。

> 参加者はモダンな技術が勉強でき、我々としてはコンテンツが増える、というWin-Winすぎるイベント、それが今回のVue.js勉強会です。

「おい、のび太!お前がつくったプログラムは俺のものだからな!!ただしそれを作る技術は俺様が懇切丁寧に教えてやるから!覚悟しろよ!!」という映画版ジャイアンみたいな優しさ&剛力。これにはのび太くんもニンマリ。

IMG_4757.jpg
デイリーポータルZ編集長の林さんも勉強会の挨拶で「我々にこんな都合の良い勉強会はありません」と高らかに宣言していた
IMG_4761.jpg
ちなみに定員である20名の予約はすぐに埋まってしまったらしい

今回の参加者の中にはデイリーポータルZを元々知っている人ももちろんいるが、中には「おもしろいものを作れる勉強会だから来たくなった」という人もいた。

勉強会でアホみたいなものを作るというのは、Web開発への敷居が下がっていいのかもしれない。

※ デイリーポータルZのジェネレーターをここからは敬意を込めて「アホみたいなジェネレーター」と呼びます。敬意を込めて、あくまで敬意を込めて。

スクリーンショット_2019_06_18_11_27.jpg
「作ったジェネレーターは社会的に意味がある」と豪語する編集長

アホみたいなジェネレーターなのだが「読書感想文ジェネレーター」は8月31日にアクセス数が爆上がりするらしい。

「夏休み 読書感想文 自動」などと調べてこのジェネレーターに辿りつき、「なんだこれ!全然使えねーじゃん!」とガッカリする学生が大量にいると考えるとちょっとおもしろい。

そういった学生に「世の中にそんな簡単にできるものはない。自分でやることが大切なのだ」と教えを得られるのであれば、確かにジェネレーターも社会的に意味があるのかもしれない。(こじつけ)

IMG_4785_JPG.jpg
勉強会の講師を担当してくれた花谷 拓磨さん

このイベントが結果として満足度が高いものになったのには理由がある。

「アホみたいなジェネレーターを作る」という勉強会にも関わらず、しっかりとした実力のある講師を呼んだからだ。

花谷拓磨 (@potato4d)
ElevenBack 代表、LINE株式会社エンジニア


「pixiv」を運営するピクシブ株式会社のエンジニアを経て、フリーランスのエンジニアに。Qiita をはじめとする Web サービス開発からソーシャルゲームに関わる開発まで、幅広いプロジェクトに携わった後に LINE 株式会社に転職。

現在は ElevenBack の代表と並行しつつ、フロントエンドエンジニアとして業務に従事。 

コミュニティ活動として、 FRONTEND CONFERENCE 2017 実行委員長、Vue.js 公式ドキュメントや React.js 公式ドキュメントのメンテナンスなども行なっている。 著書に「Nuxt.jsビギナーズガイド(出版: C&R研究所)」がある。

ものすごくガチな人がきたのだ。一線で活躍するエンジニアがアホなもの作る技術を教えにきてくれた。猫カフェにライオンがいるようなものである。

今回の勉強会には完全にオーバースペックな人なのである。猫に小判、豚に真珠、ゴーカートにシューマッハ。

しかし、だからこそおもしろいのだ。アホみたいなジェネレーターを作るのに花谷さんほどの実力者を呼ぶアンバランスさが興味を生むのだ。技術の無駄遣いは最高のエンタメだ。

名称未設定 1 copy.jpg
今回は勉強会に来ていたあつしさんと最寄りさんに話しを聞きながら、イベントの様子をお送りしていきます

この記事を書いている僕はWebエンジニアをやっていてVue.jsを使っているため、「勉強会によってどのくらい技術が身についたのか」というのが記事で伝えにくい。

なので、今回は参加者がジェネレーターを完成させるまでを追いながら勉強会の様子を見ていこうと思う。(ちなみに二人ともWeb開発に関しては今年から勉強し始めたばかり)

【あつしさんのプロフィール】

・20代半ば
・JavaScriptは勉強し初めてからまだ二週間も経っていない
・C#で業務系のエンジニアをやっていたが、Web系に興味を持ち始めたので勉強会に参加
・キリンくらい優しい目をしている。
・やる気に満ちているのを会場で一番感じたので密着させてもらうことにした
【最寄りさんのプロフィール】

・今年の2月に沖縄から引っ越してきてWeb企業に就職
・Web業界に入る動機は「自分のサイトを自分で作りたかったから」
・仕事につく前まではHtmlも知らなかった
・見てわかるようにゴスロリ
・誰がどうてみてもゴスロリ
IMG_4822.jpg
最寄りさんは会社に行くときもゴスロリ(正確にはロリータらしい)ファッションで行っていると聞いて驚いた。「社長がOKしているんですか?」と聞いたら隣に座っている人が社長でまた驚いた。隙を生じぬ二段構えのドッキリ。
いったん広告です

まずはみんなで風邪ひきジェネレーターを作る 

この勉強会は講師の授業を聞きながらプログラムを実際に書いていく「ハンズオン」という形式だ。ものづくりのワークショップのようなものである。

話しを聞いているだけじゃなく実践しながら講義が進んでいくため、技術として身につきやすい。

fdaosijfdlkas.jpg
「風邪でお休みメールジェネレーター」を授業を聞きながら作っていく

この勉強会は2部制になっている。前半は説明を受けながら同じ課題をみんなでやり、後半はそれぞれバラバラにジェネレーターを開発していく。

講義と実践がうまく分かれている良い勉強会だ。「勉強会するから、代わりにみんなでサイトのプログラム作ってくれ〜」というのはめちゃくちゃな発想だと思っていたのだが、勉強会としては正解だったようだ。

※ 講義で使った花谷さんの「風邪でお休みメールジェネレーター」のソースコードはGithubにあがっています→ kaze-mail-generator 

IMG_4809.jpg
勉強会がスタートするとガラッと空気が変わった

「デイリーポータルZがやる勉強会だからポムポムプリンみたいなゆるふわな勉強会なのかな?」と思っていたのだが、蓋を開けてみればまったく違った。参加者はスティーブン・セガールくらい沈黙して集中していた。

IMG_4842.jpg
本業のエンジニアが説明を始めるとやはり空気が締まる

全員が真剣に取り組んでいはいるが、題材はあくまで風邪でお休みメールジェネレーターだ。なので「ここに休む理由を入れていってください」というような説明が続く。

今になって勉強会の雰囲気を思い返してみると、真剣な空気感の中でふざけたワードが飛び交っていたのでアンバランスすぎて笑ってしまう。

しかし、当日は参加者は全員が集中して作業していたので笑うような雰囲気ではまったくなかったのだ。

IMG_4828.jpg
風邪でお休みジェネレーターは編集長である林さんがperlというプログラミング言語を使って10年くらい前に作ったものだ

説明を聞きながら林さんは妙に照れ笑いのような表情を浮かべていた。

林「自分が適当に作ったものをみんなの前で説明されて、みんながそれをパソコンに打っているというのは恥ずかしい」

ああ、なるほど。たしかに数年前に書いたブログとかツイートをみんなの前で読まれると考えたら公開処刑もいいところだ。考えただけで顔が熱くなる。

Webって公開するのは簡単だけど、未来の自分へ時限爆弾を作っている側面もあるから恐ろしい。

林さんくらい何十年もWebで生きていれば、時限爆弾魔と言っていいレベルだろう。

4b0ff68eb8179f29ea59ebb89acc294f.gif
こういう風にWebサイトで動きをだすときにはJavaScriptというものを使う

そもそも今回の勉強会がどういった内容のものなのか、Webエンジニアではない人にもわかるようにざっくりと説明したい。あくまでざっくりと。

 

(興味ない人は読み飛ばし推奨)


Vue.jsを一言で言えば「JavaScriptのフレームワーク」だ。(フレームワークという言葉は後ほど説明します)

Webサイトを作るのにはJavaScriptというプログラミング言語(正確には違うが割愛)を使う。

JavaScriptを使うと入力した文字をリアルタイムに別の場所に表示したり、3Dのような動きを加えたり、ゲームを作ったりと様々なことができる。

しかし、JavaScriptだけで開発するのはけっこう大変だ。1からすべてを自分だけで作業するとなると膨大な時間がかかってしまう。

ではどうするか。答えは「もっと楽に開発できる便利な道具を使えばいい」ということだ。田植えを手作業でやるのでなく、トラクターを使うようなイメージだ。

例えばAさんとBさんがゲームを作りたいとする。Aさんは「シューティングゲーム」、Bさんは「RPG」を作りたい。

それぞれ作りたいものはバラバラであるが、「ゲームを作る」という目的は共通している。

ゲームの中身を見てみても「主人公を操作する」「敵がでてくる」「オープニング画面がある」などいくつも共通して同じような開発をする箇所がある。

そういった共通する部分というのは過去にゲームを開発した人も必ず作ってきたはずだ。真似するのが一番早く開発ができる。ならば「みんな同じものを作るならそこは楽に開発できるようにしよう」という発想になったのだ。

そこで開発を楽にするために「ゲームを作りやすくするためのJavascript」というものが誕生する。

これがあればゲームを1から作るのではなく7くらいから開発することができるのだ。(これがフレームワークと呼ばれるもの)

今回、勉強するVue.jsというのは「Webサイトを作りやすくするためのJavascript」だ。これを勉強することによって、Webサイトの複雑な動きが簡単に作れるようになるのだ。

 

※ Webエンジニアの方々へ
あくまで「Webエンジニアではない人用に向けたざっくりとした説明」である。ああ、やめてください…手に持ったマサカリを静かにおろしてください…そのマサカリは森で木を切るために使ってください…人に投げるものではありません…そして切った木を持って実家に帰ってお母さんに椅子を作ってあげてください…その椅子に座って本を読むお母さんを想像してください…マサカリもその方が喜ぶでしょう……


 

IMG_4827.jpg
デイリーポータルZ関係者も勉強会に参加していた。ライターの三土さんは今回とはまったく関係ないPHPのティーシャツを着ていた。

ちなみに今回参加していたデイリーポータルZ関係者の知識はこんな感じである。


megaya_jpg.jpg
megaya (ライター)
この記事を書いてる人。Webエンジニアをやっていて、Vue.jsも触っている
hayashi_l_jpg.jpg
林 (デイリーポータルZ編集長)
開発者ではないがCGIでジェネレーターを作った。風邪でお休みジェネレーターはPerlを使った。
20161002_dpz0023_jpg.jpg
石川 (デイリーポータルZ編集)
IoT記事を得意としており、編集部では開発を担当をしている。Vue.jsも触ったことがある。
l_mitsuchi_jpg.jpg
三土 (ライター)
開発関係の仕事をしている。Tシャツに書いてある通り普段はPHPを使う。フロント系は仕事ではそんなにやっていない
14611149_1131308660268224_318638739509791468_n_jpg.jpg
安藤 (デイリーポータルZ編集)
JavaScriptって美味しいの?剥かないで食べれる?
 
IMG_4800.jpg
デイリーポータルZ関係者も試行錯誤しながら必死に授業についていこうとしていたが、まったくついていけず最終的にはニヤけるしかなかった

 

IMG_4797.jpg
安藤さんに至ってはずっと笑っていた

講義の説明を聞きながら安藤さんは「あるんだなー、こういう世界も」と言っていた。Webで十年以上は生きてきた人とは思えない発言だ。

ただ、こういうことを裏表なしに言えるから人に好かれるんだろうな…

IMG_4779.jpg
そんな中でJavaScript歴1週間ほどのあつしさんは積極的に質問しながら進めていっていた。満月のときの海くらいやる気に満ちている。

デイリーポータルZ陣が授業についていけなくなる中で、あつしさんは必死に奮闘していた。

あつし「ついていくので精一杯で全然意味とかはわかっていませんね。とにかく必死についていきます!」

JavaScriptを触り始めていきなりこの内容についていけるだけで充分すぎる。

IMG_4790.jpg
今回の参加者はJavaScriptの初心者から、iOSやAndoidアプリを現役で開発しているエンジニアまでレベルは様々だった

参加者のレベルはバラバラであったが、全員が集中して話しを聞いて必死にコードを書いていた。

これは……ちゃんとしたエンジニアの勉強会だ!!

デイリーポータルZでやるイベントと言えば「渋谷で木になろう!」のようなゆるいものが多いので、まさかこんなにガッツリと勉強をするイベントになるとは…

IMG_4831.jpg
花谷さんのサポートとして来てくれた講師の中山さん(@takanakahiko)

ハンズオン形式の勉強会で難しいのは、参加者がそれぞれ作業を行うため予想外の問題が起きてしまうことだ。

打ち間違いやPCによる環境の違いなどで様々なエラーが発生する。それらを一人一人対応していくのは骨が折れる作業だ。

しかし、今回は技術力のある二人が講師に来てくれたことで問題が起きてもどんどんと解決されていく。

さらに花谷さんが資料をガッツリ作ってくれているので、説明を少し聞き逃してもついていくことができる。

「アホなジェネレーターを作るだけだから、講師の技術の無駄遣いなんじゃないか…」と思ったのだが、やはり実力のある人を呼んで正解だったのだ。

IMG_4808.jpg
最寄りさんは「ついていくのに必死で何言っているのかは全然わかりません…」と頭を抱えていた。がんばれ、ゴスロリエンジニア!!(勝手にゴスロリエンジニアと心の中で呼んでいた)

ゴスロリファッションでMacを触って作業しているのを見ると「天界から俗世に降りてきた天使なんだけど、なぜかSEになってバリバリ働くことになった 〜レベル1000のチート能力を使って人間界の職場で無双〜」みたいなラノベ設定が頭に浮かんでくる。

しかし、パソコンとゴスロリ衣装のアンバランスさは妙な魅力がある。

ロリータ服とかメイド服を着た女の子に自分が好きなものを教えるお店があったら行きたい。「えー!初めて聞きました?megayaさんってすごい!教えるの上手ですね!!」とか言われたい。それで時間がきたら「はい、終わりです。ありがとうございました。」って冷たく言われたい。そして家に帰ってFacebookを見て「友人たちは結婚して子供もいるのに俺は何をやっているんだろう」と絶望したい。(メイド喫茶行ったときの実体験)

いったん広告です

自分でジェネレーターを作ろう(給料はパンです)

fdasfsajf.jpg
ジェネレーターの数は20個ほどある。一人一つずつジェネレーターを担当して作っていく

前半の授業が終わり、いよいよ自分たちでジェネレーターを作っていく。

今まで学んだことを参考にしながら、今度は自分の手で開発していく。

IMG_4829.jpg
ジェネレーターを作る難易度はレベル1~3にわかれている。あつしさんは「簡単なのやってもおもしろくないので目標は高くレベル2のやつをやります」と、ジョジョに出てくる表面張力で水一杯のコップくらいやる気に満ちていた。

ここで作ったジェネレーターは完成すると実際にデイリーポータルZで公開されていく。(こんな感じ→「遅れますメールジェネレーター」)

今回の勉強会ではただ作って終わりではなく「サイトに公開する」という目標があるのがミソだ。それと同時に「作ったものが世の中にでる」というプレッシャーにもなっているので、参加者はみな真剣だ。

集中力を保つことができる良い環境だ…!

27988 copy.jpg
会場内にいるのになぜかTwitterで花谷さんとやり取りをする人が続出した。「席が隣なのにチャットで会話する」というのはエンジニアあるあるだ
kfjdsklajflkajfdkl.jpg
参加者が作るジェネレーターには仕様書がちゃんと用意されている

それぞれのジェネレーターの仕様は編集部の石川さんが一週間以上かけてまとめてきてくれている。アホなものを作るのに労力を惜しまない姿勢はさすがだ。

Webサイトを作るときに仕様書は大事だ。お客さんと「サイトの機能やデザインはこれで合っているか?」という確認は大切だ。これを怠ると「想像していたものと出来上がったものが違う!」と言われてしまうからだ。

IMG_4878.jpg
今回のジェネレーターはデイリーポータルZで公開されることになるので、石川さんに仕様を確認しながら作っていく

仕様確認だけでなく、完成したソースコードはGithubにあげて、S3にアップロードしてようやく作業完了となる。

勉強する→実践する→仕様を見ながら作る→Githubにpush→デプロイ(アップロード作業)

ゆるふわな勉強会と思いきや、エンジニア業務を擬似体験できるような内容の濃さだ。

こんなガッツリした勉強会になると思わなかった。浦島太郎が玉手箱を開けたら乙姫がでてきて「あなたのことが忘れられなくて付いてきてしまいました…」みたいな裏ハッピーエンディングが令和になって発覚するくらい予想外だ。

IMG_4862.jpg
エラーと格闘して悩んで悩んで、苦労したが…
IMG_4879のコピー copy.jpg
2時間ほどかけて「ラブレタージェネレーター」が完成!!

最寄り「一から一人で全部作るっていうのは難しいかもしれないですけど、ソースコードを見てなんとなく動きがわかるようになりました!」

数時間前まで「何を言っているのか全然わかんないです…」と狼狽していたのに、気づけばジェネレーターを実装するまでになっていた。

あー、良い!こうやって「開発って楽しい!」って知っていくんだよな…!(そして後に様々な要素で絶望する)

IMG_4885.jpg
イベントの予定時間を2時間すぎても作業をしている人が大勢いた(もちろん帰ってもいい)。もはやジェネレーターしか作らない「株式会社ジェネレーター」 をみんなで立ち上げたい。
IMG_4903.jpg
勉強会が終わったあとに懇親会をやる予定だったのが、その時間すら作業時間に変わった

懇親会で配られる予定だったパンや飲み物がテーブルの上に並べらた。パンを食べながらパソコンを触っている参加者を見るといよいよ仕事感がでてきた。

参加者からも「配給だ!」「給料がパンだ!」「休日出勤だ!」と声があがった。(自由に帰っていいので、残った参加者は漏れなくドMなんだと思う)

IMG_4890.jpg
あつしさんはかなり粘ったのだが、この日での完成とはいかなかった。(しかし後日、自宅で作業してしっかりと完成させた→)

当日では完成させることができなかったが、

「Vue.jsがこんなにとっつやすいものだってわかってよかったです!いいキッカケになりました。家帰ってゆっくり完成させます!」

と最後まで心の火は燃えていた。GLAYの20万人超えの伝説のライブで人が溢れていたくらいやる気に満ちていた。

何かを始めるキッカケさえ手に入れられば勉強会は100点の成果だ。

あつしさんを見ていて学んだことがある。勉強会に言って「よし今日でこの技術を習得しよう!!」ではなく「ああ、なるほど!こんな便利なものがあったのか!」と知るだけでも参加する意義は大きいのだ。

IMG_4832.jpg
アホなジェネレーターを真剣に作っている姿を見ていると、「ああ、Web開発ってやっぱり自由でいいな」と思った。くだらないことに真剣になって没頭できる。

僕はWebエンジニアになってから数年経つが、余計なプライドができてしまっているなと感じた。

たいした実力も実績もないくせに年数だけを重ねて「初心者の勉強会に行くのは恥ずかしい」とどこかで思ってしまっている節があった。技術を学び始めるときはみんなが等しく初心者であり、恥ずかしいことなどなにもないのに…!

学ぶ姿勢というのは大切だ。あつしさんは「ちょっと僕のレベルだとくるの早かったですかね?」と不安がっていたのだが、こうやって飛び込んできたからこそ得られたものは大きかったはずだ。

ここに来ている参加者の中には、他の分野で活躍しているエンジニアが何人もいる。一線で戦うエンジニアは常に学ぶ姿勢を忘れない。自分自身の考え自体が恥ずかしいことだと気づいた。

IMG_4868.jpg
ということで勉強会に感化されて、僕も「なにか作ろう!」と気持ちが高ぶり途中から撮影しながら開発していた

 

いったん広告です

バズるツイートジェネレーター(実際に動きます)

誰でも思いつきそうなネタだし、すでに既存のものがあるかもしれないが「とりあえず作ろう」と手を動かした。

アホみたいなものでも手を動かして成果を積み重ねていく方が何もしないよりもよっぽどマシだ。

ああ、やっぱり手を動かして何かを作るのは楽しい。簡単なものでも完成すると感動するな。

IMG_4904.jpg
パンと一緒に配られたビールに真っ先に食いついた最寄りさん
IMG_4896.jpg
完成して祝杯があげられると思いきや、仕様ミスがあり修正が必要になっていた。作業し直しだ。バグや仕様ミスはエンジニアはつきものである。がんばれ、ゴスロリエンジニア!!

まじめにふまじめ

アホなものを一流のエンジニアに教わるというのは贅沢で濃密な時間だった。意味のないものを作るというのは適度にリラックスして開発ができていいのかもしれない。

「まじめにふまじめ」というかいけつゾロリのタイトルは一つの真理だ。

IMG_4901.jpg
花谷さんと中山さんは最後まで参加者につきっきりで教えてくれていた。お疲れ様です…!

やっぱり今考えてもデイリーポータルZでこんなに真面目な勉強会が開催されたのが夢のようだ。

講師二人のたしかな技術力と、デイリーポータルZをかけ合わせたら質の高い勉強会が生まれたのは間違いない。

IMG_4876.jpg
技術評論社から「Vue.js入門」が献本されたらしいのだが、速攻でじゃんけん大会の商品にされていた。キャッチアンドリリース。(誰も本を見ないよりは数倍いい使い道)

今回が真面目なイベントだっただけに、その反動で次に勉強会をやるとしても「キャベツとレタスの見分けかた勉強会」みたいな180度違うことをやるかもしれない。むしろそっちの方が通常運転だ。そう思わせるデイリーポータルZはやはり正気の沙汰でない。

 

▽デイリーポータルZトップへ
20240626banner.jpg
傑作選!シャツ!袋状の便利な布(取っ手付き)買って応援してよう

 

デイリーポータルZのTwitterをフォローすると、あなたのタイムラインに「役には立たないけどなんかいい情報」がとどきます!

→→→  ←←←

 

デイリーポータルZは、Amazonアソシエイト・プログラムに参加しています。

デイリーポータルZを

 

バックナンバー

バックナンバー

▲デイリーポータルZトップへ バックナンバーいちらんへ