はじめに

フロントエンド開発、最近はやはりJSで書くのが基本だとは思うけどReactやAngularは少し敷居が高いのでVue.jsに手を出してみました。
とりあえず、自分へのメモの意味合でVue JSのCRUDアプリケーションのチュートリアルを書いてみます。CRUDが書ければあとは必要に応じて普通に拡張できるでしょうし。たぶん。

今回はAPIサイドをJavaのQuarkusで、フロントエンドをVue.jsで書いています。

サーバサイドをQuarkusで作成

プロジェクト作成

まずサーバサイドを作成します。Mavenでまずは以下のようにQuarkusプロジェクトを生成します。なお、mavenのバージョンが3.6.2より低い場合は事前に上げておくこと。

$ mvn io.quarkus:quarkus-maven-plugin:1.3.0.Final:create \
    -DprojectGroupId=crud \
    -DprojectArtifactId=crud-server \
    -DclassName="crud.ItemResource" \
    -Dpath="/items"

つづいて、必要なプラグインをインストール。今回はDB周りとJAX-RS周りを入れています。

$ cd crud-server/
$ ./mvnw quarkus:add-extension -Dextensions="quarkus-hibernate-orm-panache,quarkus
-jdbc-h2,quarkus-resteasy-jackson,quarkus-resteasy-jsonb"

ビルドの確認

$ ./mvnw compile quarkus:dev

永続化層の作成

まずは、application.propertiesの設定を変更。

# DB Config
quarkus.datasource.db-kind=h2
quarkus.datasource.jdbc.url=jdbc:h2:mem:
quarkus.hibernate-orm.database.generation = drop-and-create

続いてEntityの作成。getter/setterは長いので省略。

@Entity
public class Item {
    @Id
    @GeneratedValue(generator = "UUID")
    @GenericGenerator(
            name = "UUID",
            strategy = "org.hibernate.id.UUIDGenerator"
    )
    @Column(name = "id", updatable = false, nullable = false)
    private UUID id;
    private String name;
    private int price;

    public Item() { }

    public Item(UUID id, String name, int price) {
        this.id = id;
        this.name = name;
        this.price = price;
    }
    public UUID getId() {
        return id;
    }
    public void setId(UUID id) {
        this.id = id;
    }
- 略 -
}

最後にRepository.

@ApplicationScoped
public class ItemRepository implements PanacheRepository<Item> {

    public Item findById(UUID id) {
        return this.find("id", id).list().get(0);
    }

    public void update(UUID id, Item item) {
        var x = findById(id);
        x.setName(item.getName());
        x.setPrice(item.getPrice());
    }
}

エンドポイント作成

エンドポイントとしてJAX-RSで簡単なREST APIを作成する

@Path("/items")
@Consumes(MediaType.APPLICATION_JSON)
@Produces(MediaType.APPLICATION_JSON)
@Transactional
public class ItemResource {
    @Inject
    ItemRepository repository;

    @GET
    @Path("{id}")
    public Item get(@PathParam("id") UUID id) {
        return repository.findById(id);
    }
    @GET
    public List<Item> list() {
        return repository.listAll();
    }
    @POST
    public void create(Item item) {
        repository.persist(item);
    }
    @PUT
    @Path("{id}")
    public void update(@PathParam("id") UUID id, Item item) {
        repository.update(id, item);
    }
    @DELETE
    @Path("{id}")
    public void delete(@PathParam("id") UUID id) {
        repository.delete("id", id);
    }
}

CROSの設定

このままではポート番号が違うため例えローカルホストであってもCROSでエラーになる。
そのため、CROS対応に設定をapplication.propertiesに追加する. この例ではQuarkus側がポート3000, Vue.js側が8080で起動する想定。

本番環境では構成によっては同一サーバで動くと思うので、その場合はCROSに関する設定はしなくて良い。

# HTTP Config
quarkus.http.port=3000
quarkus.http.cors=true
quarkus.http.cors.origins=http://localhost:8080,http://172.19.27.127:8080
quarkus.http.cors.methods=GET,PUT,POST,DELETE

動作確認

サーバサイドの動作確認を行います。

$ ./mvnw compile quarkus:dev

crulでAPIを実行。

$ URL=http://localhost:3000/items
$ JSON_TYPE="Content-Type:application/json"

$ curl -XGET ${URL} -H $JSON_TYPE
[]

$ curl -XPOST ${URL} -H $JSON_TYPE -d '{"name" : "new item 02", "price" : 128}'
$ curl -XPOST ${URL} -H $JSON_TYPE -d '{"name" : "new item 02", "price" : 128}'
$ curl -XGET ${URL} -H $JSON_TYPE
[{"id":"57cda117-474a-48bf-85f3-8f83dd33dac9","name":"new item 01","price":64},{"id":"bc5cc9fd-0ba9-4b02-91e8-93fdf9ed59fd","name":"new item 02","price":128}]

$ curl -XPUT ${URL}/"57cda117-474a-48bf-85f3-8f83dd33dac9" -H $JSON_TYPE -d '{"name" : "new item 01", "price" : 1024}'
$ curl -XGET ${URL} -H $JSON_TYPE
[{"id":"bc5cc9fd-0ba9-4b02-91e8-93fdf9ed59fd","name":"new item 02","price":128},{"id":"57cda117-474a-48bf-85f3-8f83dd33dac9","name":"new item 01","price":1024}]

$ curl -XDELETE ${URL}/"bc5cc9fd-0ba9-4b02-91e8-93fdf9ed59fd" -H $JSON_TYPE
$ curl -XGET ${URL} -H $JSON_TYPE
[{"id":"57cda117-474a-48bf-85f3-8f83dd33dac9","name":"new item 01","price":1024}]

APIが適切に動作してるのが分かります。OpenAPIのUIで確認したいなら下記のURLから確認。
http://localhost:3000/swagger-ui/

クライアントサイドをVue.jsで作成

続いて本命のクライアントサイドアプリをVue.jsで実装します。

プロジェクトの作成

まずはvue-cliのインストールを行います。

$ yarn global add @vue/cli

続いてプロジェクトの作成。選択肢はマニュアルを選択してRouterを追加します。面倒なので今回はLintも外します。後の選択肢は好みで。

$ vue create crud-client
Vue CLI v4.2.3
? Please pick a preset: Manually select features
? Check the features needed for your project:
 ◉ Babel
 ◯ TypeScript
 ◯ Progressive Web App (PWA) Support
 ◉ Router
 ◯ Vuex
 ◯ CSS Pre-processors
 ◯ Linter / Formatter
 ◯ Unit Testing
 ◯ E2E Testing

開発サーバを立てて動作確認をします。

$ cd crud-client
$ yarn serve

ネットワークライブラリの追加

JS標準のFetch APIだと記述が冗長なのでaxiosを使います。

$ yarn add axios vue-axios

UIフレームワークの追加

UIフレームワークとしてBootstrapを入れます。合わせてリッチなアラートを提供するsweetalertもインストールします。

$ yarn add bootstrap vue-sweetalert2

Vue Configの設定をする

通常、本番環境やテスト環境と開発環境ではAPIの接続先が異なると思います。APIサーバをローカルに立てたりするので。
なので、開発サーバの設定を変更して、そこで接続先を書き換えます。ルートディレクトリにvue.config.jsを追加して以下のように修正します。

また、タイトルも同様にここで設定するので追加しておきます。

vue.config.js

module.exports = {
    devServer: {
        proxy: {
            "^/items": {
                target: "http://localhost:3000",
                ws: false,
                pathRewrite: {
                    "^/items": "/items"
                }
            }
        }
    },
    pages: {
        index: {
            entry: 'src/main.js',
            title: 'My CRUD Apps',
        }
    }
};

ライブラリのインポート

先ほど、yarnでインストールしたライブラリを読み込むためにmain.jsを以下のように修正します。

src/main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import axios from 'axios';
import VueAxios from 'vue-axios';
import VueSweetalert2 from 'vue-sweetalert2';
import '../node_modules/bootstrap/dist/css/bootstrap.min.css';
import '../node_modules/sweetalert2/dist/sweetalert2.min.css';

Vue.config.productionTip = false
Vue.use(VueSweetalert2);
Vue.use(VueAxios, axios);

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

CRUD画面を作る

本題のCRUD画面を作ります。メイン画面はviews配下に作るのが作法のようです。
とりあえず不要なファイルを消しましょう。

$ rm src/views/About.vue
$ rm src/views/Home.vue

作成画面

Script側で定義したデータモデルに対してリアクティブにテンプレート側の値が変更されます。
サーバ側でエラーが発生すればmessageにメッセージとして表示されるようにしています。
thisを多用しているので無名関数をアロー演算子ではなくfunctionで作成してしまうとスコープが変わって動かなくなるので注意。

また、作成完了時には一覧画面に遷移しますが、遷移後に作成完了のメッセージを一覧画面に表示する代わりにSweetAlertでメッセージを出しています。
これは、Vue.jsではJavaEEやRailsのFlush領域のように画面遷移に際して値をバックエンドで受け渡す仕組みが無いためエラーメッセージを同じUIで出すのは無駄に困難です。なので似たUXとなるリーズナブルなUIを選択しています。

src/views/Create.vue

<template>
  <div class="container">
    <div class="card">
      <div class="card-header">
        <h3>Add Item</h3>
      </div>
      <div class="card-body">
        <form v-on:submit.prevent="addItem">
          <div v-show="message" class="alert alert-danger">{{message}}</div>
          <div class="form-group">
            <label>Item Name:</label>
            <input type="text" class="form-control" v-model="item.name" />
          </div>
          <div class="form-group">
            <label>Item Price:</label>
            <input type="text" class="form-control" v-model="item.price" />
          </div>
          <div class="form-group">
            <input type="submit" class="btn btn-primary" value="Add Item" />
          </div>
        </form>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  components: {
    name: "AddItem"
  },
  data() {
    return {
      item: {},
      message: ""
    };
  },
  methods: {
    addItem() {
      let uri = "/items/";
      this.axios
        .post(uri, this.item)
        .then(() => {
          this.$swal({
            icon: "success",
            text: "Created Success!"
          });
          this.$router.push({ name: "Index" });
        })
        .catch(error => {
          this.message = `status: ${error.response.status}, message: ${error.response.data}`;
        });
    }
  }
};

一覧画面

一覧画面では画面を表示した際に呼ばれるcreatedメソッドの中で、一覧を取得するAPIを呼んでいます。
また、削除のAPIコールと編集への遷移も行っています。

src/views/Index.vue

<template>
  <div>
    <h1>Items</h1>

    <table class="table table-hover">
      <thead>
        <tr>
          <td>ID</td>
          <td>Item Name</td>
          <td>Item Price</td>
          <td>Actions</td>
        </tr>
      </thead>

      <tbody>
        <tr v-for="item in items" :key="item._id">
          <td>{{ item.id }}</td>
          <td>{{ item.name }}</td>
          <td>{{ item.price }}</td>
          <td>
            <router-link :to="{name: 'Edit', params: { id: item.id }}" class="btn btn-primary">Edit</router-link>
          </td>
          <td>
            <button class="btn btn-danger" v-on:click="deleteItem(item.id)">Delete</button>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: []
    };
  },
  created: function() {
    this.fetchItems();
  },
  methods: {
    fetchItems() {
      let uri = "/items";
      this.axios.get(uri).then(response => {
        this.items = response.data;
      });
    },
    deleteItem(id) {
      let uri = "/items/" + id;
      this.axios.delete(uri).then(() => {
        this.fetchItems();
      });
    }
  }
};
</script>

