M5GF

まったり開発ブログ

トップ > Vue.jsの勉強がてらブログを作るよ

Vue.jsの勉強がてらブログを作るよ

こんにちは久々のブログです。岐阜改めみやです。

そろそろjQueryでお茶を濁すのはやめて、本腰入れてフロントエンドを勉強しないとなあ…と、JavaScriptを勉強する機運が高まってきています。

いつも書いているRailsは英文のようにスラスラ書けるので書いていて楽しいのだけど、いざJSを書こうとすると手と思考が停止する。WebpackもやーんもajaxもCSS設計とかもいまいちわからない。フロントエンド苦手意識なんとかしなきゃ、、、

そんな中、株式会社イメジンのshuさん(@shujs1)からVue.jsの基礎の基礎を教えていただく機会がありました。vue-routerが思っていたよりなんとか理解できそうだったのと、HTML/CSS/JSを１つのファイル内で書ける単一ファイルコンポーネントが気に入ったので、Vue.jsからフロントエンドの勉強を始めてみることにしました

ブログ作る

勉強といえど、自分の場合は

  1. ググりながら雑に作ってみる
  2. 本を読んでいい感じの書き方を知る
  3. リファクタリング

が性に合っているようなので、さっそくVueで何か作ってみることにします

ちょうど写真載せたりヒカキンの話をしたりできるいい感じのブログが欲しいなーと思っていたところなので、今回の目標は実用に耐えうるSPAのいい感じなブログを作って使うにしましょう。

細かい目標として、

  • フロントエンドとサーバーサイド（CMS）は分離して、APIを使う
  • jsonに慣れる
  • 今回のCSS設計をきちんと説明できるようにする

も意識していきたいと思います。

 

やっていき

早速やっていきます。最近はDockerの勉強をしてきていたので、これも勉強がてらMac内を汚さずコンテナ内で完結するVueの開発環境を作りました。Dockerfileはこちらです。
こちらのコードを参考にしました。
Nuxt / Vue.js の開発環境をDockerでつくる | tackeyy.com

Dockerfile

FROM node:10.11.0-alpine
ENV LANG C.UTF-8

# Create app directory
RUN mkdir ./frontend
WORKDIR /frontend

# Set environment variables
ENV NODE_ENV development
ENV HOST 0.0.0.0
EXPOSE 9000

# Bundle app source
RUN yarn global add vue-cli
RUN yarn install

CMD ["/bin/sh"]

docker-compose.yml

version: '3'
services:
  cnr:
    build: .
    ports:
      - 9000:9000
    volumes:
      - .:/frontend
    stdin_open: true
    tty: true

そのあと npm install をして諸々ファイルを生成したのがこちらのリポジトリです。環境構築めっちゃ簡単なんだね。CNRは好きな曲の頭文字です。

github.com

一人開発ではあるけどブランチを切って開発して、プルリク出すタイミングくらいの頻度でブログを更新できればいいなあと思っています。

これから

まだどんなもんなのかなあというのが分かっていないのだけど、

  1. ひとまずブログっぽいビューを作ってみる
  2. CMSを用意して通信してみる
  3. ホスティングサービスにぶち込む

の流れでなんとかなるんじゃないかなあと思っています。軽く調べた限りだとButterCMSとNetlifyを使うのがモダンなのか。

ひとまずやっていきましょう。頑張るぞー！

10/20追記：続きです m5gf.hatenablog.com