BT

Vue.jsについてVueConf.US会場でGregg Pollackに聞いてみた

| 作者: Kevin Ball フォローする 3 人のフォロワー , 翻訳者 猪股 健太郎 フォローする 0 人のフォロワー 投稿日 2018年4月19日. 推定読書時間: 11 分 |

原文(投稿日:2018/04/03)へのリンク

Vue.jsの人気が急上昇している。bestue.js.orgによる最近の調査によれば、2017年にGitHubで最も人気のあるオープンソースプロジェクトがVue.jsだった。VueMastery.comの創設者で、今年のVueConf.usにおける発表者の1人でもあるGregg Pollack氏によると、Vueの成功の主な理由の1つは、Vueを段階的に採用できるようにするようにコアチームが取り組んだことにある。

InfoQは、Vue.jsの内部構造、Vue.jsコミュニティに関する考え、Vueを学ぶ最善の方法、そしてVueの成功理由の詳細についてPollack氏に質問した。

InfoQ: Code SchoolやStarter Studioのように、よりジェネラリスト向けの教育会社を設立した後で、あなたは最近Vue Masteryを始めました。Vueに特化した会社を設立した理由は何ですか?

Gregg Pollack: 私が設立したVue Masteryの運営会社はCode Popという名前だ。私は気づいたのだが、私がこの世界に影響を与える一番の方法は、それが癌の治療法を見つけるためであれ、火星に次の人を送り込むためであれ、最も革新的なオープンソース技術の導入を加速することだと。そして私が技術の導入を加速できるとすれば、その手段はメディアとコンテンツを通して人々にその技術を教えることだとも。私たちは数か月前にさまざまな観点についていくつも検討し、スイートスポットにある技術、すなわちまだ主流にはなっておらず、早期採用段階で、実際に主流に押し上げるためにコンテンツとメディアで加速することを本当に必要としている技術を特定することを始めた。

そしてさまざまな観点をすべて検討した結果、私たちはVueを選んだ。実に健康なエコシステムを持っていたからというだけではなく、Vueは勢いを増していた。「JavaScriptの現状」という調査によれば、JavaScript開発者の43%がVueの学習に興味があるとのことだ。ほとんどの人が、そして私たちも、よしそれならそれを選ぼう、と考える技術とはそういうものだ。また、Code Schoolについてもいえることだが、私たちはすべてのものについて、非常に入門的な表層だけを用意したので、それ自体は悪いことではないし、学習を始めたい人はいつでもいるものなのだが、ただ欠点は、最初のコースを終えた後に多くの顧客が脱落するだろうということだ。彼らはやってきて、自分が学びたいと思ったものだけを購読し、離れて行くことになるだろう。これが、Pluralsightによる買収がCode Schoolにおいて非常に意味を持つ理由の1つだった。Pluralsightが持つあれほど巨大なライブラリーが私たちに欠けていたためだ。しかし、私たちがある特定の技術を選び、それを深く掘り下げたならどうなるのかについて、いつも私はすごく興味があった。その周りにコミュニティを作ることができるだろうか?支持が得られるだろうか?レファレンス図書館を作成できるだろうか?なぜならそれは、Pluralsightが驚くべき顧客生涯価値を持っていた理由のひとつでもあるからだ。Pluralsightの顧客が長い間Pluralsightに出入りするのは、顧客がレファレンス図書館として使用しているためだろう。だから彼らは問題に行き当たると、Google検索してPluralsightに行き、「その問題についてのコースやレッスンはあるか?」と調べ、見つけるだろう。Pluralsightは私たちよりずっと多くのコンテンツを持っているためだ。つまり私がVue Masteryでやりたいことは、Vue開発者のための究極の学習リソースになることだ。だから、私たちがそういうレファレンス図書館になれればと思っている。

InfoQ: 人々がVueを採用し、使用している主な理由は何だと考えますか?

