Experts.jp日本に、もっとエキスパートを。(7)こんにちは、編集長の白石です。2017に登壇するエキスパートに、予定しているセッションのトピックを中心に、様々な技術的なお話を伺おうというものです。セッションの内容をより深く理解する手助けになるだけでなく、本記事単体でも面白く読んでいただけることを目指しています。代表取締役社長の田中正裕さんです。14:20-15:00)です。田中さんは、ずっとWebとネイティブのハイブリッドアプリの分野で活躍してらっしゃいます。はい、まずはそもそも最近Webがネイティブにかなり近づいてきたな、と思っています。以前はWebとネイティブはできることに差がありましたが、最近はWebにできることがすごく増えてきています。Workerの登場で、以前はWebでは実現が難しかった、プッシュ通知やバックグラウンド処理なども可能になってきている。Assemblyの登場により、今後は目立ったディスアドバンテージではなくなっていくでしょう。そもそも、端末速度の向上とブラウザエンジンの高速化で、速度差自体が目立たなくなってきています。Assemblyは期待ですよね。AssemblyのWebアプリフレームワークが出たりするのではないか、と期待しています。Assemblyに対応したことも、すごく大きな意味を持っていると思います。他には、アプリの起動方法も違いとしてよく挙げられていましたが、Webはブラウザからアクセスするもので、ネイティブはインストールして使用するもの、という区分けも最近意味がなくなってきました。Appsなんかはその象徴ですよね。ブラウザがWebアプリを端末にインストールしたら、あとはネイティブアプリと遜色なく動作する。Safariには昔から、ホームスクリーンにWebサイトへのブックマークを追加する機能がありますが、それがもっとスマートな形で実現しそうですね。Web技術を使ってアプリを作る方法自体が今や多様化していて、以前のような「Webかネイティブか」という単純な二分法じゃなくなっているんですよね。はい、その多様化したアプリ開発手法を本日は伺いに参りました。一つ一つ教えてください。カンファレンスのセッションではコード例を挙げながらお話しようと思いますが、今日は口頭による説明で進めましょう。最初に、Electronの紹介からいきたいと思います。Shell」というツールでした。特徴としては、Chromiumを組み込んだブラウザレイヤーと、Node.jsによるネイティブレイヤーの二層構造になっているという点が挙げられるかと思います。WebViewはもちろん、Node.jsもクロスプラットフォーム性の非常に高いプラットフォームですので、Electronを用いると、クロスプラットフォームなアプリを簡単に開発することができます。著名なところでいうと、SlackはElectronで書かれているんですよね。Code、そしてもちろんGitHub製のエディタであるAtomと、著名なベンダーもElectronの採用には積極的ですね。Electronの将来は明るそうですね。WebViewの上で動作するので、やはりパフォーマンスやメモリ使用量の面では不利になりますね。実際には、PCはモバイルに比べると速度面で優位ですので、そこまで気にするところでもありません。Codeはすごく軽快に動作します。なんでElectron開発元が開発しているAtomがあんなに重いのか(笑)。Codeの軽快さは、相当な技術力のなせる業なのかもしれません。マイクロソフトってところですね。次はCordovaについてですが、これは説明の必要もないくらい有名なフレームワークですね。Electronのモバイル版と言ってもいいかなと。WebViewと、ネイティブ機能を利用するためのCordovaプラグインという「二層構造」であるところも同様です。Electronと違うところは、よりベースとなるOSの依存度が高いというところが挙げられると思います。WebViewは基本的にOSネイティブのものを使用しますし、Cordovaプラグインは通常ネイティブの開発言語で開発します。利点はやはりクロスプラットフォーム性です。複数のモバイルOS上で動作するアプリを、ほぼ1ソースで書くことができます。欠点は昔から言われているように、パフォーマンスが遅いという点。先程も申し上げたように、端末もブラウザも速度が向上していて、「遅さ」はあまり気にならないレベルになっていると思います。少なくとも、Monacaのユーザーに限って言うと、ほとんどの方が問題ないとおっしゃってますね。ぼくも、もうそういう段階なんじゃないかな...とは思っていたのですが、田中さんに言われると説得力が違いますね。今では、Cordovaを使っていても、ユーザーが気付くこともほとんどないと思います。◯◯(某ECアプリ)も実はCordovaを使っているようなんです。えっ!あの◯◯が!ぼくもよく使っていますが、全然気づきませんでした。意外と広がっているんですよね。今後もその存在感は増していく...と言ってもいいんじゃないでしょうか。Facebookが作っているモバイルアプリ用のフレームワークで、一言で言えばReactを使ってモバイルアプリを作るためのツールですね。Reactの仮想DOMを、ネイティブのUIコンポーネントを利用してレンダリングするものです。Nativeは最近人気急上昇中ですよね。React自体に人気があるということと、そしてFacebookが自ら使用しているのが大きいですね。Nativeは、元々Instagramのチームが作っていたそうです。Nativeの利点や欠点はなんでしょうか。WebViewの上で動作するのではなく、ネイティブに動作するアプリが作れるというのは大きな利点ですね。パフォーマンス上の問題も生じにくいし、ネイティブのルック&フィールをそのまま利用できる。UIスレッドとJavaScriptのUIスレッドが最初から分かれているのも利点だと思います。JavaScriptの処理がUIスレッドの動作を阻害しないので、UIが60fpsを維持しやすい。作ってみると分かるのですが、結構作り方に癖があるんですよね。それに慣れるのが少し大変かもしれません。コードの共通化は促進されるものの、クロスプラットフォームじゃないというところも、議論が分かれるところです。Anywhere」(一度学べばどこでも書ける)と言っていますね。クロスプラットフォームは最初から目指していない。そこもCordovaとは大きな違いです。CordovaはWebそのものですから、ブラウザを使って開発し、ブラウザの機能が増えてネイティブと遜色なくなれば、なくなって当然のものという前提でした。Nativeは、ネイティブアプリをJavaScriptで作るという発想です。開発にはネイティブの知識が必要になります。JavaScriptを使用するので、開発体験自体はWebに近いものがあるのですが、やはりHTMLやCSSを使ったUI開発とは別物です。あとはNativeScript、あとWeexというフレームワークを紹介していこうと思います。ここらへんまで来ると、聞いたことないという人も多そうですね〜。NativeScriptは、ネイティブで動作するアプリをJavaScriptで書けるフレームワークです。NativeからReactを抜いたもの」と考えてもいいでしょう。ぼくもNativeScriptの名前は聞いたことがあったのですが、Angularの界隈で耳にしました。Angularと組み合わせて使えるというのを一つのウリにしています。Angularのイベントとかにも積極的に出ていて、Angularチームとの関係は良好そうです。利点はやはりネイティブのパフォーマンスで動くこと、そしてAngularと組み合わせて使えることでしょうね。Nativeほどスムーズには使えないのが悩ましいところですが。欠点は...なんといってもユーザーが少ないことですね。採用事例とかも探したのですが、今のところ見つかっていない状態です。2017/9/16時点で11,076のスターを集めている)。あと、開発していたTelerikという会社がProgressという大企業に買収されてしまって。その後ちょっと開発が停滞してしまっているように見えるんですよね。それもちょっと心配なところです。買収あるあるですね(笑)。最後はWeexをご紹介しましょう。これはVue.jsを使ってネイティブアプリを作れるというフレームワークです。NativeのVue版と言っても差し支えないかと思います。Nativeなどと同様に、ネイティブの速度で動く、ネイティブのUIコンポーネントが使えると言ったところですよね、きっと。はい、あと面白いのは、これってアリババが開発に携わっているんです。it」というセクションで採用企業の一覧がある)。おお、それはNativeScriptとは違うところですね。Foudationに寄贈された)。Vue自体もすごく人気がありますしね。Vueに関心のある方にとっては、注目に値するプロダクトだと思います。最後にまとめとして、Web技術を使ってネイティブアプリを作るという手法は、今後も広がっていくのかどうかをお聞きしたいです。今回取り上げた各プロダクトのnpmのダウンロード数とかを見ると、右肩上がりではあるんです。その事実を以て、Web技術によるアプリ開発の人気が高まっていると言い切れるかは微妙です。アプリ開発市場そのものも、まだまだ拡大していっていますからね。個人的には、Web技術によるアプリ開発が、ネイティブの開発手法よりも人気が上回るようなことにはならないと思います。OSの開発元がオフィシャルに推進しているわけでも、何かを保証しているわけでもありませんし。これまでiOSやAndroidの開発者を雇って、アプリ開発を行っていたような企業が、Cordovaを選ぶようなことは、今後もあまり起きないと考えています。一つだけ言えるのは、Web技術者による、フロントエンドのアプリケーション開発が今後も伸びていくのは間違いないということです。Appsを作るのか、先程紹介した技術のどれかを利用してモバイルアプリを作るのかについては、あまり変わらないと思います。Webをやっていた会社にとっては、既存のスキルセットや資産を使って、やれることの選択肢が増えてきているのは間違いありません。Web技術の進化も、Webブラウザによる実装もまだまだ続いていますし、Webの未来にはまだまだ期待しています。田中さん、今日はWeb技術を使ってネイティブアプリを作るテクノロジーについて、幅広く教えていただきありがとうございました。