編集画面

編集画面は基本的に作成画面と同様です。違いはサーバサイドにIDで値を問い合わせてるかくらいですね。

src/views/Edit.vue

<template>
  <div class="container">
    <div class="card">
      <div class="card-header">
        <h3>Edit Item</h3>
      </div>
      <div class="card-body">
        <form v-on:submit.prevent="updateItem">
          <div v-show="message" class="alert alert-danger">{{message}}</div>
          <div class="form-group">
            <label>Item Name:</label>
            <input type="text" class="form-control" v-model="item.name" />
          </div>
          <div class="form-group">
            <label>Item Price:</label>
            <input type="text" class="form-control" v-model="item.price" />
          </div>
          <div class="form-group">
            <input type="submit" class="btn btn-primary" value="Update Item" />
          </div>
        </form>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      item: {},
      message: ""
    };
  },
  created: function() {
    this.getItem();
  },
  methods: {
    getItem() {
      let uri = "/items/" + this.$route.params.id;
      this.axios.get(uri).then(response => {
        this.item = response.data;
      });
    },
    updateItem() {
      let uri = "/items/" + this.$route.params.id;
      this.axios.put(uri, this.item).then(() => {
        this.$swal({
          icon: "success",
          text: "Updated Success!"
        });
        this.$router.push({ name: "Index" });
      });
    }
  }
};
</script>

メインテンプレートの変更

App.vueを変更してメインのテンプレートを変更します。

src/App.vue

<template>
  <div id="app" class="container">
    <nav class="navbar navbar-expand-sm bg-light">
      <ul class="navbar-nav">
        <li class="nav-item">
          <router-link :to="{ name: 'Create' }" class="nav-link">Add Item</router-link>
        </li>
        <li class="nav-item">
          <router-link :to="{ name: 'Index' }" class="nav-link">All Items</router-link>
        </li>
      </ul>
    </nav>
    <transition name="fade">
      <div class="gap">
        <router-view></router-view>        
      </div>
    </transition>
  </div>
</template>

<script>

export default {
}
</script>

<style>
    .fade-enter-active, .fade-leave-active {
      transition: opacity .5s
    }
    .fade-enter, .fade-leave-active {
      opacity: 0
    }
    .gap {
      margin-top: 50px;
    }
</style>

ルーティングの変更

先ほど作成した画面をルーティングに登録するためにsrc/router/index.jsを修正します。

src/router/index.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import Create from '../views/Create.vue'
import Edit from '../views/Edit.vue'
import Index from '../views/Index.vue'

Vue.use(VueRouter)

const routes = [
  {
    name: 'Index',
    path: '/',
    component: Index
  },
  {
    name: 'Create',
    path: '/create',
    component: Create
  },
  {
    name: 'Edit',
    path: '/edit',
    component: Edit
  }
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router

まとめ

とりあえずVue.jsとJavaで作ったAPIでCRUDを実現することができました。
正直、そこまでスケーラビリティを求めないならアプリではPHPやJFR、あるいはRailsで作った方が楽じゃないかの疑惑も拭えないですが、

次はログイン機能あたりを実装してみたいと思います。

それでは、Happy Hacking!

参考

• 第２回 – サンプル作成したVue.jsのプロジェクト解析

はじめに

フロントエンド開発、最近はやはりJSで書くのが基本だとは思うけどReactやAngularは少し敷居が高いのでVue.jsに手を出してみました。
とりあえず、自分へのメモの意味合でVue JSのCRUDアプリケーションのチュートリアルを書いてみます。CRUDが書ければあとは必要に応じて普通に拡張できるでしょうし。たぶん。

今回はAPIサイドをJavaのQuarkusで、フロントエンドをVue.jsで書いています。

サーバサイドをQuarkusで作成

プロジェクト作成

まずサーバサイドを作成します。Mavenでまずは以下のようにQuarkusプロジェクトを生成します。なお、mavenのバージョンが3.6.2より低い場合は事前に上げておくこと。

$ mvn io.quarkus:quarkus-maven-plugin:1.3.0.Final:create \
    -DprojectGroupId=crud \
    -DprojectArtifactId=crud-server \
    -DclassName="crud.ItemResource" \
    -Dpath="/items"

つづいて、必要なプラグインをインストール。今回はDB周りとJAX-RS周りを入れています。

$ cd crud-server/
$ ./mvnw quarkus:add-extension -Dextensions="quarkus-hibernate-orm-panache,quarkus
-jdbc-h2,quarkus-resteasy-jackson,quarkus-resteasy-jsonb"

ビルドの確認

$ ./mvnw compile quarkus:dev

永続化層の作成

まずは、application.propertiesの設定を変更。

# DB Config
quarkus.datasource.db-kind=h2
quarkus.datasource.jdbc.url=jdbc:h2:mem:
quarkus.hibernate-orm.database.generation = drop-and-create

続いてEntityの作成。getter/setterは長いので省略。

@Entity
public class Item {
    @Id
    @GeneratedValue(generator = "UUID")
    @GenericGenerator(
            name = "UUID",
            strategy = "org.hibernate.id.UUIDGenerator"
    )
    @Column(name = "id", updatable = false, nullable = false)
    private UUID id;
    private String name;
    private int price;

    public Item() { }

    public Item(UUID id, String name, int price) {
        this.id = id;
        this.name = name;
        this.price = price;
    }
    public UUID getId() {
        return id;
    }
    public void setId(UUID id) {
        this.id = id;
    }
- 略 -
}

最後にRepository.

@ApplicationScoped
public class ItemRepository implements PanacheRepository<Item> {

    public Item findById(UUID id) {
        return this.find("id", id).list().get(0);
    }

    public void update(UUID id, Item item) {
        var x = findById(id);
        x.setName(item.getName());
        x.setPrice(item.getPrice());
    }
}

エンドポイント作成

エンドポイントとしてJAX-RSで簡単なREST APIを作成する

@Path("/items")
@Consumes(MediaType.APPLICATION_JSON)
@Produces(MediaType.APPLICATION_JSON)
@Transactional
public class ItemResource {
    @Inject
    ItemRepository repository;

    @GET
    @Path("{id}")
    public Item get(@PathParam("id") UUID id) {
        return repository.findById(id);
    }
    @GET
    public List<Item> list() {
        return repository.listAll();
    }
    @POST
    public void create(Item item) {
        repository.persist(item);
    }
    @PUT
    @Path("{id}")
    public void update(@PathParam("id") UUID id, Item item) {
        repository.update(id, item);
    }
    @DELETE
    @Path("{id}")
    public void delete(@PathParam("id") UUID id) {
        repository.delete("id", id);
    }
}

CORS対応のためにいくつか設定をapplication.propertiesに追加する. この例ではQuarkus側がポート3000, Vue.js側が8080で起動する想定。

本番完了では構成によってはCORSは起こらないので設定不要。

# HTTP Config
quarkus.http.port=3000
quarkus.http.cors=true
quarkus.http.cors.origins=http://localhost:8080,http://172.19.27.127:8080
quarkus.http.cors.methods=GET,PUT,POST,DELETE

動作確認。

$ ./mvnw compile quarkus:dev

crulでAPIを実行。

$ URL=http://localhost:3000/items
$ JSON_TYPE="Content-Type:application/json"

$ curl -XGET ${URL} -H $JSON_TYPE
[]

$ curl -XPOST ${URL} -H $JSON_TYPE -d '{"name" : "new item 02", "price" : 128}'
$ curl -XPOST ${URL} -H $JSON_TYPE -d '{"name" : "new item 02", "price" : 128}'
$ curl -XGET ${URL} -H $JSON_TYPE
[{"id":"57cda117-474a-48bf-85f3-8f83dd33dac9","name":"new item 01","price":64},{"id":"bc5cc9fd-0ba9-4b02-91e8-93fdf9ed59fd","name":"new item 02","price":128}]

$ curl -XPUT ${URL}/"57cda117-474a-48bf-85f3-8f83dd33dac9" -H $JSON_TYPE -d '{"name" : "new item 01", "price" : 1024}'
$ curl -XGET ${URL} -H $JSON_TYPE
[{"id":"bc5cc9fd-0ba9-4b02-91e8-93fdf9ed59fd","name":"new item 02","price":128},{"id":"57cda117-474a-48bf-85f3-8f83dd33dac9","name":"new item 01","price":1024}]

$ curl -XDELETE ${URL}/"bc5cc9fd-0ba9-4b02-91e8-93fdf9ed59fd" -H $JSON_TYPE
$ curl -XGET ${URL} -H $JSON_TYPE
[{"id":"57cda117-474a-48bf-85f3-8f83dd33dac9","name":"new item 01","price":1024}]

APIが適切に動作してるのが分かります。

クライアントサイドをVue.jsで作成

続いて本命のクライアントサイドアプリをVue.jsで実装します。

プロジェクトの作成

まずはvue-cliのインストールを行います。

$ yarn global add @vue/cli

続いてプロジェクトの作成。選択肢はマニュアルを選択してRouterを追加します。面倒なので今回はLintも外します。後の選択肢は好みで。

$ vue create crud-client
Vue CLI v4.2.3
? Please pick a preset: Manually select features
? Check the features needed for your project:
 ◉ Babel
 ◯ TypeScript
 ◯ Progressive Web App (PWA) Support
 ◉ Router
 ◯ Vuex
 ◯ CSS Pre-processors
 ◯ Linter / Formatter
 ◯ Unit Testing
 ◯ E2E Testing

開発サーバを立てて動作確認をします。

$ cd crud-client
$ yarn serve

ネットワークライブラリの追加

JS標準のFetch APIだと記述が冗長なのでaxiosを使います。

$ yarn add axios vue-axios

UIフレームワークの追加

UIフレームワークとしてBootstrapを入れます。合わせてリッチなアラートを提供するsweetalertもインストールします。

$ yarn add bootstrap vue-sweetalert2

Vue Configの設定をする

通常、本番環境やテスト環境と開発環境ではAPIの接続先が異なると思います。APIサーバをローカルに立てたりするので。
なので、開発サーバの設定を変更して、そこで接続先を書き換えます。ルートディレクトリにvue.config.jsを追加して以下のように修正します。

また、タイトルも同様にここで設定するので追加しておきます。

vue.config.js

module.exports = {
    devServer: {
        proxy: {
            "^/items": {
                target: "http://localhost:3000",
                ws: false,
                pathRewrite: {
                    "^/items": "/items"
                }
            }
        }
    },
    pages: {
        index: {
            entry: 'src/main.js',
            title: 'My CRUD Apps',
        }
    }
};

ライブラリのインポート

先ほど、yarnでインストールしたライブラリを読み込むためにmain.jsを以下のように修正します。

src/main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import axios from 'axios';
import VueAxios from 'vue-axios';
import VueSweetalert2 from 'vue-sweetalert2';
import '../node_modules/bootstrap/dist/css/bootstrap.min.css';
import '../node_modules/sweetalert2/dist/sweetalert2.min.css';

Vue.config.productionTip = false
Vue.use(VueSweetalert2);
Vue.use(VueAxios, axios);

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

CRUD画面を作る

本題のCRUD画面を作ります。メイン画面はviews配下に作るのが作法のようです。
とりあえず不要なファイルを消しましょう。

$ rm src/views/About.vue
$ rm src/views/Home.vue

作成画面

Script側で定義したデータモデルに対してリアクティブにテンプレート側の値が変更されます。
サーバ側でエラーが発生すればmessageにメッセージとして表示されるようにしています。
thisを多用しているので無名関数をアロー演算子ではなくfunctionで作成してしまうとスコープが変わって動かなくなるので注意。

また、作成完了時には一覧画面に遷移しますが、遷移後に作成完了のメッセージを一覧画面に表示する代わりにSweetAlertでメッセージを出しています。
これは、Vue.jsではJavaEEやRailsのFlush領域のように画面遷移に際して値をバックエンドで受け渡す仕組みが無いためエラーメッセージを同じUIで出すのは無駄に困難です。なので似たUXとなるリーズナブルなUIを選択しています。

src/views/Create.vue

<template>
  <div class="container">
    <div class="card">
      <div class="card-header">
        <h3>Add Item</h3>
      </div>
      <div class="card-body">
        <form v-on:submit.prevent="addItem">
          <div v-show="message" class="alert alert-danger">{{message}}</div>
          <div class="form-group">
            <label>Item Name:</label>
            <input type="text" class="form-control" v-model="item.name" />
          </div>
          <div class="form-group">
            <label>Item Price:</label>
            <input type="text" class="form-control" v-model="item.price" />
          </div>
          <div class="form-group">
            <input type="submit" class="btn btn-primary" value="Add Item" />
          </div>
        </form>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  components: {
    name: "AddItem"
  },
  data() {
    return {
      item: {},
      message: ""
    };
  },
  methods: {
    addItem() {
      let uri = "/items/";
      this.axios
        .post(uri, this.item)
        .then(() => {
          this.$swal({
            icon: "success",
            text: "Created Success!"
          });
          this.$router.push({ name: "Index" });
        })
        .catch(error => {
          this.message = `status: ${error.response.status}, message: ${error.response.data}`;
        });
    }
  }
};

