※本記事は2019年11月に公開された内容です。

GAOGAO Ptd.Ltd.でCo-Founder CEO&ソフトウェアエンジニアを務める手島拓也（@tejitak）と申します。Vue.jsをメジャーバージョンになる前から利用しており、「Vue.js入門 基礎から実践アプリケーション開発まで」の執筆も行いました。今回はFLEXY読者の皆様に本腰入れてVue.jsを学ぶ前に知っておいていただきたいポイントについて解説します。

FLEXYはフリーランスや副業で活動されるエンジニア・CTO・技術顧問の方へ案件をご紹介するサービスです。お仕事をお探しの方はこちらをご覧ください。
Vue.jsのフリーランス案件情報はこちらから

私のエンジニア史とVue.jsに出会うまで

先日、慶應義塾大学矢上賞（起業支援）授与式で招待講演をする機会がありました。その際にも強烈に感じたのですが、Vue.jsと私のエンジニア史を切り離して語ることはできません。 そこでまず私のエモいエンジニア史から話を始めてみました。是非こちらからご覧ください（笑）

Vue.jsはバージョン0.8から愛用

もともと新卒でIBMの研究所に入り、サーバサイドとフロントを両方対応していました。その時はJavaとJavaScriptを主に書くエンジニアでした。その後フロントエンドに興味を持って、フロントエンドエンジニアとして転職をしたのがその次の会社、LINEです。

そこでフロントエンジニアとしてJavaScriptをメインで書くようになりました。jQueryが流行っていた時期から、ちょうどBackbone.jsやAngular.jsなどが出てきた頃までの期間、LINEでフロントエンジニアとして働いていていました。そして、Vue.jsで言うとバージョンが0.8くらいの時期。今はもうすぐバージョンが3にあがるくらいなのですが、0.8というメジャーリリースする前の段階のVue.jsを使ってプロダクトの開発も行っていました。

Vue.jsが0.8の当時、新しいアプリケーションの機能を新規で担当する機会があり、そこで導入することができました。当時はAngular.jsが主流、Backbone.jsが普及してきていて、jQueryももちろん健在の時期でした。いろいろと検討した結果、その時のサービスがシンプルな仕様だったので、試しに使ってみようと、提案して実装してみたという背景があります。

起業、そして海外へ。そこでもVue.js

その後いろいろあって起業することになりました。ちょうどAirbnbなどが伸びてきた時期で、民泊のホスト向けのツールや、東南アジアの高級ヴィラに特化したブッキングサービスを展開する会社をCTOとして起業しました。それから2年くらいして、その事業もあるので東南アジアに移住しました。4年くらい前のことです。

しばらくその事業を続けていたのですが、事業譲渡の後、会社を畳むことになりました。そのタイミングで新しく自分がCEOとして会社を立ち上げました。スタートアップの0→1フェーズの開発に特化した、スタートアップスタジオと呼ばれるもの。近年、経営者・非エンジニアの方が起業するケースが増えていますが、経営目線で一緒に開発を進められるエンジニアを見つけるのは非常に困難。確率的にもほとんど見つからないのが実状です。

この課題を解決するために我々の開発チームがお手伝いするという会社です。弊社には経営経験があるエンジニアも多くいます。GAOGAOは経営目線でスタートアップの初期フェーズ、シードで資金調達する以前から、シード後からシリーズAのフェーズに特化して、プロダクトマーケットフィット（PMF）の支援をメインの事業として行っています。1年半ほど前に立ち上げました。

5拠点でのスタートアップ開発

今は東京だけではなくバンコク、ホーチミン、セブ、シンガポールの5拠点でエンジニアのシェアハウスを持ちながらスタートアップ開発を行っています。今だと少しスタートアップではない大きめの会社も含め、合計10社くらいのお客さまがいらっしゃいます。そのため、私はバンコクと東京、ホーチミンにそれぞれ月に1週間から2ヶ月に1週間くらい滞在する形で飛び回っています。

メンバーは副業も合わせると20名程度在籍。東京にも5名程います。コンセプトは海外を目指したい日本人エンジニアをもっとグローバルな世界に引き上げること。そのため、日本人として海外の案件をどんどんとっていき、海外志向の若者たちにアサインしています。お客さまは今は半分以上日本、半分弱が海外という状況。バンコクやアメリカなどのお客さまも何社かありますね。