Pollack: いくつかの理由がある。Vueは、ReactやAngularからベストプラクティスをすべて取り入れ、誰もが採用しやすいようにするという素晴らしい仕事をしたと思っている。そして、Vueが同じパターンを備えているから採用しやすいというだけではなく、最初に学習を始めたとき、最初に適用し始めたときにどのような気持ちになるかについて、Vueは特に注意を払っていた。ドキュメンテーションはとても見事で、それはほぼドキュメンテーションプロジェクトを担当するChris Fritzのおかげだ。彼はVueをわかりやすいと感じさせることについてとても気を使っていた。よって、Vueのドキュメンテーションは、とりわけ初心者にとっては素晴らしいものだ。さらに、Vueは段階的に採用可能になっている。というのは、あるプロジェクトのごく一部だけにおいて適用することもできるし、vue-cliを使って最初から全面的に適用し、すべてをVue.jsの流儀に従って進めることもできる。全面的に適用するのも素晴らしいことだが、大企業にとっては、新しい技術を社内の主流にするためには、徐々に最適化していくことが本当に簡単でないといけない。そうであれば、フレームワーク全体やその流儀に同意する前に、アプリケーションのごく一部に入れておくことができる。まさにそのことが、Vueがとても普及した理由だと私は思う。

ReactやAngularを見ると、先日誰かが何かそのようなこと言ったのをを聞いた。それらのプロジェクトでは非常に多くの開発者がフルタイムで働いているため、両方の技術が進化するにつれて、初心者として始めるのが難しいと感じるようになった理由の1つかもしれない。ほとんど不必要なまで複雑になってしまい、新人受け入れに十分な注意を払っていないからだ。たとえば、誰かがある技術の初心者だとして、自分のアプリの5%、10%、60%というようにこれを使っていくことができるだろうか。Vueがここ数年間、採用数を増やしてきた理由はこういうところだと思う。

InfoQ: VueConfでのあなたの発表では、Vueの中心的な機能の1つとしてリアクティブシステムに焦点を当てていました。それについて詳しく説明できますか?

Pollack: リアクティブシステムは、Vueのようなフレームワークの多くに見られるものだが、JavaScriptコードのどこかにデータを持つ方法を指しているだけだ。そのデータが変更された時には、フレームワークはWebページ内の更新が必要なすべての場所を知っているため、それらすべてを変更する必要がある。そういう仕組みを抽象化することができれば素晴らしいことだ。つまり、ただのJavaScript配列を保持していて、それを変更すれば、ウェブページのどの部分に影響を与えているかがわかるというように。そして、それをやってくれるため、DOMの更新について心配する必要がないというフレームワークを使うことがまさに鍵と考えられる。コールバックフックでjQueryを実行する?いや、必要なのはテンプレートを用意するだけで、更新が必要なときとその方法を知るのはフレームワークに任せる。そして実際にはここに仮想DOMが入ってくる。この手のフレームワークはすべてこの仮想DOMを備えている。データが更新されるにしたがって、テンプレート内の差分が最も効果的かつ効率的に反映されるようにしてくれる。VueConfの発表では、裏側に進んでリアクティブエンジンの作り方を示し、それから、Vueのソースコードのどこにそれがあるかを示した。私は魔法を解明した。皆にとってリアクティブは本当に魔法のようなものだからだ。

InfoQ: あなたの発表では、コアフレームワークのすべてのソースコードを理解する人はごくわずかしかいないと述べていました。人々が最も苦労しているのはどの機能ですか?

Pollack: VueMastery.comで初心者向けの無料の資料を公開したばかりで、それに関するデータはまだ持っていないが、人々が最も苦労しているのはどこだろうか? 私が思うに、Vueは初心者にも簡単に使い始められるため、初心者の間は少しの機能だけ使ってもいいし、多くの機能を使うこともできる。 私が初心者の頃は、こんなことをぜひ知りたいと思っていた。「さて、プロフェッショナルはこの機能を実際どのように使っているのか?」 今のところ、一番優れた道筋が何であるかを理解するまでには、少しの発見と少しの質問が必要だ。私がVueに染まり、Vueの全ベストプラクティスをとことん使いたいのであれば、そのベストプラクティスとは具体的に何だろうか?

正直に言うと、その道筋が進化してきたのは去年だ。だからおそらくは、そのベストプラクティスが形作られている途中だったたことが、道筋が少しはっきりしていない理由の1つだったと思う。Nuxt.jsのようなプロジェクトが1.0に達したのはここ数ヶ月のことでしかない。Nuxtはまさにそういうことを実行しているプロジェクトだ。Nuxtが示そうとしているのは、エンタープライズレベルで実稼働するVueアプリケーションを作成するためのすべての主要ライブラリのベストプラクティスだ。すべてのファイルはここにあり、すべてのフォルダはここにある。そして、ベストプラクティスとされるやり方で開発を行う方法を紹介しようとしている。そして今は、それらが進化できたので、企業のVueスタックがどうあるべきかは更にはっきりしたものになってきた。

InfoQ: あなたの考えでは、Vueで最も活用されていない機能は何ですか?