一覧画面

一覧画面では画面を表示した際に呼ばれるcreatedメソッドの中で、一覧を取得するAPIを呼んでいます。
また、削除のAPIコールと編集への遷移も行っています。

src/views/Index.vue

<template>
  <div>
    <h1>Items</h1>

    <table class="table table-hover">
      <thead>
        <tr>
          <td>ID</td>
          <td>Item Name</td>
          <td>Item Price</td>
          <td>Actions</td>
        </tr>
      </thead>

      <tbody>
        <tr v-for="item in items" :key="item._id">
          <td>{{ item.id }}</td>
          <td>{{ item.name }}</td>
          <td>{{ item.price }}</td>
          <td>
            <router-link :to="{name: 'Edit', params: { id: item.id }}" class="btn btn-primary">Edit</router-link>
          </td>
          <td>
            <button class="btn btn-danger" v-on:click="deleteItem(item.id)">Delete</button>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: []
    };
  },
  created: function() {
    this.fetchItems();
  },
  methods: {
    fetchItems() {
      let uri = "/items";
      this.axios.get(uri).then(response => {
        this.items = response.data;
      });
    },
    deleteItem(id) {
      let uri = "/items/" + id;
      this.axios.delete(uri).then(() => {
        this.fetchItems();
      });
    }
  }
};
</script>

編集画面

編集画面は基本的に作成画面と同様です。違いはサーバサイドにIDで値を問い合わせてるかくらいですね。

src/views/Edit.vue

<template>
  <div class="container">
    <div class="card">
      <div class="card-header">
        <h3>Edit Item</h3>
      </div>
      <div class="card-body">
        <form v-on:submit.prevent="updateItem">
          <div v-show="message" class="alert alert-danger">{{message}}</div>
          <div class="form-group">
            <label>Item Name:</label>
            <input type="text" class="form-control" v-model="item.name" />
          </div>
          <div class="form-group">
            <label>Item Price:</label>
            <input type="text" class="form-control" v-model="item.price" />
          </div>
          <div class="form-group">
            <input type="submit" class="btn btn-primary" value="Update Item" />
          </div>
        </form>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      item: {},
      message: ""
    };
  },
  created: function() {
    this.getItem();
  },
  methods: {
    getItem() {
      let uri = "/items/" + this.$route.params.id;
      this.axios.get(uri).then(response => {
        this.item = response.data;
      });
    },
    updateItem() {
      let uri = "/items/" + this.$route.params.id;
      this.axios.put(uri, this.item).then(() => {
        this.$swal({
          icon: "success",
          text: "Updated Success!"
        });
        this.$router.push({ name: "Index" });
      });
    }
  }
};
</script>

メインテンプレートの変更

App.vueを変更してメインのテンプレートを変更します。

src/App.vue

<template>
  <div id="app" class="container">
    <nav class="navbar navbar-expand-sm bg-light">
      <ul class="navbar-nav">
        <li class="nav-item">
          <router-link :to="{ name: 'Create' }" class="nav-link">Add Item</router-link>
        </li>
        <li class="nav-item">
          <router-link :to="{ name: 'Index' }" class="nav-link">All Items</router-link>
        </li>
      </ul>
    </nav>
    <transition name="fade">
      <div class="gap">
        <router-view></router-view>        
      </div>
    </transition>
  </div>
</template>

<script>

export default {
}
</script>

<style>
    .fade-enter-active, .fade-leave-active {
      transition: opacity .5s
    }
    .fade-enter, .fade-leave-active {
      opacity: 0
    }
    .gap {
      margin-top: 50px;
    }
</style>

ルーティングの変更

先ほど作成した画面をルーティングに登録するためにsrc/router/index.jsを修正します。

src/router/index.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import Create from '../views/Create.vue'
import Edit from '../views/Edit.vue'
import Index from '../views/Index.vue'

Vue.use(VueRouter)