まずはお客様からヒアリング

具体的な仕事として、まずお客さまの事業担当者から技術選定のヒアリングから始めます。エンジニアリング知識がない方が作ろうとするサービスは壮大な規模になるケースが多い。そこをエンジニアの目線で見て大きく削ぎ落としていく。ここに価値があると思っていると考えています。コアとなる評価したいコンセプトを伺うコンサルタントから入り、いったん「とりあえずつけたい機能」を全部落とし、ミニマムなプロダクトを3ヶ月以内にリリースするように心がけています。

ミニマムプロダクトをスピーディーに制作

そのため、技術選定の部分で弊社に裁量があることが多いのですが、ミニマムなプロダクトをスピーディに作るという場合にはVue.jsが活躍します。弊社では、特に制約がなければまずVue.jsを使うという選択をしていますね。もちろん、案件によっては別の選択をすることもあります。例えば、非常にシンプルな、まさに副業のためのマッチングサイトのようなもの。トップページ、一覧ページ、詳細ページがあり、機能としては申し込み機能のみで、あとは管理画面があるようなもの。このような場合には動的なUIをまずは必要としないため、Vue.jsを使わないケースになります。

変化してきた役割

会社の成長に伴って私自身の役割も変わってきました。1年前までは自ら手を動かして開発をしていたのですが、この1年で徐々にその割合が減り週1～2日くらいの開発時間になっています。心強いメンバーも増え、コーディングの役割を任せられるようになってきました。ディレクション、コードレビューの中でソースコードやシステムのチェックをするような役割になってきていますね。

業務以外でも個人で作っているプロダクトでVue.jsを利用しています。最近では、8月くらいにこもって作ったSphere（スフィア）というサービスがあります。オフィスの写真をチェックインして投稿できるもの、オフィス特化型Instagramのようなサービスです。「こういう企業に訪問した」というのを投稿するためのサービス。このようなものを個人で作るときもVue.jsを使っています。

Vue.js 日本ユーザグループ 誕生の瞬間

LINEにいたころから、Dev Morningという渋谷で開催している朝活の幹事をしていました。260回を超えるほどまで開催され続けていますが、1回目から100回目くらいまではずっと幹事をしていました。今は海外にいる関係で、そこで出会った人たちに幹事を任せています。ピースオブケイクの外苑前のオフィスで開催していて、今でも帰国時にタイミングが合えば参加しています。このようなコミュニティーを作ることがもともと好きで、バンコクにいる日本人エンジニアを集めたシェアハウスのGAOGAOハウスも運営しています。

Vue.jsに関しては、コミュニティーの誕生前から携わっていました。そもそも、Vue.jsの公式ドキュメントの初めての日本語訳を担当した一人が私でして。今もコントリビューターとして活躍され、Vue.js 日本ユーザグループを取りまとめた代表者のkazuponさんと一緒に翻訳を始めました。その集まりがVue.js日本ユーザグループになっていきます。

現在は海外にいる時間も長くなり、運営に携わることはなくなりましたが、登壇側として関わっていますよ。

Vue.jsを始める前に押さえておきたい5つのポイント

ここからはVue.jsを始める前に押さえておきたい5つのポイントをご説明します。

Vue.jsはシンプルで学習コストが低い

さて、ここからが本格的にVue.jsのお話です。

Vue.jsのメリットは学習コストが低いことです。非常にシンプルな設計で、妙なメソッドもない。ReactとVue.jsが対比されることがよくありますが、その際に指摘される特徴にもシンプルさが出てきますね。

「シンプルなアプリケーションを作りたいならVue.jsだけど、大規模で複雑なアプリケーションを作るならVue.jsは使えない」と言われることがありますが、私はそう思いません。経験上、設計さえうまくできればVue.jsを多機能な大規模アプリケーションで利用しても問題を感じることはありませんね。

Vue.jsは基本MVVMパターン

