Vue.js初学者が語る、かくも素晴らしきVue.jsの世界

はじめてのVue.jsでコンポーネントの実装

k-okina氏：よろしくお願いします。Vue.jsと出会ってだいたい1年ぐらいになるんですけど、本日はVue.jsへの感謝の気持ちを込めて発表したいと思います。

自分はTwitterとかでは「@kahirokunn」で活動しているのですが、Qiitaとかになると「k-okina」っていうアカウント名で活動しています。Vue.jsを認知してからそろそろ1年ぐらいで、QiitaでVue.jsに関してたまに投稿しています。現在株式会社scoutyというスタートアップでフロントエンドエンジニアをしています。

2018年、私はVue.js、あとVue.jsのコミュニティとかエコシステムにとてもお世話になりました。

まず「はじめてのVue.jsでコンポーネントの実装」なのですが、自分はもともとLaravelを使っていたんですね。LaravelってVue大好きなんですよね。Laravel Mixとかで最初からVue.jsがデフォルトでインストールされていて。

「ちょっとVue.jsって最近よく聞くなぁ」と思って、「じゃあ使ってみようかな」と思って使ってみたんですね。「仮想DOMってなんだろう？」「なんかかっこういいな」みたいな感じで。

最初はこういう感じのコンポーネントを作りました。よくあるお問い合わせフォームで、お問い合わせ項目を選択したら本文が例文に変わるやつです。これ作った時にめっちゃ感動したんですよね。「こんな簡単に作れちゃうのか」って。

最初は1日ぐらいかかって作ったんですけど、これを作った時、「あれ？　俺、フロントエンドエンジニアなれるんじゃね？」って思ったんですよね。実際やってみるとそんなに簡単な話じゃなかったんですけど、でも本当にVue.jsが道を開いてくれたなって思います。

実はVue.jsの前にReactを勉強しようと思ったら、友人のReact使いの方から、「webpackを設定して、JSXを学んだほうがいいよ」と言われて、さらにJavaScriptのいろんなAPIを学ばされて、「あれ？　俺、これで本当にUI作れるのかな」ってなって……挫折したんですけど、でもVue.jsだと、なんかさらっと作れてすごい楽しかった。

（会場笑）

本当にありがとうございます（笑）。

Vue.jsは初学者に親切

ちなみに、だいたい1年と3ヶ月ぐらい前は、こんな感じの超簡単なヘッダーのHTML・CSSに3日かかけても作れなかったんですね。そんな俺でもVue.jsは使えた。そう、本当に。

（会場笑）

Vue.jsというのはこれだけ敷居が低いというか。本当によかったなって。初学者にすごく親切で。

Vue.jsで作ろうと思ったきっかけが、Virtual DOMの輝きだったんですね。さっきも言ったんですが。Virtual DOMってイケてるなと。「港ではVirtual DOMがあんなに流行っているのに、自分はjQueryで作っているのか」って。でも、Vue.js使うとこれにパッと触れられるので、イケてる感があって楽しいなって。

このLaravelって確かデフォルトでVue.jsの環境が用意されていて、「よし、やってみよう！」というのでさっきのお問い合わせフォームみたいのを作って。すべてはここからなんですね。

ここから始まって、それから簡単にリスト表示とかを作ってみたんですね。vue routerとかvuexを使ってToDo Appみたいな。本当に楽しかったんですよね、これ。「俺フロントエンドやれるんじゃないか？」って本当に思ったんですよね。

実際「フロントエンド、俺やります」と言って全部やったら、超つまづいたんですけど。しかもwebpackの設定に1週間かかって。

「どのように楽しかったのか？」と。最近はVue CLIとかNuxtとかいろいろあるんですけど、Vueだと、デザインを形にするのが楽しいですし、デザインに挑戦するのが楽しいし、デザイナーとやりとりして、「あれ？　俺が触ったコードがちゃんとビジュアルとして表現される！」みたいな。本当に書ききれないぐらい楽しいんですけど。

新しいものに出会って、新しいものに触れて、新しいものを学ぶ。とても好きで楽しい。そして、本当にそれがいつか使えるようになるみたいな。

今だと、Reactは挫折したんですけど、Vue.jsをがんばっていたらいろんな概念が学べて、ReactとかAngularとかも普通に触れるようになって、本当によかったなって。本当にこういう新しいものを触れるってなんかすごい楽しいなって。

今日は「2018年にお世話になったライブラリに対しての感謝の内容で発表を作ってください」みたいな感じで書いてあったので、本当に「Vue.jsがどんだけすばらしいものか」みたいな、「どんだけ感謝しているのか」というのを伝えようかと思いました。

Vue.jsとの出会いを振り返って

新たな環境で、新たな課題で、それに対して新たな挑戦をしていって。たくさん失敗したし、変な記事も沢山書いてしまったんですけど、全部含めて、本当に楽しかったです。

コミュニティやOSSに本当にたくさん助けていただいて、たくさん迷惑もかけてしまったんですけど、本当にたくさん助けてもらったので、これからは自分も少しずつ貢献していきたいと思っています。

この1年間たくさんの人・コミュニティに助けていただいて、本当に感謝しています。ありがとうございます。

作成途中なんですけど、Vue.jsの自分の今年最後の作品を作っていて、最終的にVue.jsのAdvent Calendarに投稿しようと思っています。

本当に2018年終盤に差しかかりますけど、このヘッダーを作るのに3日かかってたんですけど、お問い合わせフォームみたいなちょっとしたコンポーネントを作って、本当に楽しくて。そんなレベルからでも、Vue.js触ってたら、「そろそろ『フロントエンドエンジニア』と名乗ってもいけるんじゃないかな？」みたいな気がしてるんですよね。

今もwebpackはあんまりよくわかってなくて、APIころころ変わるしまだチューニングとかで挫折するんですけど、本当にVue.jsはすごいなって。webpackとか挫折すると思うんですけど、そのへんはVue CLIとかも出てきてて、本当にDXがいいなと思っています。

ReactもAngularも超好きだけど、自分はこれからもVue.jsと付き合っていっていきたいと思います。来年もフロントエンドで楽しむぞー！

ご清聴ありがとうございます。

（会場拍手）