const routes = [
  {
    name: 'Index',
    path: '/',
    component: Index
  },
  {
    name: 'Create',
    path: '/create',
    component: Create
  },
  {
    name: 'Edit',
    path: '/edit',
    component: Edit
  }
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router

まとめ

とりあえずVue.jsとJavaで作ったAPIでCRUDを実現することができました。
正直、そこまでスケーラビリティを求めないならアプリではPHPやJFR、あるいはRailsで作った方が楽じゃないかの疑惑も拭えないですが、

次はログイン機能あたりを実装してみたいと思います。

それでは、Happy Hacking!

参考

• 第２回 – サンプル作成したVue.jsのプロジェクト解析

概要

「Web VR（A-Framee）のボタンを押すと、obnizの画面にメッセージが表示される」

というものが作りたくて奮闘しました
https://qiita.com/kmaepu/items/55689772aa41bd5d8433
こちらの記事ではobnizとの連携まで至りませんでした。

というのをTwitterにつぶやいた所、中の人からアドバイス頂き、実現することができました！
ありがとうございます。

実際の動き

少し見づらいですが、PC画面上のボタンを押すと、obnizの液晶画面に文字が映し出されます。

やりたかったことができた！

Web VR上のボタンを押すとobnizの画面にメッセージが表示される！#obniz pic.twitter.com/MtTR3wpVCw

— まえぷー@出窓菜園ティスト (@kmaepu) June 4, 2020

ソースコード解説

前回の記事にあったところとの差分を抜き出すと次の箇所になります。

let obniz = new Obniz("obniz_id");  // obniz idを入力する
  let connected = false;
  obniz.onconnect =  async function () {
    console.log("Connect obniz");
    connected = true;
  }
  obniz.onclose = async function () {
    connected = false;
  }

  async function handlerClick(event) {
    console.log('handlerClick');
    console.log(event);
    event.target.object3D.position.z -= 0.5;

    if (connected) {
      obniz.display.clear();
      obniz.display.print("3D A-Frame");
      obniz.display.print("　↑↓");
      obniz.display.print("obniz");
    }
  }

何が原因だったかというと、obnizのconnectはscriptの走った最初だけ実行し、それ以降に何度もconnnectしようとしても動かないとのことです。

function内で何度もconnnectしちゃいけなかったのか！

<!DOCTYPE html>
<html>

<head>
  <title>Hello, WebVR! • A-Frame</title>
  <meta name="description" content="Hello, WebVR! • A-Frame">
  <script src="https://aframe.io/releases/1.0.4/aframe.min.js"></script>

</head>

<body>
<a-scene>
  <!--背景画像-->
  <a-sky src="https://aframe.io/aframe/examples/boilerplate/panorama/puydesancy.jpg" rotation="0 -130 0"></a-sky>
  <!--仮想ボタン-->
  <a-box color="#EEEEEE" position="0 2 -3" height="2" width="2"></a-box>
  <a-box color="#C0C0C0" position="0 2 -2.5" height="0.5" width="0.5" onclick="handlerClick(event)"
         onmouseenter="handlerMouseEnter(event)" onmouseleave="handlerMouseLeave(event)">
    <a-animation attribute="scale" to="-3.5 -5 2" direction="alternate" dur="2000" repeat="indefinite"
                 easing="linear">
    </a-animation>
  </a-box>
  <!--足もとのブロック-->
  <a-box color="#99FFFF" position="0 0 0" height="2" width="2"></a-box>
  <!--自分の視点-->
  <a-camera>
    <a-cursor></a-cursor>
  </a-camera>
</a-scene>

<script src="https://unpkg.com/obniz@3.5.0/obniz.js" crossorigin="anonymous"></script>
<script>
  let obniz = new Obniz("obniz_id");  // obniz idを入力する
  let connected = false;
  obniz.onconnect =  async function () {
    console.log("Connect obniz");
    connected = true;
  }
  obniz.onclose = async function () {
    connected = false;
  }

  async function handlerClick(event) {
    console.log('handlerClick');
    console.log(event);
    event.target.object3D.position.z -= 0.5;

    if (connected) {
      obniz.display.clear();
      obniz.display.print("3D A-Frame");
      obniz.display.print("　↑↓");
      obniz.display.print("obniz");
    }
  }

  function handlerMouseEnter(event) {
    console.log('handlerMouseEnter');
    console.log(event);
  }

  function handlerMouseLeave(event) {
    console.log('handlerMouseLeave');
    console.log(event);
  }
</script>

</body>

</html>

背景

チャットアプリ作成を基準とし、サーバー⇔ブラウザ間でのWebSocket通信の記事を書いた。
サーバーをJava、クライアントをjavascriptで実装。

[ソケット通信に関する過去記事]
・JavaとJavaScriptでwebブラウザとのソケット通信①
・JavaとJavaScriptでwebブラウザとのソケット通信②

今回はチャットアプリを改造しつつ、『JSONデータの取扱方法』について学んでいく。
また、『ソケット通信でのJSONデータの送受信』についても学ぶ。

目的

1. Java、JavaScriptでのJSONの扱い方法を学ぶ。
2. Webソケット通信においてJSONでのデータの送受信方法を学ぶ。
3. JSONを用いてWebソケット通信の複数パスを実現する。

前提

この記事では主にJSONの扱い方を中心に記述していく。
ソケット通信についての解説は過去記事やググったページを参考にしてほしい。
⇒ サーバープログラムはJava、クライアントプログラムはJavaScriptで実装。

JSONとは

http://www.tohoho-web.com/ex/json.html
例：{ "name": "Tanaka", "age": 26 }
連想配列のような形で値を保持しているもの。
要はただの文字列と考えると楽に理解することができる。(本当は違うけど)
詳細は割愛。

実践内容

1. JavaScriptでJSONデータの取り扱い (エンコード、デコード)
2. JavaでJSONデータの取り扱い (エンコード、デコード)
3. ソケット通信におけるJSONデータの送受信方法
4. JSON送受信を利用した複数パスのチャットアプリ作成

1. JavaScriptでJSONデータの取り扱い

JavaScriptでは容易にJSONデータを扱うことができる。

エンコード

オブジェクト ⇒ JSON
JSON.stringify()メソッドを使用する。

使用例

var obj = {
    name: '太郎',
    age: 30,
    area: 'Tokyo'
}
var json = JSON.stringify(obj);
console.log(json);

実行結果

{"name":"Taro Tanaka","age":30}

1. 変数objに連想配列の形式で値を代入。(オブジェクトの作成)
2. JSON.stringify(obj)を用いてエンコードし変数jsonに代入。(JSONへ変換)
3. console.log(json)でJSONデータをコンソールに表示。

実行結果を見ると、連想配列形式のオブジェクトがJSON形式に変換されていることが分かる。
⇒ キーや文字列は「" "」で囲われている。数値は裸のまま。

デコード

JSON ⇒ オブジェクト
JSON.parse()メソッドを使用する。

使用例

var obj1 = {
        name: '太郎',
        age: 30,
        area: 'Tokyo'
    }
var json = JSON.stringify(obj1);
//-----ここまでJSONデータの準備-----
var obj2 = JSON.parse(json);
console.log(obj2);
console.log(obj2.name);

実行結果

{name: "太郎", age: 30, area: "Tokyo"}
太郎

1. 変数obj1に連想配列の形式で値を代入。(オブジェクトの作成)
2. JSON.stringify(obj1)を用いてエンコードし変数jsonに代入。(JSONへ変換)
   ----------ここまでJSONデータの準備 (前項のエンコードと同様)----------
3. JSON.parse(json)を用いてデコードし変数obj2に代入。(オブジェクトへ変換)
4. console.log(obj2)でオブジェクトをコンソールに表示。
5. obj2.～で各プロパティにもアクセス可能。

実行結果を見ると、JSONデータがオブジェクトに変換されていることが分かる。
obj1(オブジェクト) ⇒ json(JSON) ⇒ obj2(オブジェクト)

2. JavaでJSONデータの取り扱い

Javaのオブジェクトはクラスを指し、JavaScriptのように簡単に作成できない。
JSONとオブジェクトを変換する場合、事前にJSONの変数に対応したプロパティを持つクラスを作成しておく必要がある。

JavaでJSONを扱うなら、外部ライブラリを使用することを推奨。
⇒ Java標準APIにもJSONを扱うものは用意されているが、かなり手間がかかる。

JSONを扱う外部ライブラリは以下のものが有名。

• Jackson
• GSON
• JSONIC
• JSON in Java　などなど

基本の利用方法は似たようなものだが、今回は「Jackson」を使用する。
他ライブラリの使用方法や外部ライブラリの適用方法は、参考ページを見るか適宜ググってほしい。

エンコード

オブジェクト ⇒ JSON
エンコードにはObjectMapperクラスのwriteValueAsString()メソッドを使用する。

使用方法

ObjectMapper mapper = new ObjectMapper();
String json = mapper.writeValueAsString(オブジェクトインスタンス);

使用例

import java.io.IOException;
import com.fasterxml.jackson.databind.ObjectMapper;

//JSONに変換するプロパティを持つクラス
class Info {
    public String name = "Taro Tanaka";
    public int age = 30;
}

//エンコードを実行するクラス
public class Main {
    public static void main(String[] args) {
        Info info = new Info();//JSONへ変換するクラスをインスタンス化
        ObjectMapper mapper = new ObjectMapper();//ObjectMapperクラスのインスタンスを作成
        try {
            //writeValueAsString()メソッドでエンコード実施
            String script = mapper.writeValueAsString(info);
            System.out.println(script);
        } catch (IOException e) {
            e.printStackTrace();
        }
    }
}

実行結果

{"name":"Taro Tanaka","age":30}

1. InfoクラスにてJSONに変換するためのプロパティを作成する。
2. エンコードを実行するMainクラスを作成。
3. Info info = new Info()にてJSONに変換するオブジェクトをインスタンス化。
4. ObjectMapper mapper = new ObjectMapper()にてObjectMapperクラスをインスタンス化。
5. mapper.writeValueAsString(info)にてオブジェクトからJSONに変換。
   このとき、try,catchでのエラー対応が必要。
6. System.out.println(script)でJSONデータをコンソールに出力。

実行結果を見ると、オブジェクトクラスがJSON形式に変換されていることが分かる。
各プロパティの変数名と値がペアとなって格納されている。

デコード

JSON ⇒ オブジェクト
デコードにはObjectMapperクラスのreadValue()メソッドを使用する。

使用方法

ObjectMapper mapper = new ObjectMapper();
mapper.readValue(JSONデータ,オブジェクトクラス.class);

使用例

import java.io.IOException;
import com.fasterxml.jackson.databind.ObjectMapper;

//JSONから変換されるプロパティを持つクラス
class Info {
    public String name;
    public int age;
}

//デコードを実行するクラス
public class Main {
    public static void main(String[] args) {
        String script = "{ \"name\":\"Taro Tanaka\", \"age\":30}";//文字列としてJSONデータを作成
        ObjectMapper mapper = new ObjectMapper();//ObjectMapperクラスのインスタンスを作成
        try {
            //readValue()メソッドでデコード実施
            Info info = mapper.readValue(script, Info.class);
            System.out.println(info.name);
            System.out.println(info.age);
        } catch (IOException e) {
            e.printStackTrace();
        }
    }
}

実行結果

Taro Tanaka
30

1. InfoクラスにてJSONから変換されるプロパティを持つクラスを作成する。
2. デコードを実行するMainクラスを作成。
3. ここではStringの文字列としてJSONデータを用意する。
4. ObjectMapper mapper = new ObjectMapper()にてObjectMapperクラスをインスタンス化。
5. mapper.readValue(script, Info.class)にてJSONからオブジェクトに変換。
   このとき、try,catchでのエラー対応が必要。
6. System.out.println(info.～)でオブジェクトプロパティをコンソールに出力。

実行結果を見ると、JSONデータがオブジェクトクラスに変換されていることが分かる。
デコード後は指定したオブジェクトの各プロパティにアクセスすることで値を取得することができる。

3. ソケット通信におけるJSONデータの送受信方法

サーバープログラム：Java
クライアントプログラム：JavaScript

ソケット通信を行う際、JSONでの送受信方法を記述する。
JavaとJavaScriptで扱い方が異なるため、それぞれ解説する。

JavaScriptでのJSON送受信

JavaScriptに関しては特筆すべきことはない。
前述した通り、JSON.stringify()メソッド及びJSON.parse()メソッドで簡単にオブジェクト ⇔ JSON間の変換が可能。
クライアントから送信前にエンコード、受信後にデコードすれば問題無い。

送信時エンコード

オブジェクト ⇒ JSON

送信時

var obj = { type:'A' , msg:'a' };
var json = JSON.stringify(obj);
socket.send(json);

1. オブジェクトを用意。
2. JSON.stringify()メソッドでJSONへエンコード。
3. WebSocketのsend()メソッドでJSONデータ送信

受信時デコード

JSON ⇒ オブジェクト

受信時

socket.onmessage = function(e) {
    var obj = JSON.parse(e.data);
};

1. onmessageでJSONデータを受信。
2. JSON.parse(e.data)でオブジェクトへデコード

JavaでのJSON送受信

Javaのソケット通信時にJSONを用いる場合、JavaScriptのように簡単にはいかない。
⇒ エンコーダー、デコーダー、オブジェクトクラスの3つを用意する必要がある。

送信時エンコード

オブジェクト ⇒ JSON

ソケット通信でJSONデータを送信する場合、エンコーダーを用いてオブジェクトからJSONに変換してから送信する。

通常、テキストデータを送信する場合にはsendText()メソッドを使用するが、JSONを送信する場合はsendObject()メソッドを使用する。
引数をオブジェクトとし、エンコーダーによってJSONに変換したのち送信する。

1. 送信するオブジェクトを作成する。
2. エンコーダーを作成する。
3. @ServerEndpointアノテーションにエンコーダーを登録する。

1. 送信するオブジェクトを作成

通常のクラスと同様にプロパティを持つクラスを作成する。
コンストラクタ、セッター、ゲッターも通常通り記述。(無くても変換可能。)

オブジェクトクラス

public class JsonObj {

    private String type = "type1";
    private String msg = "msg1";

    //コンストラクタ
    public JsonObj() {}

    //セッター
    public void setType(String type) {this.type = type;}
    public void setMsg(String msg) {this.msg = msg;}

    //ゲッター
    public String getType() {return type;}
    public String getMsg() {return msg;}
}

2. エンコーダーを作成

エンコーダーはjavax.websocketパッケージのEncoder.Textクラスを実装する。
(Encoder.Binaryクラスも存在するが、バイナリデータを扱うためのクラスなので割愛)

Encoder.Text<>のジェネリクスにはエンコードするオブジェクトクラスを記述しておく。

エンコーダー

import javax.websocket.EncodeException;
import javax.websocket.Encoder;
import javax.websocket.EndpointConfig;
import com.fasterxml.jackson.core.JsonProcessingException;
import com.fasterxml.jackson.databind.ObjectMapper;

public class JsonEncoder implements Encoder.Text<JsonObj>{

    @Override//初期化は何もしない
    public void init(EndpointConfig config) {}

    @Override//エンコード処理 ( オブジェクト → JSON )
    public String encode(JsonObj obj) throws EncodeException {
        ObjectMapper mapper = new ObjectMapper();
        String json = "";
        try {
            json = mapper.writeValueAsString(obj);
        } catch (JsonProcessingException e) {
            e.printStackTrace();
        }
        return json;
    }

    @Override//破棄は何もしない
    public void destroy() {}
}

Encoder.Textクラスを継承した場合、以下のメソッドをオーバーライドする必要がある。

1. init(EndpointConfig config)：エンコーダーが起動したときの処理。
2. encode(Object obj)：エンコード処理。
3. destroy()：エンコーダが破棄された時の処理。

基本的にinit()及びdestroy()は何も処理しなくてよい。
encode(Object)にて引数をオブジェクトとし、エンコード後に戻り値としてJSONを指定。

3. エンコーダーを登録

@ServerEndpoint

//エンコーダークラスを指定
@ServerEndpoint(value = "/json" , encoders = JsonEncoder.class)
public class JsonTest  {
    //中略

    //sendObject()の引数はオブジェクト
    //送信前にエンコードされる
    session.getAsyncRemote().sendObject(obj)

    //中略
}

エンコーダーを利用するとき、@ServerEndpoint()にエンコーダークラスを指定する。
ここで指定しておくことで、オブジェクト送信時に指定したエンコーダーによってJSONデータへ変換される。

• sendObject(obj) ⇒ エンコード処理 (obj→JSON) ⇒ 送信

受信時デコード

JSON ⇒ オブジェクト

ソケット通信でJSONデータを受信する場合、デコーダーを用いてJSONからオブジェクトに変換してから受信する。

通常はonMessage()メソッドの引数にString型文字列として受信するが、デコーダーを用いることで受信前にデコード処理が実施され、オブジェクトとして受信することとなる。

1. 受信するJSONの変換先オブジェクトを作成する。
2. デコーダーを作成する。
3. @ServerEndpointアノテーションにデコーダーを登録する。

1. 変換先のオブジェクトを作成

デコードする場合、JSONの要素に対応したプロパティを持つオブジェクトクラスを用意しておく必要がある。
複数のJSONを受信するとき内容や形式が異なるなら、それぞれのJSONに対応した複数のオブジェクトクラスを用意しなければならない。

エンコードの場合、全てのオブジェクトは任意のタイミングでJSONに変換し送信することが可能
デコードの場合、受信するJSONの内容をあらかじめ把握し、デコード前に受け口となるオブジェクトクラスを用意しておかなければならない。

オブジェクトクラス

public class JsonObj {

    private String type;
    private String msg;

    //コンストラクタ
    public JsonObj() {}

    //セッター
    public void setType(String type) {this.type = type;}
    public void setMsg(String msg) {this.msg = msg;}

    //ゲッター
    public String getType() {return type;}
    public String getMsg() {return msg;}
}

2. デコーダーを作成

デコーダーはjavax.websocketパッケージのDecoder.Textクラスを実装する。
(Decoder.Binaryクラスも存在するが、バイナリデータを扱うためのクラスなので割愛)

Decoder.Text<>のジェネリクスにはデコード先のオブジェクトクラスを記述しておく。

デコーダー

import javax.websocket.DecodeException;
import javax.websocket.Decoder;
import javax.websocket.EndpointConfig;
import com.fasterxml.jackson.core.JsonProcessingException;
import com.fasterxml.jackson.databind.ObjectMapper;

public class JsonDecoder  implements Decoder.Text<JsonObj> {

    @Override//初期化は何もしない
    public void init(EndpointConfig config) {}

    @Override//デコードできるかの判定
    public boolean willDecode(String text) {
        return (text != null);
    }

    @Override//デコード処理 ( JSON → オブジェクト)
    public JsonObj decode(String text) throws DecodeException {
        ObjectMapper mapper = new ObjectMapper();
        JsonObj obj = null;
        try {
            obj = mapper.readValue(text, JsonObj.class);
        } catch (JsonProcessingException e) {
            e.printStackTrace();
        }
        return obj;
    }

    @Override//破棄は何もしない
    public void destroy() {}
}

Decoder.Textクラスを継承した場合、以下のメソッドをオーバーライドする必要がある。

1. init(EndpointConfig config)：デコーダーが起動したときの処理。
2. willDecode(String text)：デコード処理を実行するかどうかの判定。
3. decode(Object obj)：デコード処理。
4. destroy()：デコーダが破棄された時の処理。

基本的にinit()及びdestroy()は何も処理しなくてよい。
willDecode()の引数をJSONとし、戻り値がtrueなら以下のデコードを実行。falseならデコードされず以降の@OnMessageメソッドは実行されない。
decode()にて引数をJSONとし、エンコード後に戻り値としてオブジェクトを指定。

3. デコーダーを登録

@ServerEndpoint

//デコーダークラスを指定
@ServerEndpoint(value = "/json" , decoders = JsonDecoder.class)
public class JsonTest  {
    //中略

    //@OnMessageメソッドの前にデコードされる
    @OnMessage
    public void onMessage(JsonObj obj , Session mySession) {
    }

    //中略
}

デコーダーを利用するとき、@ServerEndpoint()にデコーダークラスを指定する。
ここで指定しておくことで、データ受信時に指定したデコーダーによってオブジェクトへ変換される。
⇒ @OnMessageメソッドの引数はオブジェクト型となる。(通常はString型)

• 受信 ⇒ デコード処理 (JSON→obj) ⇒ @OnMessageメソッド

4. 複数パスのチャットアプリ作成

過去に作成したチャットアプリを改変する。

変更点

1. 送受信するデータをテキストからJSONへ変更 (JSONの使用)
2. チャット欄を1つから2つへ増加 (複数パスの実現)

WebSocket通信ではデータを受信するための受け口が1つしかない。
つまりワンパスのため複数の送信元があっても見分けがつかない。
もし見分けるなら、文字列の内容を分解して区別する他無いだろう。
どうせデコードするのならJSONを扱うのが都合がよい。

実際は 1.テキスト 2.バイナリ 3.PingPong と3種類の受信メソッドがあるが、ここではテキスト形式のみを扱うため受け口は1つと考える。

作成ファイル

1. JsonIndex.html：ブラウザ表示用のHTMLファイル
2. JsonSocket.js：ソケット通信のクライアントプログラム
3. JsonTest.java：ソケット通信のサーバープログラム
4. JsonObj.java：JSONと相互変換するオブジェクトクラス
5. JsonEncoder.java：Javaエンコーダー
6. JsonDecoder.java：Javaデコーダー

1. 表示用HTML

JsonIndex.html

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>JSON送受信</title>
    <script type="text/javascript" src="JsonSocket.js"></script>
</head>
<body>
    <div
        style="width: 500px; height: 200px; overflow-y: auto; border: 1px solid #333;"
        id="show1"></div>
    <input type="text" size="80" id="msg1" name="msg1" />
    <input type="button" value="送信" onclick="sendMsg1();" />
    <p></p>
    <div
        style="width: 500px; height: 200px; overflow-y: auto; border: 1px solid #333;"
        id="show2"></div>
    <input type="text" size="80" id="msg2" name="msg2" />
    <input type="button" value="送信" onclick="sendMsg2();" />
</body>
</html>

ポイント
1. チャット欄を2つに増加した。

表示枠はそれぞれshow1とshow2、テキストボックスはmsg1とmsg2とした。

後述するJavaScriptファイルでこれらを操作する。

2. クライアントプログラム

JsonSocket.js

//JSON用のオブジェクト作成
var obj = { type:null , msg:null };

//WebSocketオブジェクト生成
var wSck= new WebSocket("ws://localhost:8080/jsonTest/json");

//ソケット接続時のアクション
wSck.onopen = function() {
    document.getElementById('show1').innerHTML += "接続しました。" + "<br/>";
    document.getElementById('show2').innerHTML += "接続したよ～" + "<br/>";
};

//メッセージを受け取ったときのアクション
wSck.onmessage = function(e) {
    //JSONデータをオブジェクトへデコード
    var json = JSON.parse(e.data);

    //JSONデータのtype値によって実行内容を変更
    if(json.type === 'msg1'){document.getElementById('show1').innerHTML += json.msg + "<br/>";}
    else if(json.type === 'msg2'){document.getElementById('show2').innerHTML += json.msg + "<br/>";}
};

//メッセージ送信1
var sendMsg1 = function(val) {
    var element = document.getElementById('msg1')
    obj.type = element.name;//オブジェクトの内容を代入
    obj.msg = element.value;
    var json = JSON.stringify(obj);//オブジェクトをJSONへエンコード
    wSck.send(json);//JSONを送信
    element.value = "";//内容をクリア
};

//メッセージ送信2
var sendMsg2 = function(val) {
    var element = document.getElementById('msg2');
    obj.type = element.name;
    obj.msg = element.value;
    var json = JSON.stringify(obj);
    wSck.send(json);
    element.value = "";
};

ポイント
1. JSON用のオブジェクトobjを作成 ⇒ これがJSONへ変換される。
2. ソケット接続時のアクションをチャット欄増加に合わせて追加。
3. メッセージ受信時にJSONをオブジェクトへデコードし、type値によって処理内容を変更。
4. メッセージ送信1,2：objに値を代入後、サーバーへの送信前にJSONへの変換を実施。

3. サーバープログラム

JsonTest.java

package jsonTest;

import java.io.IOException;
import java.util.Set;
import java.util.concurrent.CopyOnWriteArraySet;

import javax.websocket.OnClose;
import javax.websocket.OnMessage;
import javax.websocket.OnOpen;
import javax.websocket.Session;
import javax.websocket.server.ServerEndpoint;

// 引数にデコーダー、エンコーダーを記述
@ServerEndpoint(value = "/json" , decoders = JsonDecoder.class , encoders = JsonEncoder.class)
public class JsonTest  {

    private static Set<Session> user = new CopyOnWriteArraySet<>();

    @OnOpen
    public void onOpen(Session mySession) {
        System.out.println("connect ID:"+mySession.getId());
        user.add(mySession);
    }

    //このメソッドの前にデコードされる
    @OnMessage
    public void onMessage(JsonObj obj , Session mySession) {
        for (Session user : user) {
            user.getAsyncRemote().sendObject(obj);//送信するものはオブジェクト(送信前にエンコードされる)
            System.out.println(user.getId()+"番目に"+mySession.getId()+"番目のメッセージを送りました！");
        }
        if(obj.getMsg().equals("bye")) {onClose(mySession);}
    }

    @OnClose
    public void onClose(Session mySession) {
        System.out.println("disconnect ID:"+mySession.getId());
        user.remove(mySession);
        try {
            mySession.close();
        } catch (IOException e) {
            System.err.println("エラーが発生しました: " + e);
        }
    }
}

ポイント
1. @ServerEndpointにデコーダー及びエンコーダーのクラスを指定。
2. クライアントからデータを受信したとき、@OnMesaageメソッドが実行される前に指定したデコーダーが実行されJSONからオブジェクトに変換される。

⇒ @OnMesaageメソッドの引数はObj型となる。
3. sendObject(obj)メソッドでオブジェクトを送信するとき、クライアントへ送信する前に指定したエンコーダーが実行されオブジェクトからJSONに変換される。

※ 文字列を送信する場合はsendText()を使用するが、オブジェクトを送信する場合はsendObject()を使用する。

4. オブジェクトクラス

JsonObj.java

package jsonTest;

public class JsonObj {

    private String type;
    private String msg;

    //コンストラクタ
    public JsonObj() {}

    //セッター
    public void setType(String type) {this.type = type;}
    public void setMsg(String msg) {this.msg = msg;}

    //ゲッター
    public String getType() {return type;}
    public String getMsg() {return msg;}
}

ポイント
1. このクラスのプロパティはtypeとmsgの2つ。

⇒ クライアントプログラムのオブジェクト (受信するJSON) に対応したクラスを作成している。
2. デコード後、typeプロパティ値によって送信元を判断する。

5. エンコーダー

JsonEncoder.java

package jsonTest;

import javax.websocket.EncodeException;
import javax.websocket.Encoder;
import javax.websocket.EndpointConfig;

import com.fasterxml.jackson.core.JsonProcessingException;
import com.fasterxml.jackson.databind.ObjectMapper;

public class JsonEncoder implements Encoder.Text<JsonObj>{

    @Override//初期化は何もしない
    public void init(EndpointConfig config) {}

    @Override//エンコード処理 ( オブジェクト → JSON )
    public String encode(JsonObj obj) throws EncodeException {
        ObjectMapper mapper = new ObjectMapper();
        String json = "";
        try {
            json = mapper.writeValueAsString(obj);
        } catch (JsonProcessingException e) {
            e.printStackTrace();
        }
        return json;
    }

    @Override//破棄は何もしない
    public void destroy() {}
}

ポイント
1. Encoder.Text<JsonObj>を実装したクラスを作成。
2. encode()メソッドの引数はオブジェクト、戻り値はJSONとなる。
3. エンコードにはObjectMapperクラスのwriteValueAsString()メソッドを使用する。

6. デコーダー

package jsonTest;

import javax.websocket.DecodeException;
import javax.websocket.Decoder;
import javax.websocket.EndpointConfig;

import com.fasterxml.jackson.core.JsonProcessingException;
import com.fasterxml.jackson.databind.ObjectMapper;

public class JsonDecoder  implements Decoder.Text<JsonObj> {

    @Override//初期化は何もしない
    public void init(EndpointConfig config) {}

    @Override//デコードできるかの判定
    public boolean willDecode(String text) {
        return (text != null);
    }

    @Override//デコード処理 ( JSON → オブジェクト)
    public JsonObj decode(String text) throws DecodeException {
        ObjectMapper mapper = new ObjectMapper();
        JsonObj obj = null;
        try {
            obj = mapper.readValue(text, JsonObj.class);
        } catch (JsonProcessingException e) {
            e.printStackTrace();
        }
        return obj;
    }

    @Override//破棄は何もしない
    public void destroy() {}
}

ポイント
1. Decoder.Text<JsonObj>を実装したクラスを作成。
2. decode()メソッドの引数は文字列(JSON)、戻り値はオブジェクトとなる。
3. エンコードにはObjectMapperクラスのreadValue()メソッドを使用する。

実行結果

ChromeにてJsonIndex.htmlを実行。

チャット欄が2つに増加した。
各チャット欄で独立して送受信が可能。
⇒ 複数パスの実現が完了。

実行順序

長くなったので、クライアントとサーバーでどのような処理が行われているか記述する。

1. HTMLでページを表示。
2. ハンドシェイク完了後、ソケット通信開始。
3. テキストボックスにメッセージを記述し送信ボタンをクリック。
4. JavaScriptによりオブジェクトをJSONにエンコードしサーバーへ送信。
5. サーバーでJSONデータを受信。
6. デコーダーによりJSONからオブジェクトへデコード。
7. デコードされたオブジェクトを引数に@OnMessageメソッドを実行。
8. sendObject()メソッドでオブジェクトを送信。
9. 送信前にエンコーダーによりオブジェクトからJSONへエンコードし、クライアントへ送信。
10. クライアントでデータ受信。
11. JSONデータをオブジェクトへデコード。
12. typeプロパティ値によって送信元を判別し、各送信元へメッセージを表示。

その他

改善点

・未知のJSONデータを受信すると、対応したオブジェクトクラスを用意していないためエラーとなる。
⇒ 対応している人はいるので、そのうち調べるかも。結構ややこしそう。

・複数の型のJSONデータを受信する場合に未対応。
⇒ そこまで難しくなさそう。デコーダーとオブジェクトクラスを増やしてJSONの中身に対応すればできる。

・入れ子構造のJSONに対応するにはどういうオブジェクトクラスを作成すればいいか不明。
⇒ ググれば出るし、必要となれば調べる。

・バイナリデータの扱いは理解が進んでいないため、バイナリデータの送受信には未対応。
⇒ 画像の送受信など、必要となれば調べる。

感想

思った以上にややこしかった。長くなってしまったので反省。
もっとまとめるべきだった。

JavaでJSONを扱うのに、外部ライブラリを使用したりオブジェクトクラスを用意したりと面倒。
JavaScriptなら1行で終わるのにね。

Javaのソケット通信でJSONを扱うときに、エンコードクラスやデコードクラスが用意されているのは便利なのかどうなのか。
わざわざエンコーダークラスやデコーダークラスを用意しなくちゃいけないのは、面倒といえば面倒。

面倒だが、JSONを使いたいならしょうがない。
JavaでのJSONの扱い方について理解が深まって良かった。
個人制作レベルなら利用していけそう。

参考ページ

• JavaScriptでJSONデータのエンコード、デコード
• JavaでJSONデータのエンコード、デコード (Jackson)
• JavaでJSONデータのエンコード、デコード (Jackson特化)
• JavaでJSONデータのエンコード、デコード (Jackson 他)
• ソケット通信におけるJSONの送受信
• ソケット通信におけるJSONの送受信 (マルチオブジェクト)

consoleオブジェクト

フロントの開発をしてる時、いつもお世話になるconsole.log()
先日、console.logでフォーマット指定子を使う！という記事を書きましたが、今回はconsole.log()以外のconsole.XXX()について、紹介したいと思います。

一覧

関数名	用途	○：おすすめ △：非推奨、 　非標準
assert	引数の妥当性チェック
clear	コンソールをクリア
count	回数をカウント
debug	デバッグログ出力	○
dir	オブジェクト出力
dirxml	オブジェクト出力 ※XML形式
error	エラーログ出力
exception	errorの別名	△
group	ログをグループ化
groupCollapsed	ログをグループ化 ※折りたたんだ状態で出力	○
groupEnd	グループ化終了
info	出力ログに！マーク付与
log	通常のログ出力	○
profile	プロファイル開始	△
profileEnd	プロファイル停止	△
table	表形式でログ出力	○
time	処理時間計測
timeEnd	処理時間計測
timeLog	処理時間計測
timeStamp	タイムラインにマーカー追加	△
trace	スタックトレース出力	○
warn	警告ログ出力

(2020/05時点)
※MDN日本語版と英語版で情報に差異があるのですが、更新日が新しい英語版を基にしています。

動作確認

それでは、それぞれ動作を見ていきます。
ブラウザはChromeです。
一部Chromeでは対応しておらず、他のブラウザを使用している箇所は都度明記しています。

console.assert()

第1引数を評価してfalseの場合、第2引数のメッセージを出力します。
trueの場合は、何も出力されません。

console.clear()

コンソールを初期化します。

console.count(), console.countReset()

第1引数の値をラベルとして、呼ばれた回数をカウントし出力します。

console.dir(), console.dirxml()

console.dir()はDOMをJSON形式で、
console.dirxml()はXML形式で、出力してくれます。

console.log(), console.info(), console.warn(), console.error(), console.debug()

標準的なログを出力します。
関数によって、それぞれログレベルが違います。

Chromeでは、console.log()とconsole.info()が同じでしたので、Safariでも確認しました。

また、一部で「console.debug()はChromeで表示されない」との記事を見かけますが、おそらくログの出力レベルがDefaultになっているのだと思います。
console.debug()はレベルVerboseですが、DefaultではVerboseにチェックがついていないので注意が必要です。

ログをconsole.debug()で出力して、フィルタをVerboseレベルでかければ、必要なログだけ抽出して確認できるので、おすすめです。

また、フォーマット指定子（置換文字列）を使用して、出力フォーマットを整形することもできます。
こちらの記事で紹介していますので、参考にしてみてください。
console.logでフォーマット指定子を使う！

console.exception()

一応MDNの一覧ページには載ってますが、個別のページは削除されているようです。
console.error()を使いましょう。

console.group(), console.groupCollapsed(), console.groupEnd()

ログをグループ化して出力します。
console.groupCollapsed()だと初期表示の時に、折りたたまれた状態で出力されます。
（個人的にはgroupCollapsedのほうが好きです）

console.profile(), console.profileEnd()

プロファイルを記録して、各関数の処理性能の計測などができます。

console.table()

配列やオブジェクトを表形式で出力できます。

見出しをクリックしたら、ソートすることもできます。

第2引数に値を設定すると、出力するプロパティを絞ることもできます。

console.time(), console.timeEnd(), console.timeLog()

処理時間を計測できます。
console.time()で計測を開始し、
console.timeLog()で途中経過を出力し、
console.timeEnd()で計測時間を出力し、計測を止めます。

console.timeStamp()

開発者ツールでPerformanceを計測している間だけ有効になります。

何のために使うのかよくわかっていないです。

めちゃくちゃ小さく表示されるので、ずっと見つからず何も起こらない…と思って、何度もやり直しました。
この画面ショット撮るために2日かかりました…すみません、愚痴です。

そもそも古い記事だと開発者ツールのTimelineパネルにTimeStampが表示されるのですが、今はPerformanceパネルに集約されているようです。
下記の記事に出会わなければ、見つけられなかったです。
進化を続けるChrome DevToolsの最新情報 2017

console.trace()

スタックトレースを出力し、処理の流れを確認できます。
「この処理どこから呼ばれているんだろう…」というときに使えます。

まとめ

これだけのconsole.XXX()を使いこなせれば、見づらいデバッグログ地獄からも脱却できますね！

と言いつつ、結局console.log()を打った方が楽だと思ってしまう自分もいますが…

参考

MDN日本語版
MDN英語版

consoleオブジェクト

フロントの開発をしてる時、いつもお世話になるconsole.log()
先日、console.logでフォーマット指定子を使う！という記事を書きましたが、今回はconsole.log()以外のconsole.XXX()について、紹介したいと思います。

一覧

関数名	用途	○：おすすめ △：非推奨、 　非標準
assert	引数の妥当性チェック
clear	コンソールをクリア
count	回数をカウント
debug	デバッグログ出力	○
dir	オブジェクト出力
dirxml	オブジェクト出力 ※XML形式
error	エラーログ出力
exception	errorの別名	△
group	ログをグループ化
groupCollapsed	ログをグループ化 ※折りたたんだ状態で出力	○
groupEnd	グループ化終了
info	出力ログに！マーク付与
log	通常のログ出力	○
profile	プロファイル開始	△
profileEnd	プロファイル停止	△
table	表形式でログ出力	○
time	処理時間計測
timeEnd	処理時間計測
timeLog	処理時間計測
timeStamp	タイムラインにマーカー追加	△
trace	スタックトレース出力	○
warn	警告ログ出力

(2020/05時点)
※MDN日本語版と英語版で情報に差異があるのですが、更新日が新しい英語版を基にしています。

動作確認

それでは、それぞれ動作を見ていきます。
ブラウザはChromeです。
一部Chromeでは対応しておらず、他のブラウザを使用している箇所は都度明記しています。

console.assert()

第1引数を評価してfalseの場合、第2引数のメッセージを出力します。
trueの場合は、何も出力されません。

console.clear()

コンソールを初期化します。

console.count(), console.countReset()

第1引数の値をラベルとして、呼ばれた回数をカウントし出力します。

console.dir(), console.dirxml()

console.dir()はDOMをJSON形式で、
console.dirxml()はXML形式で、出力してくれます。

console.log(), console.info(), console.warn(), console.error(), console.debug()

標準的なログを出力します。
関数によって、それぞれログレベルが違います。

Chromeでは、console.log()とconsole.info()が同じでしたので、Safariでも確認しました。

また、一部で「console.debug()はChromeで表示されない」との記事を見かけますが、おそらくログの出力レベルがDefaultになっているのだと思います。
console.debug()はレベルVerboseですが、DefaultではVerboseにチェックがついていないので注意が必要です。

ログをconsole.debug()で出力して、フィルタをVerboseレベルでかければ、必要なログだけ抽出して確認できるので、おすすめです。

また、フォーマット指定子（置換文字列）を使用して、出力フォーマットを整形することもできます。
こちらの記事で紹介していますので、参考にしてみてください。
console.logでフォーマット指定子を使う！

console.exception()

一応MDNの一覧ページには載ってますが、個別のページは削除されているようです。
console.error()を使いましょう。

console.group(), console.groupCollapsed(), console.groupEnd()

ログをグループ化して出力します。
console.groupCollapsed()だと初期表示の時に、折りたたまれた状態で出力されます。
（個人的にはgroupCollapsedのほうが好きです）

console.profile(), console.profileEnd()

プロファイルを記録して、各関数の処理性能の計測などができます。

console.table()

配列やオブジェクトを表形式で出力できます。

見出しをクリックしたら、ソートすることもできます。

第2引数に値を設定すると、出力するプロパティを絞ることもできます。

console.time(), console.timeEnd(), console.timeLog()

処理時間を計測できます。
console.time()で計測を開始し、
console.timeLog()で途中経過を出力し、
console.timeEnd()で計測時間を出力し、計測を止めます。

console.timeStamp()

開発者ツールでPerformanceを計測している間だけ有効になります。

何のために使うのかよくわかっていないです。

めちゃくちゃ小さく表示されるので、ずっと見つからず何も起こらない…と思って、何度もやり直しました。
この画面ショット撮るために2日かかりました…すみません、愚痴です。

そもそも古い記事だと開発者ツールのTimelineパネルにTimeStampが表示されるのですが、今はPerformanceパネルに集約されているようです。
下記の記事に出会わなければ、見つけられなかったです。
進化を続けるChrome DevToolsの最新情報 2017

console.trace()

スタックトレースを出力し、処理の流れを確認できます。
「この処理どこから呼ばれているんだろう…」というときに使えます。

まとめ

これだけのconsole.XXX()を使いこなせれば、見づらいデバッグログ地獄からも脱却できますね！

と言いつつ、結局console.log()を打った方が楽だと思ってしまう自分もいますが…

参考

MDN日本語版
MDN英語版

Homebrewインストール

1. インストールされているか確認

brew -v

バージョンが返ってくればインストールされている。(node.jsインストールへ)

2. brewインストール

• ターミナルに以下のスクリプトを実行

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install.sh)"