Vue.jsは基本的にはMVVMパターンです。Model、View、ViewModelがあり、ViewにModelを渡して双方向バインディングしている作りです。データを書き換えるとUIが変わり、UIを書き換えるとデータが変わる。そこをバインディングさせることが効率的で画期的だったという経緯があります。ただ、それをやりすぎてしまった場合、例えばシングルページアプリケーションなどで1枚のページ内でいろいろなコンポーネントが複雑に動くようなUIを作った場合、モデルを引き渡してバインディング、バインディング、バインディング・・・とやっていくと、思わぬところで副作用が起きてしまうことがあります。これは、Vue.jsというよりはMVVMのつらいところではありますね。

ReduxやFluxで解決

この課題を解決しようとしたのが、ReactのReduxやFluxです。歴史を振り返ると、jQueryの時代が終わり、その後MVVMの時代が到来しました。その後、FacebookがReactを発表しましたが、それと同時にFluxアーキテクチャという考えが登場しました。これはMVVMのアーキテクチャを否定するもので、双方向バインディングにおいては、コンポーネントとデータを分離させてしまい、データをいじるなら必ずActionを通る設計がいいと提唱したんです。これによりソースコードの記述量は増えますが、データの流れは一方向になる。複雑性が生まれにくいというメリットがありますね。このような考え方は今でも主流になっています。Vue.jsにおいてはVuexが取り入れています。

Vuex採用の判断基準

VuexはまさにFlux、Reduxに影響されて設計されたもので、Vue.jsで前述の問題を解決するものです。ポイントとなるのは、Vuexをどのような基準で採用すべきなのかの判断基準を身につけること。「1つの画面上に親子関係以外のコンポーネント間のやり取りがすごく多くなりそうであったらVuexを使う」というのが基準になるかと思います。なかなか、この「すごく」を定義することはできないのですが、1ヶ所や2ヶ所ではなく、もっと多いレベルのイメージ。

最初の設計段階で、コンポーネント間のやり取りがどれくらい発生しそうなのか、シングルページアプリケーションでルーティングなどをする際、ページをまたいでどれだけページ間で共有するストアがあるか、そういうものを事前にイメージをした上で、どちらを採用するかを検討することがポイントになります。

「最初からとりあえずVuexを使ってしまえばよいのでは？」という意見もあると思いますが、これに関しては賛否両論です。私は「とりあえずVuexを入れる」というのはあまりお勧めしません。

特にフォームなどを多用した機能を作る際には、書かなければいけない内容が増えることが問題になってきます。開発者が全員Vuexの使い方を理解していればいいのですが、そうでなければVue.jsだけの場合に比べて事前知識のレベルが上がってしまうからです。

Vue.jsは元々個人開発

Vue.jsがReactやAngular.jsと違う大きな特徴に、企業が作っていないという点があげられます。React.jsはFacebookが全面的に押し出し、社内で開発して提供しています。

これに対して、Vue.jsは実は元々個人開発。今もメインはVue.jsのクリエイターと言われているEvan Youという方が開発しています。彼が基本的にコアなソースコードを見ており、公式プラグイン周りも見ています。そのため、Reactだとコアな部分はFacebookがメインで見ていますが、Reduxなど周辺のライブラリは乱立しがちです。

Vue.jsではEvan Youが公式ライブラリまで全部見ているので統一感があります。個人がメインの開発ではありますが、Reactを参考にしてドラフトがGitHubにどんどん上がっていきます。最終的な決済はEvan Youにありますが、コントリビューターもいるため、個人依存で変な独自進化をしていくということはありません。

Vue.jsはバージョンが2.0になる際に、DOMへの依存をなくす点で大きな変化でした。ちょうどReact.jsがサーバサイドレンダリングを発表しました。それは、仮想DOMでReact.jsを作り、サーバサイドレンダリングでもできるというもの。Evan YouはそれをVue.jsに取り入れるために、1.0でブラウザ依存だったものを全部消すということをやりました。それが2.0での大きな変化でしたね。

コンポーネント設計の考え方を理解できるかが勝負

初めてVue.jsを学ぶ際にはコンポーネント設計という考え方を理解できるかがポイントになります。

これまでのjQueryの場合、基本的にはプラグインで追加してグローバルにクエリを引っ掛けてファンクション追加して・・・というような使い方でした。そこにはコンポーネントという発想はありませんでした。

