やんまーのはてなブログ

Webアプリケーションを開発したい人

セレスのインターンシップ(ハッカソン)に参加した

2019/8/7-2019/8/9の3日間、株式会社セレスの開催するインターンシップに参加した。

インターンシップの内容はWebサービス開発のハッカソン。お題に合わせて3日間で企画からプレゼンまでを行った。

セレスとは

株式会社セレスは東京の用賀にオフィスを構えるインターネットメディア企業。「インターネットマーケティングを通じて豊かな世界を実現する」を経営理念に掲げ、多数のサービスを展開している。

国内最大級のポイントサイト「モッピー」をはじめとするモバイルサービス事業の他に、仮想通貨に関するフィナンシャルサービス事業も手掛ける。

作ったもの

今回のハッカソンのお題は「ユーザーが楽しくなるWebサービスをつくる」。 それに合わせて後述のアイデアソンを通して生まれたのが「お酒酒め」。

「お酒酒め」(おしゅしゅめ)とは、お酒に詳しくない人に向けて、新しいお酒に出会うことを支援するWebサービス。お酒をお勧め(お酒酒め)してくれることから名付けた。

お酒酒めスクリーンショット

開発の流れ

3daysのうち、1日目はアイデアソン、2,3日目はハッカソンを行った。

チームメンバーは自分を含め4人。フロントエンド、デザイン、データベース、バックエンドを区切りとして役割分割した。自分はフロントエンドとバックエンドを中心に作業した。

イデアソンと設計

シチュエーションゲーム^1を元に突飛な文章から「楽しく感じる状況」を探していき、ブレインストーミング^2を使ってアイデアを膨らませた。その後お題に合わせてターゲットを定めて具体化した。1日目終盤は時間があったのでアプリケーションの設計まで行った。

設計の際、機能が盛り沢山なことに気づく。もっともコアな機能(お酒を勧める)を残してバッサリと削除することにした。削った機能はお酒の記録や好みの絞り込み等の機能である。この選択にあとで助けられる。

ハッカソン - 開発

用意されたアプリケーションの土台を基に、2日間で前日に固めたアイデアを実装していく。 2日目に「ユーザーにお酒をおすすめする」ロジックとページ構成の大枠を制作、3日目は細かい所の修正とデザインを詰めた。

発表

イデアとビジネスデザイン、制作したアプリケーションを社員の方の前で発表した。お褒めの言葉をいただくことも、鋭い指摘をいただくこともあった。発表の準備に時間をとることができないながら、発表はそれなりにアプリケーションのことを説明できたと思う。

他チームの成果発表も聞くことができた。あるチームはページ数の多い構成に果敢に挑んでいたり、あるチームはコンセプトが奇抜だったりWebRTCで映像通信していたりしていた。すごい。盛り上がったなぁ。

振り返り

結果的に勝つことが出来たのだが、勝因は1日目に機能を絞ったことにあると思う。

3日間で出来ることは限られている。完成したサービスの機能としては他チームよりもシンプルだったが、機能の豊富さではなく制作した画面の完成度を高めることに注力した。デザインに手をかけたことや、UIの不具合を無くし動作の細かいところ詰めたことなど、この姿勢を評価していただけたようである。

Amazon Echo Show5 景品で頂いたEcho Show5。スマートスピーカーを買うタイミングを失っていたのでありがたい。

感じたこと

忙しい

ハッカソンは忙しい。時間がない。アプリケーションを短い時間で形にするのは結構大変だった。必要なタスクを絞り込み、限られた時間をどう使うかがとても重要になる。ハッカソン=ハック+マラソンらしいけれど、どちらかというと短距離走ではないか?と思った。

設計(共通認識)のポイントを抑える

チームで開発する上で、個人で作るときと違い明確にしておかなければならないポイントがいくつかあった。例えば通信仕様や、ページUI等である。今回は常に隣で作業していたから良かったものの、違う環境であったら更に大変であっただろう。実装に没頭していると認識がずれがちなので、時間を区切って進捗報告や相談、認識合わせを挟むことを意識した。

チーム開発の良さ

自分がコード書いてないのに、新しいページが追加されて動いてる。すごい。(小並感)

並行して作業を行えるだけでなく、設計方針や実装方法で詰まったときにすぐに相談できた。お互いの強みを出しあって開発することで、一人では詰まって時間が取られていただろうポイントをすぐ乗り越えられた気がした。

おわりに

メンバーとともに議論をしながらアプリケーションをつくるのは、面白いとともに刺激になる機会でした。チームのみんな、ありがとう。