• パスワードを入力
• Installation Success! と表示されたらインストール完了。

node.jsインストール

1. インストールされているか確認

node -v

• バージョンが返ってくればインストールされている。(yarnインストールへ)
• 返ってこなかった場合はnode.jsインストールへ

2. node.jsインストール

ターミナルに以下のコマンドを入力

brew install nodebrew

nodebrewのバージョンを確認してバージョンが返ってくればインストールされている

nodebrew -v

node.jsインストール準備

nodebrew ls-remote

バージョン番号がいっぱい出てきたら成功

こんな感じのエラーが出てきたら↓

Fetching: https://nodejs.org/dist/v7.10.0/node-v7.10.0-darwin-x64.tar.gz
Warning: Failed to create the file 
Warning: /Users/whoami/.nodebrew/src/v7.10.0/node-v7.10.0-darwin-x64.ta
Warning: r.gz: No such file or directory

curl: (23) Failed writing body (0 != 941)
download failed: https://nodejs.org/dist/v7.10.0/node-v7.10.0-darwin-x64.tar.gz

以下のコマンドでディレクトリ作成

mkdir -p ~/.nodebrew/src

node.jsインストール

nodebrew install-binary stable

バージョン確認

nodebrew ls

以下のように表示されたら

v7.1.0

current: none