ところが、Vue.jsやReactはグローバルで触りにいくという行為は基本的にNGの世界。コンポーネントごとに実装が全部閉じる。これをコンポーネント化することで再利用性も高まり、ソースコードのメンテナンスもコンポーネント内で完結します。そのため、jQueryに比べVue.jsでは保守と再利用の容易さは高くなります。

また、jQueryだとidで要素を引っ掛けたりしますが、基本的にコンポーネントの世界はidを使うのはNG。DOM上に1個しかなかったとしても、コンポーネントというのは複製されて再利用されるものという思想のため、idを利用することは適しません。

Vue.jsのJavaScriptの書き方を覚えるよりも、再利用可能なコンポーネントという概念を理解してWebアプリケーションを設計・構築できるという能力が重要になってきます。

Vue.jsとjQueryの使い分け

もちろん、Vue.jsが万能でjQueryは使い所がないということはありません。

極端な例を言うと、Vue.jsでコンポーネントを作ったのにグローバルにDOMをいじってしまったら意味がなくなってしまいます。いわゆるウェブサイト制作という領域では、WebサイトランディングページをWordPressで作ることになり、jQueryは現役で活躍しています。むしろ、この領域ではVue.jsに乗り換える必要がない世界かもしれません。

しかし、少しインタラクティブなアプリケーションとなると、jQueryは破綻してきます。jQueryはグローバルに関してセンシティブな書き方なので、コードの行数が増えていくとどうしようもなくなってくる。ここを解消するのがコンポーネントの考え方です。逆を言えば、WebサイトをJavaScriptで少し飾りたい程度であればjQueryで構わないのです。本格的な動きをするWebアプリケーションを作るためにVue.jsに乗り換える場合、そこにはやはり一つ敷居をまたぐ必要が出てきます。

Vue.jsの入門者向け勉強法

ここからはVue.jsの入門者向けの勉強法をご紹介します。

まずは書籍から学習

初心者の方であれば、私が共著した「Vue.js入門 基礎から実践アプリケーション開発まで」という書籍をまずは読んでいただきたい。1万部を超えていますし、評判もいいので、是非ともお薦めしたいです。Vue.js 日本ユーザグループの代表をされているkazuponさん、Vuexの開発にコアメンバーとして参加している片山真也さんなども共著で執筆されています。初心者も読んで分かるように書かれています。

Vue.jsの公式ドキュメント

その次の段階のものとしては、公式ドキュメントを読むことをお薦めします。入門者の方にとってライブラリの公式ドキュメントを読むのは敷居が高そうなイメージがあるかもしれません。でも、読んでみると意外に結構理解できてしまうはずです。特に最初の方は易しく書かれています。それらを読んでもらと勉強になるはずです。

Vue.jsがReactと違って特徴的なのは、Reactは基本的にコンパイルをしないと動かないという点。Reactの場合、JSXと呼ばれるJavaScript構文の拡張もので書き、ReactのJSXを解析してJavaScriptに変換するという処理を、webpackを使って行うのが一般的です。これに対して、Vue.jsはそこの処理を単にVue.jsのファイルをスクリプトの中に読み込んで、スクリプトの中で少し書くだけでコンポーネントが動くようにできます。 そのため、JSFiddleのようなもので簡単なものは動かせます。まずは試してみながら、お手軽に始められるという点でReactよりも最初のハードルは低いかもしれません。

ローカル環境での開発におすすめなVSCode

ローカル環境で開発を始める際のお薦めIDEはやはりVSCodeです。プラグインとしては、Vetur、ESLint、Prettierなどを入れておくと自動的に整形してくれます。開発メンバー全員で同じ設定にしておけばソースコードがきれいな状況で共同作業ができますよ。もしくは、Sublime Textを利用してもVue.jsのプラグインがあるので問題なく使えますね。

Vue.jsを触ってみよう

Vue.jsの入門者におすすめなのはもちろんまずはVue.jsを触ってみることです。

ハンズオン：動かしてみよう

早速、Vue.jsを使ったプログラミングを体験してみましょう。

今回はシングルページアプリケーションを実現するため、Vue Routerを使ってみます。メニューを切り替えて内容を表示するのはビギナー向けの内容ですが、Vue RouterというVue.jsの公式プラグインを利用すると、ページの切り替えが簡単に実現できます。