そしてこのような機会を設けてくださり、開発をフォローしてくださった株式会社セレスの社員の方々、3日間とてもお世話になりました。ありがとうございました。


  • ^1: 「いつ」「誰が」「どこで」「何をした」をそれぞれカードに書き、他人のものと混ぜて新しい文章を作るゲームのこと。
  • ^2: チームで沢山のアイデアを出す手法。(wikipedia)

Nuxt.js(v2.9.2)とTypeScriptの開発環境を作る。

Nuxt.jsとTypeScriptで開発環境を作るときのまとめ。(2019/9/5時点)

お急ぎの方は、 記事中の作業を行ったものをnuxt.ts-templateとしてGitHubリポジトリに上げたので、cloneないしForkして使ってほしい。

目指すもの

create nuxt-app したときと同じ環境で、下記のものが使えること。 すぐにNuxt.jsとTypeScriptを用いて開発を始められる環境を構築する。

  • Nuxt.js v2.9.2
  • TypeScript
  • ESLint
  • nuxt-property-decorator

nuxt-property-decorator (vue-property-decorator)

Nuxt.jsとTypeScriptを組み合わせるときは、nuxt-property-decorator(vue-property-decorator)の利用が推奨されている。^1

もともとのNuxt.jsとは書き方が変わる。参考文献にいくつか載せてあるので、もともとの書き方と比較しながら慣れると良さそう。^2

今回は最後にインストールするので、一つ前のESLintまでで止まればこれを使わない環境も構築できる。

手順

大まかには次の流れで進む。 いくつかハマりどころがあったので、私の環境でうまく行った手順を残しておく。

(特にESLintに文句を言われることが多く、最初いきあたりばったりで進めていたら沢山のパッケージをインストールしてしまった。 この記事は、その後不要なものがあまり入らないようにやり直した内容の記録である。)

  1. yarn create nuxt-app
  2. TypeScriptを入れる
  3. vue-property-decoratorを入れる
  4. ESLintを入れる



1. create nuxt-app

Nuxt.jsで環境構築するときにお決まりのcreate-nuxt-app。 yarnだと、 $ yarn create nuxt-app hogehoge とする。

$ yarn create nuxt-app nuxt.ts-template
# yarn create v1.17.3
# create-nuxt-app v2.10.1

# 今回は次のように設定した
# Project name, Project description, Author name は適宜
# package manager : Yarn
# UI framework : None
# custom server framework : None (Recommended)
# Nuxt.js modules :
# test framework : None
# rendering mode : Universal (SSR)
# development tools :

$ cd nuxt.ts-template/
# 以下全てカレントディレクトリは移動しない。編集するファイル名もnuxt.ts-template/をカレントディレクトリとして表記する。

$ yarn dev
# 起動できることを確認。ブラウザからNuxt.jsのロゴが見えればオーケー。(以下の起動確認も同様。)



2. Install TypeScript

まず、TypeScriptに関するパッケージをインストールする。

$ yarn add -D @nuxt/typescript-build
$ yarn add @nuxt/typescript-runtime @nuxt/types
$ mv nuxt.config.js nuxt.config.ts
$ touch tsconfig.json

TypeScriptに合わせて以下の設定ファイルを2つ、ソースを3つ書き換える。

  • package.json
  • tsconfig.json (新たに作成)
  • nuxt.config.ts
  • index.vue
  • Logo.vue

./package.json

...
   "scripts": {
-    "dev": "nuxt",
-    "build": "nuxt build",
-    "start": "nuxt start",
-    "generate": "nuxt generate"
+    "dev": "nuxt-ts",
+    "build": "nuxt-ts build",
+    "start": "nuxt-ts start",
+    "generate": "nuxt-ts generate"
   },
...

./tsconfig.json

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "moduleResolution": "node",
    "lib": [
      "esnext",
      "esnext.asynciterable",
      "dom"
    ],
    "esModuleInterop": true,
    "allowJs": true,
    "sourceMap": true,
    "strict": true,
    "noEmit": true,
    "baseUrl": ".",
    "paths": {
      "~/*": [
        "./*"
      ],
      "@/*": [
        "./*"
      ]
    },
    "types": [
      "@types/node",
      "@nuxt/types"
    ]
  },
  "exclude": [
    "node_modules"
  ]
}

./nuxt.config.ts

+import {Configuration} from '@nuxt/types'