表示されているバージョンを有効化する

nodebrew use v7.1.0

もう１度nodebrew lsを入力するとこんな感じになっているはず

v7.1.0

current: v7.1.0

環境パスを通す

echo 'export PATH=$HOME/.nodebrew/current/bin:$PATH' >> ~/.zprofile

ここでターミナルを再起動する or 以下のコマンドを入力

source ~/.bash_profile

最後にnodeのバージョンを確認

node -v

yarnインストール

brew install yarn

バージョンを確認する

yarn -v

バージョンが返ってくれば成功

Vueインストール(本題)

yarn global add @vue/cli
yarn global add @vue/cli-init

これでVueがインストールされるのでバージョン確認

vue --version

バージョンが返ってくれば成功

Vueプロジェクトを作成する

vue init webpack vue-app

質問がいっぱいくるので選択していく。基本的には全てpackage.jsonで変更できるのであまり気にする必要はない

? Project name (vue-app) //Enterを押す
? Project description (A Vue.js project) //Enterを押す
? Author (名前 <メアド>) //Enterを押す
  Runtime + Compiler: recommended for most users 
  Runtime-only: about 6KB lighter min+gzip, but templates (or any Vue-specific HTML) are ONLY allowed in .vue files - render functions are required elsewhere //Runtime+Compilerの方を選択してEnterを押す