シングルページアプリケーションとは、Ajaxを使用して必要な時に必要なデータを取得してページ遷移をクライアントサイドで行います。通常のWebアプリケーションにおける、ページ遷移時にブラウザがサーバへアクセスしコンテンツをロードする形式よりも滑らかなユーザ体験を提供できるようになります。Vue Routerを使うとクライアントサイドでのページ遷移、データ取得、Viewのレンダリング、モジュール化されたコードの管理などの実装を簡単に行うことができます。

index.htmlファイルを1つ用意すればVue.jsを試すことができます。 まずは以下のようにscriptタグでVue.jsとVue Routerの読み込みを行うHTMLを用意します。(Vue.jsのバージョンは執筆時点最新のv2.6.10を使用しています)

1. <div id="app"><!-- この部分に必要なHTML要素を記述していく --></div>
2. <!-- Vue.jsとVue Routerを読み込む -->
3. <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.js"></script>
4. <script src="https://cdnjs.cloudflare.com/ajax/libs/vue-router/2.8.1/vue-router.js"></script>
6. <script>
7.     // この部分に必要なJavaScript実装を記述していく
8. </script>

次に、特定のURLパスに対して、どのコンポーネントを呼び出すか、ページ遷移のマッピングをJavaScriptで以下のように定義します。

今回のサンプルの構成は、トップページとフルーツ一覧ページを切り替えられるシンプルなものです。

/fruitsにアクセスした際にcomponentで指定しているフルーツ一覧のコンポーネントが初期化されます。templateにて、そのコンポーネント自身のdataであるフルーツの情報をv-forを用いて配列をマッピングしているのでフルーツの一覧が表示されます。

コンポーネント

1. // ルートオプションを渡してVue Routerを初期化します
2. var router = new VueRouter({
3. // 各ルートにコンポーネントをマッピングします
4. routes: [
5. {
6. path: '/',
7. component: {
8. template: `
9. <div>
10. <h1>トップページです。</h1>
11. </div>
12. `
13. }
14. },
15. {
16. path: '/fruits',
17. component: {
18. template: `
19. <div>
20. <h1>フルーツ一覧ページです。</h1>
21. <div>
22. <h2>{{ fruit.name }}</h2>
23. </div>
24. </div>
25. `,
26. data () {
27. return {
28. fruits: [
29. {
30. id: 1,
31. name: 'りんご'
32. },
33. {
34. id: 2,
35. name: 'みかん'
36. },
37. {
38. id: 3,
39. name: 'バナナ'
40. }
41. ]
42. }
43. }
44. }
45. }
46. ]
47. })
49. // Vueの初期化を行います
50. var app = new Vue({
51. router: router
52. }).$mount('#app')

最後に、HTMLとして上記で定義したパスに対してコンポーネントを描画するためのの記述と、ページ遷移を行うためのリンクを記述します。

1. <div id="app"><!-- リンク先を `to` プロパティに指定します -->
2. <!-- デフォルトで <router-link> は `<a>` タグとしてレンダリングされます -->
3. トップページ
4. フルーツ一覧ページ
5. <!-- 現在のURLとマッチしたルートに定義されたコンポーネントがここにレンダリングされます --></div>

上記をHTMLファイルとして保存して、ブラウザで開いてみてください。動的に動くサンプルアプリが、わずかなコード量で動くのが確認できます。
サンプルコードはhttps://jsfiddle.net/tejitak/nzbpu0k7/で動作確認できます。

コンポーネント設計のポイント

コンポーネント設計をするときには、まず画面のイメージを作ってその要素が単体で再利用性があるかどうかという観点で考えてみることがポイントになります。

あるフォームを、3セクションあり、サブミットするようなページのコンポーネントを作るときに、どこまでコンポーネント化すべきかを考えます。例えば、ユーザの基本情報を取得し、住所情報を取得するというときに、それぞれコンポーネント化する必要があるのかどうかを考えてみましょう。コンポーネント化した際、それが再利用される可能性があるのかという観点で見る。住所の入力はコンポーネント化できるかもしれません。