-export default {
+const nuxtConfig: Configuration = {
...
  buildModules: [
+      '@nuxt/typescript-build'
  ],
...
}
+module.exports = nuxtConfig

./pages/index.vue

-<script>
+<script lang="ts">

./components/Logo.vue

...
</template>
+
+<script lang="ts">
+import Vue from 'vue'
+export default Vue.extend({  
+})
+</script>
+
<style>
...
$ yarn dev
# TypeScriptで動くことを確認。



3. ESlint

ESLintと関連パッケージをインストールする。(今回はcreate nuxt-appでESLintをインストールしていないのでESLint自体もここでインストールする。)

$ yarn add eslint-config eslint
$ yarn add -D @typescript-eslint/eslint-plugin @typescript-eslint/parser @nuxtjs/eslint-config-typescript
$ touch .eslintrc.js

ESLintの設定を以下の3ファイルに記述する。

  • package.json
  • nuxt.config.ts
  • .eslintrc.js

package.json

...
  "scripts": {
    "dev": "nuxt-ts",
    "build": "nuxt-ts build",
    "start": "nuxt-ts start",
-    "generate": "nuxt-ts generate"
+    "generate": "nuxt-ts generate",
+    "lint": "eslint --ext .ts,.js,.vue --ignore-path .gitignore .",
+    "lint:fix": "eslint --ext .ts,.js,.vue --ignore-path .gitignore . --fix"
  },
...

nuxt.config.ts

...
  build: {
    /*
    ** You can extend webpack config here
    */
+    /*
    extend (config, ctx) {
    }
+   */
...

.eslintrc.js

module.exports = {
  plugins: ['@typescript-eslint'],
  parserOptions: {
    parser: '@typescript-eslint/parser'
  },
  extends: [
    '@nuxtjs/eslint-config-typescript'
  ],
  rules: {
    '@typescript-eslint/no-unused-vars': 'error'
  }
}
$ yarn lint:fix
$ yarn dev
# Lintが動いていることと、変わらず起動できることを確認。



4.nuxt-property-decorator

nuxt-property-decoratorをインストールする。(vue-property-decoratorでも良いかもしれない。)

$ yarn add nuxt-property-decorator

nuxt-property-decoratorに合わせて2ファイルを変更する。

  • tsconfig.json (デコレータの使用を宣言する。)
  • index.vue (デコレータを使った書き方に修正する。)

./tsconfig.json

...
    "compilerOptions": {
...
      "types": [
        "@types/node",
        "@nuxt/types"
-      ]
+      ],
+      "experimentalDecorators": true
    },
...

./pages/index.vue

...
<script lang="ts">
+import { Component, Vue } from 'vue-property-decorator'
import Logo from '~/components/Logo.vue'

-export default {
+@Component({
  components: {
    Logo
  }
-}
+})
+export default class Index extends Vue {
+}
</script>
...
$ yarn dev
# デコレータを使った表記での起動を確認。

お疲れさまでした。

参考

重要参考文献

  1. Qiita Nuxt.js 2.9でのTypeScript対応
  2. Nuxt TypeScript Setup

その他の参考文献

  1. Nuxt.js インストール ... yarn create nuxt-app について
  2. GitHub eslint-config ... eslint-configのセットアップ
  3. デコレータ | TypeScript 日本語ハンドブック | js STUDIO ... experimentalDecoratorsについて
  4. TypeScriptではじめるVueコンポーネント(vue-class-component)... vue-property-decorator(nuxt-property-decorator)を使った@Componentデコレータの書き方
  5. Nuxt.js+ExpressのプロジェクトをTypeScript化する ... nuxt-property-decoratorを使った@Componentデコレータの書き方
  6. はじめてのvue-property-decorator ... vue-property-decorator(nuxt-property-decorator)を使ったデコレータの書き方

About me

自己紹介

HN: やんまー

大学の情報系学科に所属。 Webに興味があり、主にフロントエンド(Vue.js等)を趣味で触ってる。

PCに関係ない趣味はスキューバダイビングで、海が好き。

今まで作ったもの

Play Queue (音楽再生Webアプリ)

音楽の連続再生を目的とした、Youtube再生プレイヤー。

Vue.jsをフロントエンドとして、Youtube data v3 API, Youtube Player APIを利用してYoutubeを再生する事ができる。 アプリケーション内に動的変更に向く独自の再生リストをもち、動画を再生しながらリストを編集できる。

Text2PDF

テキストファイルを基にPDFを生成するCUIコマンドラインツール。 Node.jsの標準ライブラリのみを用いてPDFを生成する。

筆文字ジェネレータ

入力した文字から毛筆で書いたような画像を生成するWebアプリケーション。 HTML Canvasで動いているのが大部分。 PHPが裏で動いている。

green-turtle

このブログに使っている静的サイトジェネレータ。 Nuxt.jsのgenerateモードを利用して動いている。 Gitで記事管理が可能な環境を構築した。

ブログで書くこと

以上の通りJavaScriptをよく書くので、これに関する内容の記事が多くなると思う。