? Install vue-router? (Y/n) //nを押してEnterを押す
? Use ESLint to lint your code? (Y/n) //nを押してEnterを押す
? Set up unit tests (Y/n) //nを押してEnterを押す
? Setup e2e tests with Nightwatch? (Y/n) //nを押してEnterを押す
? Should we run `npm install` for you after the project has been created? (recommended) (Use arrow keys)
❯ Yes, use NPM 
  Yes, use Yarn 
  No, I will handle that myself //Yes, use Yarnを選択してEnterを押す

ダウンロードが完了したらディレクトリができているので移動

cd vue-app

必要なモジュールをインストール

yarn install

ローカルでアプリケーションを起動する

yarn dev

以下のように表示されたら成功。http://localhost:8080 に行くと最初のページが表示されている

最後のlocalhostが起動しなかった場合

• エディタでvue-appを開いてconfig/index.jsに行く
• 17行目のポート番号を8081に変更する
• もう一度ターミナルでyarn devを実行

vue環境構築完了!

参考文献

https://qiita.com/white0221/items/d371a19b59af4cba8e8b

https://qiita.com/Mitsuzara/items/4dea8c0aa95d6284980a

https://utano.jp/entry/2018/02/vue-cli-genearte-webpack-project/

https://qiita.com/zaburo/items/29fe23c1ceb6056109fd

https://qiita.com/kyosuke5_20/items/c5f68fc9d89b84c0df09

プログラミングを始めて半年を迎えます、上野栞音です。
スクールでは主にRailsアプリの作り方を教わり、現在は株式会社Wilicoでインターンとしてお世話になりながら就活中です。
プログラミングも字書きも不慣れなもんで、至らぬ点がありましたら教えてください。

今回はスクール3ヶ月目のフェーズで作成したポートフォリオについて、雑多にはなりますが色々と書き留めていこうと思います。

ポートフォリオ概要

ToT
github
※かんたんログイン("Signin as a trial user")実装済み。

開発コミュニティ向けのQAサイトを想定して制作しました。
詳細はgithubのREADMEに。

開発経緯と目的

今回学習したかったことは大きく分けると2つ。

ユーザーのアクションを経て、どのようなデータが集められるのか。
そのデータを基にどのような分析結果を返せるのか。

もともと、ユーザーに評価を付与→チャートで表示の機能は絶対に実装しようと決めていました。
きっかけとしてはAI(データの統計や分析)に興味が湧いたからなので、最初はPythonを使って何かしようと考えていたのですが却下。
理由としては、

1. 初学者が1ヶ月という期限付きで新しい技術を得てアプリを作っても、強みのあるポートフォリオにはならない気がしたから。
2. 当時教わっていたRailsについての理解が明らかに浅く、その理解度のまま別の技術に手を出すのが腑に落ちなかったから。

そんなこんなで いくつかサイトをチラ見しつつアプリの企画を練りました。
QAサイトの制作に至った理由としては、評価基準の設け方がパッとイメージできたからです。

DB設計

静的(不変的)なデータのみを保管するようにするのがベスト！
というのが今回の学びです。開発はSQLite3、本番はMySQLで実装しています。

はじめに考えていたもの

ユーザーの評価はユーザーテーブルに、それ以外の評価もコメントやスレッドのアクションに紐づけてアップデートする予定でしたが、途中でこんがらがってスクールのメンターさんに相談。
諸々差し置いて問題点として大きかったのが、この設計だとユーザーが何か操作するたびにアップデートが掛かってしまうため、正常にアップデートされない可能性があることです。(回避方も色々あるみたいですが、もっと掘り下げたいので省略)

後々算出できるデータやユーザーの動作に依存して頻繁にデータが更新されるものは、理由がない限りDBで管理しないようにするため、分析するための材料だけ保管してチャートを描画するタイミングで算出する設計にしました。

最終的な設計

赤い部分をごっそり消しましたが、時間系の評価については他の評価に比べて算出するステップが一つ多い(2つのテーブルに登録されている登録日を基に差分を算出 → その差分を基に平均値算出)こともあり、集計のスピードを上げるために用途を変えてテーブルを残しています。

基本的な機能の実装

チャート実装を除いた部分です。チャートに時間が割きたかったこともあり、検索機能以外を1週間くらいでスケジュールを組んで実装しました。
さして難しい機能は実装してないのでアピールポイントを挙げると、
タグ付け機能と検索機能はgemを使わずに実装しました
改めて調べてみると「gemで出来たのでは…？」なんて思いますが、いい運動(?)になったので結果オーライ

以下備考

• タグ付け機能
  • 同じ意味なのに違う表記(rails, Railsみたいな)のデータが入ると分析の精度が下がってしまうため、新規タグ作成の動作を重くしたかった。
  • 基本1つのtext_fieldにカンマ区切りで書き込むようなやり方しか見つからず軽いなぁと悩んだあげく、普通に中間テーブルで結んでフォーム作った方が慣れたやり方だし早そうだと判断。
  • 実装後、Qiitaのタグ付け機能を見て目ぇひん剥きました。なるほど。この手があったか。なるほど…
• 検索機能
  • 検索対象や解決/未解決フラグごとなど少し細かく条件を指定して検索できるようにしたかった。
  • 改めて調べてみるとアドバンストモードでいけそう。当時触ってみたけど、このモードを理解するより自力で実装した方が早いなと判断。(条件分岐はスクールの応用課題で実装済み、or検索はこのサイトを参考に実装。)

チャート実装

開発経緯の通り、今できる事→これやりたい！軸で企画を立ててここまで来たので、為せば成る精神で詳しい実装の目論見はほぼありませんでした。
調べてみるものの、当時jsに馴染みが無さ過ぎて悶絶寸前。

＜何をどうすれば これが出来るんですか…？
自分で考えたアプリのくせに、ここに来て教室の隅で静かに絶望してました。

この時の学びとして大きかったのは、
分からない、初めて触るものは一度触ってみる大切さ

何も分からず嘆いていた最中、スクールの同期生に相談したらchart.jsのcodepenを教えてくれました。
ここで少し触ってみた瞬間、chart.jsが面白いほど読める。要因としては、すでに完成しているコードを触れることが大きかったと思います。
どの値がどの軸のデータに影響しているかや、どの値がどのデザインに影響しているかなどが直観的に分かり、ここに配列渡せば勝ちじゃん！とゴールを定める事が出来ました。

ちょっと無謀にも思いますが、試行錯誤も含めて工数を割くために基本的な機能 頑張ったので潔く実装に移って良かったなと思います(結果論)。

いざ、尋常にチャート実装

jsファイルとのデータの受け渡しは、gem 'gon'で行っています。
json形式に変換するのが基本ですが学習目的に含まれていないのと、これから実装するチャートの工数が読みきれずスピードを重視したかったので採用しました。

大体こう。

1. UserModelのロジックでチャートに渡す配列を計算するメソッド作成、Controllerで呼び出す
2. UsersControllerでgonに渡す
3. Viewでgonのタグ→jsファイルに渡す
4. jsファイル→canvasタグに渡してチャート描画

※自分が流れを掴むために搔い摘んだものです。gon周りは特にもう少し検証しながら理解を深めたい。

UserModelのロジックは、大体こう。

コードがぼちぼち長いため、流れだけ伝わりますようにといった感じで書きます
代わりと言っては何ですが行単位でGithubのリンクを貼るので、気になる方はご覧ください。
評価基準ごとにまとめます。

Questioner/Tags, Answer/Tags

ドーナツチャートの2項目です。少しデータを引っ張るロジックが違うだけなので、Questioner/Tagsを例にします。

1. 対象のユーザーが投稿したIssueに紐づくタグを算出
2. タグの名前だけを格納した配列を作る
3. 対象のユーザーが投稿したIssueに紐づくタグを算出
4. タグの割合だけ格納した配列を作る