確かに使い方次第ではそれぞれコンポーネント化したほうがいいケースかもしれませんが、すぐにそれを3セクションだから3個のコンポーネントを作ればいいんだ、ということにはなりません。というのもコンポーネント化し過ぎた場合、その分ソースコードでもコンポーネントが増えてしまうからです。基本的に再利用される期待があるものだけをコンポーネント化するという考え方がよいでしょう。

また、コンポーネントを突き詰めていくと、デザイナー領域に関わってきます。例えば、ラベルとコンポーネントをセットで1つのコンポーネントにするかどうかという議論。このような場合、サービス・プロダクトのUI/UXにおいてそのようなラベルとコンポーネントのセットをブランディングとして作っていくべきだという判断があれば、コンポーネント化して再利要素を高めたほうがよいかと思います。

そのため、Atomic Designを使っているサービスと相性がいいでしょうね。Storybookなどサポートになるツールも存在します。これを使えば、エンジニアとデザイナーがコンポーネントの一覧を共有することができます。

つまずきやすいポイント：コンポーネント間のやりとり

Vue.jsを始める際にコンポーネント間のやり取りでつまずく人が多い気がします。そこが最初のハードルとなるでしょう。

だいたいの内容は初心者向けの解説を読めば素直に理解できると思います。ところが、コンポーネントというものを理解して作ることができても、コンポーネント間でどのようにデータのやり取りするをするのかという部分でつまずくケースが多いように思います。

データのやり取りの仕方には、大きく分けて3種類（親コンポーネントが子コンポーネントに渡す、子コンポーネントのデータを親コンポーネントに渡す、並列の横のコンポーネントの兄弟関係のコンポーネントがデータを渡す）のやり方があります。それぞれの知識をつけておき、必要なときはどれを選択するのがベストなのか判断できるようになりましょう。

props：親コンポーネントが子コンポーネントに渡す

親から子にデータを渡す場合はpropsというものを使います。

例えば、単純に信号機のコンポーネントを作ったとします。緑、黄、赤色とあったときに親が点灯させる色の情報をサーバから受け取り、それをpropsで渡します。子コンポーネントは親から渡されたデータに応じて振る舞いが変わり、該当する色を点滅させます。

$emit：子コンポーネントが親コンポーネントに渡す

子から親にデータを渡す場合、$emitを使います。

このパターンは前述の住所や氏名などのフォームの例が該当します。複数の子コンポーネントに入力されたデータを最終的に親コンポーネントに集約し、すべてのデータをサーバに送ります。その際に、子コンポーネントではonChangeイベントなどのアクションや「次へ」ボタンなどのアクションで親コンポーネントにデータを$emitを利用して渡します。

store：兄弟関係のコンポーネントに渡す

兄弟関係のコンポーネントにデータを渡す場合にはstoreを介すのが一般的やり方です。

例えば、PCのチャットアプリのように、スレッドの一覧画面とチャットの詳細画面があるものを考えてみましょう。詳細画面で文字列を送ったり、送信日時が変更されると、それに応じて一覧画面の並びや最新メッセージの表示が更新されますよね。この場合はstoreという機能を利用してデータのやり取りを行います。

最後に：Vue.jsを学べば働き口も多い

Vue.jsの案件は、今とても多いという感覚があります。「Vue.js書ける人いませんか？」という依頼がかなり来ており、Vue.jsを学習しておくと将来に役立つかと思います。特にここ半年で増えてきてるように思います。

Vue.js日本ユーザグループで日本語ドキュメントを整備したり、日本語での情報発信を積極的にやってきたので、その成果が出てきたのだと思います。Vue Fes Japanも参加者が1300名ほど予定されていました。海外ではReactがメジャーで2番手なイメージなのですが、日本ではVue.jsの方が人気がある傾向にあります。

FLEXYのVue.jsのフリーランス案件情報

FLEXYでは外国人向けメディアサイトの設計～開発・運用案件をはじめアプリ開発支援など、自社プロダクト開発案件が多数あります。
週2日～など自身にあわせた働き方をしながらスキルアップも可能ですので、Vue.jsのフリーランス案件情報をご覧ください。

【React/Vue.js】データ統合分析ツールを提供する企業でプロダクトのフロントエンド開発支援（フルリモート・ビジネスタイム外可）

金融機関や官公庁向けBIツールを展開している企業様で、地方銀行の40%近くが同社ソリューションのお客様となっています。