Pollack: まずはアニメーションとトランジションだろう。Webアプリケーションの一般的なアニメーションやトランジションに関して、それらをフル活用して美しいユーザーインターフェイスを作成している企業はあまりないと思う。だから私は、アニメーションやトランジションが簡単に作成できることがとても気に入っている。そして、その理由の一部は、Vueの作者Evan Yu、彼の経歴がデザイナーだという事実から来ていると思っている!したがって、思い切ってフレームワークを使い始めるにはおそらくコーディング経験がまだ足りないデザイナーにとってVueを非常にわかりやすくするという素晴らしいことを、最初からやりたいと彼が思っていたのには、それが部分的に影響していると私は思う。それが答えの一つだ。

使用されていない……。サーバーサイドレンダリングを挙げるべきだろう。おそらく多くのVueアプリが、サーバーに立ち返る前に、テンプレートをレンダリングする方法を十分に活用していると思われる。私にもよくわからないが、レンダリングのすべてのステージの違いのようなことで、私もちゃんと理解する必要があるのだが……。実際にアプリケーションをスケールさせたいのであれば、テンプレートをレンダリングするだけでなく、ブラウザによってロードされる実際のファイルを埋め込むようにWebページをレンダリングしておいて、ブラウザ内ではアプリケーションの最も動的な部分だけがロードされるようにする方法もある。さまざまなレベルのレンダリングとスケーラビリティがあり、ここ数ヶ月間で本当に強固になってきた。Nuxtを使うことも可能だし、サーバーサイドレンダリングの一部を自分でやることも可能だ。それはvue-loaderで決定できるはずだ。いくつかの方法があり、それを使って遊ぶことができるので、本当にスケーラブルで本当に素早くものを作ることができる。

InfoQ: あなたはコードの作成方法を教える経験が豊富です。初めてVueを試す開発者には、何から始めることをお勧めしますか?

Pollack: VueMastery.comに従って進むことだ! 私は初心者用コンテンツは常に無料でなければならないと信じていて、だからVueMastery.comの初心者用コンテンツはどれも無料だ。そして私たちは多くの時間とエネルギーを費やしてそれを作った。アカウントを作成せずにすべての動画を見て学習を始めることができる。だから、VueMastery.comは本当に素晴らしいリソースだと思う。もちろんVueドキュメントも同様で、そこには利用開始ガイドがある。見事なものだ。もし1つのリソースだけを使うつもりではない技術を使い始めるのなら、1冊の本だけを手渡して、「知るべきことはすべてこれに載っている」と言うことはできない。複数のリソースから学ぶことになるだろうが、素晴らしい無料リソースがたくさんある。ドキュメントもあるし、Vue Masteryもある。Laracastsにも無料のVueコースがあり、こちらも本当に素晴らしいものだ。

また、Vue Masteryでは無料で手に入るVueの必須チートシートを用意している。あるテクノロジーを使い始めた時には、自分の目の前にすべての構文を置いておければとてもありがたいものだ。そこで私たちは数週間かけて両面チートシートを作った。これがあれば必須構文をすべて手元で確認できる。したがって、何かを開発し始めるとき、常にドキュメントを見ている必要はない。必須チートシートをデスクトップ上やセカンドディスプレイ上に表示したりしてもいいし、プリントアウトしておいて必要な文法を眺めてもいい。

この記事に星をつける

おすすめ度
スタイル

こんにちは

コメントするには InfoQアカウントの登録 または が必要です。InfoQ に登録するとさまざまなことができます。

アカウント登録をしてInfoQをお楽しみください。

あなたの意見をお聞かせください。

HTML: a,b,br,blockquote,i,li,pre,u,ul,p

このスレッドのメッセージについてEmailでリプライする
コミュニティコメント

HTML: a,b,br,blockquote,i,li,pre,u,ul,p

このスレッドのメッセージについてEmailでリプライする

HTML: a,b,br,blockquote,i,li,pre,u,ul,p

このスレッドのメッセージについてEmailでリプライする

ディスカッション

InfoQにログインし新機能を利用する


パスワードを忘れた方はこちらへ

Follow

お気に入りのトピックや著者をフォローする

業界やサイト内で一番重要な見出しを閲覧する

Like

より多いシグナル、より少ないノイズ

お気に入りのトピックと著者を選択して自分のフィードを作る

Notifications

最新情報をすぐ手に入れるようにしよう

通知設定をして、お気に入りコンテンツを見逃さないようにしよう!

BT