Time to response, Time to solved, Total

バーチャートとレーダーチャートの項目です。
データを引っ張ってくるテーブルが違うだけなので、Time to responseを例にします。
ドーナツチャート以外は基本この流れです。細かい処理は省きます。

1. 全ユーザーの平均値を算出
   ・ユーザーの動作に依存してグラフの階級を変えるため、このデータを基に基準になる値を算出します。
2. チャートの諸々を決めるのに使う値を算出
   ・返すのは各ユーザー平均値の [ 最小値, 最大値, それを基にした階級幅 ]。
   ・投稿されたIssueが1つも無い場合はfalseで返して例外処理。
3. 2を基に境界値を算出
   ・〇秒～〇秒のユーザーはスコア1、〇秒～〇秒のユーザーはスコア2… の〇だけ入ったような配列です。
4. 3の境界値を基に
5. 各階級に何人ユーザーが含まれるかを算出して配列を作りながら
6. 各階級に対象のユーザーが含まれるか否かを0,1で算出して配列を作る
7. 6の配列を基に、ユーザーのスコアを算出
   ・3点の場合、[0,0,1,0,0,0,0,0,0,0] → each_with_indexで回すと2番目の値が1になる → 2+1でスコア算出
8. 5,7をControllerに返す
9. ※レーダーチャートの配列だけControllerで作ります。
   ・ ControllerからModelのメソッドを呼び出す際、Model上に配列を作ろうとすると呼び出すたびに配列がリセットされるためです。
   ・[ 5(チャートに渡す値), 7(ユーザーのスコア) ] の配列が返り値なので、この配列の[1]を拾って配列を作ります。

ほか

Time to response とほぼ同じなので、差分だけまとめます。

1.平均値
平均値が割り出せるほど絶対値が大きくなかったため合計値を算出しています。チャートの値が0ばかりになって変わり映えしなかった

3. 階級の算出
階級の誤差をスコア1に寄せるため、呼び出すメソッドを変えています。
評価基準によってスコアが高くなる条件が分岐するのが肝で、
Time to ～ → 1.平均値算出の結果が低いと高スコア → calculate_evaluation_datas_sort_by_max
それ以外 → 1.合計値算出の結果が高いと高スコア → calculate_evaluation_datas_sort_by_min
大きく違う点としては、階級を決める基準が 最大値 → 最小値 であること(こちら基準で命名してます)と、配列をreverseするタイミングです。

リファクタリング

制作期間が 2/15～3/15 くらいだったのですが、3月頭にβ版をデプロイして色んな方にレビューを頂きました。ありがとうございました

UserModelのメソッド
1. 最初は全てControllerに記述していたメソッドを
2. Modelに移行して
3. 共通するロジックをメソッド化(最新版)

Viewの描画まわり
1. HTMLの部分テンプレートでscriptタグをrenderしていたのを
2. jsファイルに移行して(リンクはcomment_tags)
3. 一つのファイルにまとめて共通するロジックをメソッド化(最新版)

チャートまとめ

このポートフォリオにおいて最大の学びでもあるのですが、
手を動かせば必ず答えは見つかる！
と確信を得られた制作物でした。
今扱えるパラメータを読み、それを基にロジックを組み、足りなければパラメータを送る。これを自分自身の経験をもって得られたのはとても貴重な学びだったなと思います。

全てのチャートを最低限実装するまでの1週間くらいはコンソール画面にかじりついて模索する日々でしたが、ロジックができた瞬間の達成感が最高すぎて何だかんだ楽しかったです

さいごに

ポートフォリオについて調べていると「こういうのが有利！」ばかりで自分と同じレベル感の記事が上手いこと見つからず、望んでいた判断材料では無かったので書いてみました。

もちろん まだ改善の余地があるアプリとは思いますが、キリがないので一旦区切りにしようかなと思います。

これからポートフォリオを制作する方の目に留まり、少しでもインスピレーションの助けになれば幸いです
あと色んな方のこんな感じの記事見たいので是非書いてください

ありがとうございました！

参照
Ransackで簡単に検索フォームを作る73のレシピ
railsで複数ワードでの検索機能(or)とマイナス検索機能(-)を実装してみる
chart.jsのcodepen
gem 'gon'

Gatsby.jsは言わずと知れたReact製の静的サイトジェネレーターですが、ビルド時にページを生成するという性質ゆえに、microCMSのプレビュー機能を使うにはひと工夫必要だったので共有したいと思います。
この機能をご存知の方はコードの部分からご覧ください。

microCMSの記事プレビュー機能について

microCMSのプレビュー機能について少し説明しておくと、記事執筆画面で

公開ボタンの左にある画面プレビューを押した時に、執筆中の記事が実際にはどのように表示されるか確認できる機能です。仕組みとしては、

• 「画面プレビュー」をクリック
• 予め設定しておいたURLの変数部分（contentsIdとdraftKey）がクリックした記事のものに置き換えられたURLにアクセス

という感じです。
詳しくはhttps://microcms.io/blog/draftkey_and_preview/ に掲載されています。

　何が問題でどうしたらいいのか？

この機能をGatsbyで使用する時、考えなければならないのは、Gatsby.jsの記事データは基本ビルド時に生成された物なので、
「画面プレビュー」クリック時に送られてきたcontentIdとdraftKeyを基に記事データをリアルタイムに取得して、表示する仕組みを作らないといけない。ということです。

　ということでコード

前置きはそのくらいにしてコードはこのようになりました。

pages/previewPage.jsx

import React, { useState, useEffect } from "react";
import { getSearchParams } from "gatsby-query-params";
//...その他コンポーネントなど

function previewPage() {
  //microCMS側に設定するurlはhttps://xxxxxx.com/previewPage/?contentId={CONTENT_ID}&draftKey={DRAFT_KEY}みたいな感じ
  const queryParams = getSearchParams();

  //queryParamsには
  //{contentId:"xxxx",
  //draftKey:"xxxx"}
  //というようなデータが入ります。

  const contentId = queryParams.contentId;
  const draftKey = queryParams.draftKey;

  const [postData, setPostData] = useState(null);//最初、postDataにはnullが入ります。

  useEffect(() => {
    if (!postData) {
      fetch(
        `https://xxxxxxxxx.microcms.io/api/v1/blogs/${contentId}?draftKey=${draftKey}`,
        {
          headers: {
            "X-API-KEY": "xxxxxxx-xxxx-xxxxx-xxxx-xxxxxxxx",
          },
        }
      )
        .then((response) => {
          if (response.ok) {
            return response.json();
          }
        })
        .then((json) => {
          postData = setPostData(json);//ここで、postDataに取得したコンテンツが格納されます。
        });
    } else {
      return function cleanup() {
        console.log("done");
      };
    }
  });
  return (
        <div
          dangerouslySetInnerHTML={{
            __html: postData ? postData.sentence : "",
          }}
        ></div>
  );
}

export default previewPage;

このようなページを作成することで、アクセスした時にurlクエリパラメータの情報を基にコンテンツをとってきてくれます。
以下、詳しく説明していきます。

API部分について

microCMSはPOSTとGETのAPI-KEYが違うのでGETのAPIが露出しても大して問題はないですが、なんとなく気持ちが悪いので、
X-API-KEY: "xxxxx-xxxx"としている部分とmicroCMSのurl部分は実際には環境変数に置き換えるのが望ましいです。環境変数の使い方に関してはこちらの記事の中でも説明しているので是非ご覧ください。

gatsby-query-paramsについて

2行目に登場するgatsby-query-paramsはこちらです。
使用するにはターミナルでnpm i gatsby-query-paramsしてください。

コメントアウト部分にもありますが、getSearchParamsによって、urlクエリパラメータの情報をqueryParamsにオブジェクト形式で格納しています。

useState useEffectについて

これらはReactのhookで、詳しい説明はこちらにあります。
useEffectの中で、↑で取得したクエリパラメータを基にmicroCMSにデータを取得しにいき、取得できたら、それをpostDataに格納しています。

responce.okについて

これがないとmicroCMSのレスポンスが404の時(useStateがnullの間)返ってくる空文字列""を処理しようとしてしまい、jsonオブジェクトでないのでエラーが出てしまいます。

レンダリング部分について

return()内のpostData ? postData.sentence : ''としている部分で、postDataに↑でとってきた記事データが格納されたら、それが表示されるようになっています。postData.sentenceと書いていますが、sentenceの部分はmicroCMSで定義した表示したいデータのフィールドIDが入ります。レンダリング部分は他の記事ページのレイアウトに合わせて、煮るなり焼くなりしてください！

まとめ

サイトを見にきた人が、/今回作ったページと打つとアクセスできてしまいますが、contentsIdとdraftKeyがないので何も表示されないですし、一応は問題ないと思います。

色々と改善の余地はありそうですが、とりあえずこれで投稿前の記事をプレビューで確認できるので、是非活用してみてください！

概要

Chart.jsでは普通にグラフを作ると画面の幅に合わせて１つのデータ当たりのサイズをレスポンシブに調整して表示してくれます．

とても便利ですが，データの量が多いとかなり見づらくなってしまいます．

そこでデータ１つ当たりの横幅を固定して画面に収まりきらない分は横スクロールで見えるようにしようと思いましたが，かなり苦労したのでメモを残します．参考になれば幸いです．

完成図

今回は棒グラフが必要だったので，棒グラフを作成しました．
他の種類のグラフは試していませんが，データ構造が同じようなグラフなら上手くいくと思います．

図の下にスクロールバーが描画され，スクロールバーを動かすとスクロールすることができます．
(右の方はラベルしか描画されていませんが，値を入れなかっただけなので気にしないでください．）

実行環境

ブラウザ: Google Chrome
Chart.js バージョン: 2.9.3
CDNを読み込んで使っています

<head>
  <script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.3/dist/Chart.min.js"></script>
</head>

HTML

まずhtmlがこちらです．

<div class="chartWrapper" style="position: relative; overflow-x: scroll;">
  <div class="chartContainer" style="height:200px;"> //高さは好きに設定
    <canvas id="chart" style="position: absolute; left: 0; top: 0;"></canvas>
  </div>
</div>

canvasを２つのdivで囲っています．

Javascript

続いてJavasciptがこちらです．

var xAxisLabelMinWidth = 15; // データ当たりの幅を設定
var data = [12, 19, 3, 5, 2];
var width = data.length*xAxisLabelMinWidth; // グラフ全体の幅を計算
document.getElementById('chart').style.width = width+"px"; //　グラフの幅を設定
document.getElementById('chart').style.height = "200px"; //htmlと同じ高さを設定

var myChart = new Chart(document.getElementById('chart').getContext('2d'), {
    type: 'bar',
    data: {
      labels: ['a', 'b', 'c', 'd', 'e'],
        datasets: [{
            label: 'sample data',
            data: data,
        }]
    },
    options: {
        responsive: false, //trueにすると画面の幅に合わせて作図してしまう
    }
});

データ当たりの幅をまず設定して，そこからグラフ全体の幅を計算しています．
これによりデータごとの描画サイズを固定することができます．

完成

以上のコードで横スクロール可能な図を作成できると思います．

参考

https://stackoverflow.com/questions/39473991/how-to-make-a-chart-js-bar-chart-scrollable
https://stackoverrun.com/ja/q/10874652

これらを参考にしましたが，自分の環境ではうまくいかなかったので修正しています．