■案件概要

• 職種：フロントエンドエンジニア
• 稼働日数：週3〜5日
• 報酬：〜80万円／月
• 勤務地：麻布十番
• リモート：可

■業務内容

Reactでのフロントエンド開発業務。

■必須要件

• Angular,Vue.js,Reactでの開発経験
• 中～大規模SPA構築経験

■歓迎要件

• Javaでの開発経験
• 業務システムの開発経験
• データマネジメント関連製品に携わってきた開発経験

Vue.js関連の求人を見てみる

案件のご紹介を希望される方は、FLEXYに登録（案件のご紹介）よりご応募ください。

【React.js/Angular】クラウド先端テクノロジーを使ったサービスを提供する企業で次世代クラウドAPIプラットフォームのフロントエンド開発支援（フルリモート可）

クラウド先端テクノロジーを使ったサービスを提供する企業です。Angularを使ったAPIプラットフォームの開発に携わっていただけます。

■案件概要

• 職種：フロントエンドエンジニア
• 稼働日数：週5日
• 報酬：〜80万円／月
• 勤務地：浜松町
• リモート：可

■業務内容

Angularを使ったフロントエンド開発。ウォーターフォール開発の案件となり、来夏カットオーバー予定です。

■必須要件

• Vue.js,React.js,AngularなどフロントエンドWebフレームワークを利用した設計、開発の経験が1年以上あること。
• チームの一員として主体的に開発できる方。
• GitHub等のソースコード管理ツールを用いたチーム開発の経験がある。

■歓迎要件

• Angularのコンポーネント設計、Store設計ができる。
• 小〜中規模チームでのテックリード経験がある。

Vue.js関連の求人を見てみる

案件のご紹介を希望される方は、FLEXYに登録（案件のご紹介）よりご応募ください。

【Vue/React】創造⼒で⼈類の可能性をひらく近未来クリエイティブカンパニーで自社プロダクトのフロントエンド開発支援（リモート可）

大阪・関西万博のプログラム共創パートナーに選ばれ、今後注目が集まる事が予想される企業様です。「没頭を生み出す。」の理念に基づき、クリエイティブを軸に様々な形でサービス提供しており、その中で培ったXR技術とAIによってユーザーに現実×仮想のデジタルツインな体験を提供するプラットフォームをリリース。今回そのサービスのCMSやAPI部分のフロントエンド開発に携わって頂きます。

■案件概要

• 職種：フロントエンドエンジニア
• 稼働日数：週3〜5日
• 報酬：〜80万円／月
• 勤務地：四条
• リモート：可

■募集背景

スピード感を持って成長していきたいフェーズだが、開発力強化の為の人材獲得に遅れが発生している。現在の組織体制やプロダクトのフェーズから育成などに割くリソースは確保が難しいため即戦力の人材にジョイン頂き、開発のコアメンバーとして長期的に携わってほしい。

■業務内容

• クライアントへ提供する、管理画面やCMS、ダッシュボードの開発
• QURIOSのエンジンの調整・改修や、新規機能開発

※エンドユーザー向けのXR体験やAI体験の開発については、チームに所属する専門のエンジニアが担当するので、経験必須ではありません。

■必須要件

• Webフロントエンド開発経験 2年以上
• Vue(Nuxt.js)、React(Next.js) などのフレームワークを用いた開発経験
• CMS開発経験
• API、SDK等を利用した開発経験
• XRやAIなどの最新テクノロジーへの興味関心

■歓迎要件

• プロダクト開発経験 / サービス運用・更新経験
• アジャイル開発・スクラム開発の経験
• BIツールを用いたダッシュボード開発経験
• GCPまたはAWSの知識
• 設計・仕様ドキュメント作成経験
• XRやAIに関連

Vue.js関連の求人を見てみる

案件のご紹介を希望される方は、FLEXYに登録（案件のご紹介）よりご応募ください。

【Vue.js】AIを活用した契約業務のDX推進プロダクトを提供する企業でフロントエンド開発支援(フルリモート)

