VIVITABLOG

VIVITAで活躍するメンバーの情報発信サイト

デザイナーが手軽に Vue.js を使ったWebサイト開発環境を構築するまで。

こんにちは、今冨 ( @imatomix )です。

前回が仕事もせず遊んでるっぽかったので、 blog.vivita.io

今回は少し仕事っぽい内容です。

僕は本来デザイナーなのですが、VIVITAは(というかスタートアップはどこも)エンジニア不足のため、企画仕様を決めたり、コードを書いたり、マネジメントしたりと、職種問わずいろんなタスクを掛け持つことが多いです。なので省けるものは省いてなるべくロスは少なく、手軽にこなしたい。何より手軽さが大事なんです。

さて、今回は Web の話です。現在VIVITAでは世界展開に向けて自社サイトをリニューアルしようとしているのですが、サービスやプロダクト開発でエンジニアが足りてないので、当然ながらサイトを制作するエンジニアもいない。なのでデザイナーの僕が本業の合間に作っています。僕はこれまで Rails や Flask、Wordpress などやってきましたが、最近は専らVue や Nuxt + Express に落ち着いています。Vue はとても手軽で手っ取り早く、デザイナーが1人でアレコレするのにも向いています。

f:id:imatomix:20180611094825p:plain

というわけで、細かいことや難しいことは調べてもらうとして、ここではデザイナーにも Vue に興味を持ってもらえるように、Vue のインストールから web サイト開発環境を構築するまでの手軽さをアピールしてみます。。。できるかな。

Vue の インストール

jp.vuejs.org

(特にデザイナーは)難しいことは考えず素直に公式に従いましょう。Vue は公式の日本語ドキュメントも豊富なので、結局公式が一番手軽で近道です。 とはいえ、この時点でもいろいろ書いあるので、要点を絞ります。

CLI が手っ取り早い

github.com

結局はCLIです。手軽です。1コマンドで、Vue での開発環境を準備できるようになります。 上記リンク先のQuickStart にあるように、コンソールで以下のコマンドを実行して vue-cli をインストールします。

$ npm install -g @vue/cli

Vueプロジェクトの作成

コンソールで以下のコマンドを実行してプロジェクトを作成します。プロジェクトのディレクトリを作成し、そこに必要なライブラリや最低限のソースコードをインストールしてくれます。「プロジェクト名」は何でもいいです。

$ vue create プロジェクト名

すると、開発環境に関する細かい選択肢を提示されます。 今回はデフォルトの Babel*1 と ESLint*2 だけでなく、vue-router*3、vuex*4、CSS Pre-processor*5 が欲しいのでマニュアルで以下のように選択していきます。

f:id:imatomix:20180607205551p:plain f:id:imatomix:20180607210058p:plain f:id:imatomix:20180607210356p:plain f:id:imatomix:20180607210601p:plain f:id:imatomix:20180607211110p:plain f:id:imatomix:20180607211222p:plain f:id:imatomix:20180607211305p:plain

最後に「これらの設定をプリセットとして保存するか?」と聞かれます。保存しておくと次回、最初のプリセット選択のときにそれを選ぶだけで上記工程をショートカットできるのでよりお手軽です。

これでプロジェクト開発環境が作成されます。

起動

プロジェクト開発環境の作成が済んだら、早速ローカルで起動してみましょう。 コンソールから、作成したプロジェクトのディレクトリに移動して、開発サーバ起動コマンドを実行します。

$ cd プロジェクト名
$ npm run serve

これでローカルにサイトが立ち上がります。ブラウザを起動し、localhost:8080 へアクセスしてください。

f:id:imatomix:20180608001552p:plain

このようなテンプレートサイトが表示されます。

中身を確認

プロジェクト内のデータ構造をみてみます。

いろいろできてますが、src 以下 と public 以下以外は開発環境に関するライブラリや設定ファイルなので気にしない。ここでも触れません。

サイトを作っていく際は、主に src 以下を編集していきます。簡単な解説は以下の通り。

assets: 画像などのアセットデータ置き場

components: コンポーネント用 vue ファイル置き場

views: ビュー用 vue ファイル置き場

main.js : メイン

router.js:ルーティング

store.js:状態管理

ちょっといじってみる

src > views > Home.vue をテキストエディタで開きます。

f:id:imatomix:20180608153100p:plain

4行目

<HelloWorld msg="Welcome to Your Vue.js App"/>

<HelloWorld msg="Welcome to My App"/>

に書き換えて保存してみましょう。

f:id:imatomix:20180608153325p:plain

すると、特にブラウザでリロードする必要もなく、編集した箇所が反映されます。手軽ですね。

ビルドしてみる

先程起動したのは開発用のなので、今度は本番用にビルドしてみます。コンソールで以下のコマンドを実行します。

$ npm run build

dist というディレクトリが作成されます。

この中に必要なファイル一式が書き出されるので、それらをまるっと本番サーバにデプロイすればサイト公開となります。手軽ですね。

とりあえず、今回はここまで。また機会があればもっと詳しいことや凝ったこと書いていこうと思います。また、簡単なTipsは Nuxt.js で作った自分のサイトにも書いたりしてます。

imatomix.com

最後は手軽にメンバー募集

メンバー募集中です!VIVITAはこの夏エストニアにもVIVISTOPをオープンし、いよいよ世界展開へと規模拡大していく予定です。これまでのように仕事の合間に Web サイト作るというのも難しくなってくるし、デザインや構成ももっと高度にしていきたいです。一緒に(何なら主導して)開発してくれるメンバー募集中です!

recruit.jobcan.jp

*1:今どきのイケてるJS はまだ一般的なブラウザがサポートしきれてないので、サポートしている形式に変換してくれる

*2:JS の書き方におかしいところはないかチェックしてくれる

*3:ルーティング機能、リンクでサイト内ページを遷移する

*4:状態管理機能、いろんなところから状態を参照したり変更したりする、シングルトン的なもの

*5:cssを楽に書くためのもの