この1年間で導入社数は約8倍と急速に成長を続け、日本を代表する大企業にも多く導入されているサービスをお持ちの企業様です。また業界でも圧倒的な機械学習テクノロジーのノウハウがあり、優秀なエンジニアが揃っている点で成長環境を求める方には大変おすすめです。ドキュメント文化と透明性を徹底した組織風土のため、職種の垣根を超えてチーム一丸となってプロダクトを磨き込むことができる点でもおすすめです。

■案件概要

• 職種：フロントエンドエンジニア
• 稼働日数：週4〜5日、ビジネスタイム以外の空き時間
• 報酬：〜100万円／月
• 勤務地：人形町
• リモート：可

■募集背景

サービス拡大に向けて開発エンジニアの正社員募集を続けているものの、事業拡大に採用が追いついておらず、一時的に優秀な業務委託エンジニアの方にご支援いただき、開発スピードを早めたいお考えです。
（正社員採用も行っておりますので、ご要望ございましたらご連絡くださいませ）

■業務内容

Vue.jsを使用したWebアプリケーションエンジニアとして、既存プロダクトの設計方針の決定及び新機能開発、既存機能の改修をお願いします。

• 新機能の開発
• 既存機能のパフォーマンス改善、バグフィックス
• リファクタリング
• テストの実施
• ドキュメントの作成

■必須要件

• Vue.jsを使用した開発経験

Vue.js関連の求人を見てみる

案件のご紹介を希望される方は、FLEXYに登録（案件のご紹介）よりご応募ください。

【Vue.js/ Nuxt.js/Ruby on Rails】AI旅行情報提案サービスのフルスタック開発支援(フルリモート・ビジネスタイム外可)

現在テレビ等でも紹介されている話題のプロダクトに関わることができます。短期ではありますが、スピード感を持った開発に携わりアウトプットを出せる案件となります。

■案件概要

• 職種：フロントエンドエンジニア
• 稼働日数：週2〜5日、ビジネスタイム以外の空き時間
• 報酬：〜70万円／月
• 勤務地：半蔵門
• リモート：可

■募集背景

AIパーソナル提案の実証実験を行い、2021年10月に正式リリースをした旅行情報提案サービスとなります。現在さらなる顧客体験の向上に向けて追加開発を実施するための追加募集となります。 ぜひご参画いただき、最先端の旅行体験を提供するサービスの開発をお願い致します。

■業務内容

自社サービスであるChatGPTを活用したAI旅行提案サービスのプロダクト開発エンジニアとしてフルスタック開発をお願いいたします。

■必須要件

• Vue.jsまたはNuxt.jsを用いた開発実務経験
• Ruby on Railsを用いた開発実務経験
• Git、Gitフロー、GitHubやGitLabを使った開発経験

■歓迎要件

• Nuxt.jsを用いた開発経験
• MySQLやElasticsearchなどの使用経験

Vue.js関連の求人を見てみる

案件のご紹介を希望される方は、FLEXYに登録（案件のご紹介）よりご応募ください。

ここでは、Vue.jsのフリーランス案件を紹介しました。Vue.jsは副業案件も豊富です。Vue.jsの副業を始めたい方は、始める前にどのような案件があるか・単価相場はいくらかを調べ、どのくらい稼げるのか知った状態で副業を始めることがおすすめです。

Vue.js関連記事

本記事と合わせてこちらの記事もご覧ください。

Vue.js関連CTOイベント記事

Vue.js、Go、Kotlinの技術顧問3名とCIOの対談記事です。それぞれのエキスパートのチームへの関わり方や、与えた影響などを語っていただきました。

こちらの記事では、JavaScriptをテーマにしたイベントでJavaScript（Angular,React,Vue）のエキスパートの方々に、進化し続ける技術や人材に関して語っていただきました。

まとめ

本記事では「Vue.js入門 基礎から実践アプリケーション開発まで」の執筆者である手島さんに、Vue.jsを学ぶ前に知っておいていただきたいポイントを解説いただきました。5つのポイントを押さえて効率的に学習し、人気のVue.jsエンジニアとして案件獲得に活かしましょう。

FLEXYはフリーランスや副業で活動されるエンジニア・CTO・技術顧問の方へ案件をご紹介するサービスです。お仕事をお探しの方はこちらをご覧ください。

案件のご紹介を希望される方は、FLEXYに登録（案件のご紹介）よりご応募ください。