はじめに

某プログラミングスクールで、メ○○リのコピーサイトを作成しました。
チームメンバーが実装していた、ボタンを押すとパスワードの黒丸を文字として表示させる
実装を今日はやっていきたいと思います！と思ったのですが、
すでに下記の参考記事で簡単に作成できました。
パスワード表示時にマスキング有無を選択できるようにする方法

なので、自分のメモ用で記載していきます。
ちなみにこんな感じのものを実装していきます。

解説

1.まずパスワードを文字として表示していきます。

　(1)hamlを記載していきます。(一部のみ表示しています。)

password.html.haml

= form_for @resume do |f|
  = f.password_field :password,placeholder: '検索時に使用するパスワードを入力',class:"content_main9__form9--password",id:'password'
  %input#js-passcheck{type: "checkbox"}
  %label{for: "js-passcheck"} パスワードを表示する

コードはこんな感じです。

　(2)jsを記載していきます。

password.js

$(function(){
  var password = '#password'; #haml内のid:'password'を取得して代入。
  var passcheck = '#js-passcheck'; #haml内のid:'js-passcheck'を取得して代入。

  $(passcheck).change(function(){  #チェックボックスを押した際に発火するイベントを作成
    if ($(this).prop('checked')){   #チェックボックスにチェックが入った場合発火
      $(password).attr('type','text');  #パスワードのタイプをtypeからtextへ変更することで文字表示
    }
  });
});

チェックボックスを押した際に発火するイベントを作成しています。
そして、チェックボックスにチェックが入った時に、
input内のtypeをpasswordからtextへと変更する形となっています。
なので、input内の文字が表示されるようです。

2.パスワードを黒丸に戻します。

password.js

$(function(){
  var password = '#password'; #haml内のid:'password'を取得して代入。
  var passcheck = '#js-passcheck'; #haml内のid:'js-passcheck'を取得して代入。

  $(passcheck).change(function(){  #チェックボックスを押した際に発火するイベントを作成
    if ($(this).prop('checked')){   #チェックボックスにチェックが入った場合発火
      $(password).attr('type','text');  #パスワードのタイプをtypeからtextへ変更することで文字表示
    } else {                            #チェックボックスからチェックがなくなった際に発火
      $(password).attr('type','password');  #パスワードのタイプをpasswordへと変更
    }
  });
});

次に、elseの部分では、チェックボックスからチェックがなくなった時のイベントとなっています。
この文で、inputのtypeをtextからpasswordへと変更しているため、
文字が再び黒丸へと戻るようです。

まとめ

もし間違えている理解が間違っている部分等が、ありましたらコメントをいただけると幸いです。

proxy で配列の変更を検知したあとの処理で、「変更前の配列」と「変更後の配列」を比較したくなりました。

以下、2つの配列を受け取って、増分値と減分値の配列をオブジェクトで返す関数です。

// 配列の差異を取得する処理
const get_difference = ( _old_arr, _next_arr ) => {

  const additions = _next_arr.filter(
    _next => _old_arr.every(
      _old => _old !== _next
    )
  );

  const subtractions = _old_arr.filter(
    _old => _next_arr.every(
      _next => _old !== _next
    )
  );

  return {
    additions : additions,       //  増えた分
    subtractions : subtractions  //  減った分
  };
}

以下、関数の挙動を確かめます。

//  要素を増やします
const arr1 = [ 1, 2, 3 ];
const arr2 = [ ...arr1, 4, 5 ];

const result1 = get_difference( arr1, arr2 );
console.log( result1.additions );      //  [ 4, 5 ]
console.log( result1.subtractions );   //  []

//  要素を増減させます
const arr3 = [ 'a', 'b', 'c', 'd' ];
const arr4 = [ 'a', 'b', 'e', 'f' ];

const result2 = get_difference( arr3, arr4 );
console.log( result2.additions );      // [ 'e', 'f' ]
console.log( result2.subtractions );   // [ 'c', 'd' ]

もっといい方法があったら、ぜひ教えてください。

以下、おまけです。（proxy で用いた例です）

let obj = {
  array : [ 1, 2, 3 ]
}

let proxy = new Proxy( obj, {
  set( _obj, _prop, _next ){

    const old = _obj[ _prop ];

    if( _prop === 'array' ){
      const difference = get_difference( old, _next );
      console.log( 'additions : ' + difference.additions );
      console.log( 'subtractions : ' + difference.subtractions );
    }
    _obj[ _prop ] = _next;

  }
} );

proxy.array = [ ...obj.array, 4, 5 ];
//  additions : 4, 5

proxy.array = [ 1, 2, 4, 6 ];
//  additions : 6
//  subtrctions 3, 5

コンソールに貼る

コンソール

$.fn.jquery 

このように表示される

コンソール

$.fn.jquery 
"1.12.4"

何を作成する？

Nest.jsで環境ごとにデータベースの接続先を分けるために，接続情報を実行環境の環境変数から非同期で取得し作成する．

環境

• Node.js v12.14.1
• Nest.js v6.7.2
• TypeORM v0.2.22
• Postgresql v11.6

実装ログ

必要最小限の実装

参考）Nest.js Document > TECHNIQUES >Database

ライブラリインストール

TypeORM, Database Driver (Postgresql)をインストールする．

$ npm install @nestjs/typeorm typeorm pg

DB接続情報を定義

app.module.tsにデータベースの接続情報を定義する．

import { Module } from '@nestjs/common';
import { TypeOrmModule } from '@nestjs/typeorm';
import { ItemModule } from './item/item.module';
import { Connection } from 'typeorm';
import { join } from 'path';

@Module({
  imports: [
    ItemModule,
    // DBの接続情報を定義
    TypeOrmModule.forRoot({
      type: 'postgres',
      host: 'localhost',
      port: 5432,
      username: 'postgres',
      password: 'postgres',
      database: 'postgres',
      entities: [join(__dirname + '/**/*.entity{.ts,.js}')],
      synchronize: false,
    }),
  ],
})
export class AppModule {}

一番シンプルな書き方です．自分一人しか触らず，環境もこれだけ！ということであればこの書き方で良いでしょう．

しかし，実際の開発では個人の開発環境，テスト環境，ステージング環境，本番環境と複数の環境が存在し，上記のような実装では環境ごとに接続情報をハードコードし直し → ビルド → デプロイという手順を踏む必要がありナンセンスです．

そのため，通常は環境変数に定義し，接続情報はその環境変数を参照し作成します．

と，いうことで環境変数を参照するようにapp.module.tsを修正します．

環境変数を参照するように実装を修正

※この方法では実行時に依存関係が解決できずエラーとなります．

参考）Nest.js Document > TECHNIQUES > Configuration

ライブラリインストール

環境変数を参照するために必要なライブラリをインストールします．

$ npm install @nestjs/config

ダミーの環境変数を用意

本来は，環境変数に定義するのですがサンプル実装なので環境変数ファイル（.env）をプロジェクトルートに作成する．

DATABASE_HOST=localhost
DATABASE_PORT=5432
DATABASE_USERNAME=postgres
DATABASE_PASSWORD=postgres
DATABASE_NAME=postgres

環境変数を参照するように接続定義を修正

import { Module } from '@nestjs/common';
import { TypeOrmModule } from '@nestjs/typeorm';
import { ConfigModule, ConfigService } from '@nestjs/config';
import { ItemModule } from './item/item.module';
import { Connection } from 'typeorm';
import { join } from 'path';

@Module({
  imports: [
    ItemModule,
    ConfigModule.forRoot({
      envFilePath: '.env',
      isGlobal: true,
      // ignoreEnvFile: true, <- 環境変数から取得する場合はコメントアウトを外す．
    }),
    // 非同期で環境変数から値を取得し，接続情報を作成する．
    TypeOrmModule.forRootAsync({
      imports: [ConfigModule],
      useFactory: async (configServide: ConfigService) => ({
        type: 'postgres' as 'postgres',
        host: configServide.get('DATABASE_HOST'),
        port: Number(configServide.get('DATABASE_HOST')),
        username: configServide.get('DATABASE_USERNAME'),
        password: configServide.get('DATABASE_PASSWORD'),
        entities: [join(__dirname + '/**/*.entity{.ts,.js}')],
        synchronize: false,
      }),
      inject: [ConfigService],
    }),
  ],
})
export class AppModule {
  constructor(private readonly connection: Connection) {}
}

起動後，以下のエラーが発生．

2:25:34 PM - Found 0 errors. Watching for file changes.
[Nest] 19111   - 01/13/2020, 2:25:35 PM   [NestFactory] Starting Nest application...
[Nest] 19111   - 01/13/2020, 2:25:35 PM   [InstanceLoader] TypeOrmModule dependencies initialized +24ms
[Nest] 19111   - 01/13/2020, 2:25:35 PM   [InstanceLoader] ConfigModule dependencies initialized +1ms
[Nest] 19111   - 01/13/2020, 2:25:35 PM   [ExceptionHandler] Nest can't resolve dependencies of the TypeOrmModuleOptions (?). Please make sure that the argument ConfigService at index [0] is available in the TypeOrmCoreModule context.

Potential solutions:
- If ConfigService is a provider, is it part of the current TypeOrmCoreModule?
- If ConfigService is exported from a separate @Module, is that module imported within TypeOrmCoreModule?
  @Module({
    imports: [ /* the Module containing ConfigService */ ]
  })
 +1ms
Error: Nest can't resolve dependencies of the TypeOrmModuleOptions (?). Please make sure that the argument ConfigService at index [0] is available in the TypeOrmCoreModule context.

Potential solutions:
- If ConfigService is a provider, is it part of the current TypeOrmCoreModule?
- If ConfigService is exported from a separate @Module, is that module imported within TypeOrmCoreModule?
  @Module({
    imports: [ /* the Module containing ConfigService */ ]
  })

    at Injector.lookupComponentInExports (/home/kawamura/docker/docker-services/sample-app/sample-back/node_modules/@nestjs/core/injector/injector.js:185:19)
    at processTicksAndRejections (internal/process/task_queues.js:94:5)
    at async Injector.resolveComponentInstance (/home/kawamura/docker/docker-services/sample-app/sample-back/node_modules/@nestjs/core/injector/injector.js:142:33)
    at async resolveParam (/home/kawamura/docker/docker-services/sample-app/sample-back/node_modules/@nestjs/core/injector/injector.js:96:38)
    at async Promise.all (index 0)
    at async Injector.resolveConstructorParams (/home/kawamura/docker/docker-services/sample-app/sample-back/node_modules/@nestjs/core/injector/injector.js:111:27)
    at async Injector.loadInstance (/home/kawamura/docker/docker-services/sample-app/sample-back/node_modules/@nestjs/core/injector/injector.js:78:9)
    at async Injector.loadProvider (/home/kawamura/docker/docker-services/sample-app/sample-back/node_modules/@nestjs/core/injector/injector.js:35:9)
    at async Promise.all (index 3)
    at async InstanceLoader.createInstancesOfProviders (/home/kawamura/docker/docker-services/sample-app/sample-back/node_modules/@nestjs/core/injector/instance-loader.js:41:9)

環境変数を参照するためのConfigServiceがTypeOrmModuleOptions内で依存関係が解決できないことが原因らしい．

同じような事象がGithubのIssueにあがっていたので参考に載せておきます．
Can't init TypeOrmModule using factory and forRootAsync

環境変数を参照するように実装を修正

app.module.tsを以下のように修正します．

import { Module } from '@nestjs/common';
import { TypeOrmModule } from '@nestjs/typeorm';
import { ConfigModule } from '@nestjs/config';
import { ItemModule } from './item/item.module';
import { TypeOrmConfigService } from './common/database/type-orm-config.service';

@Module({
  imports: [
    ConfigModule.forRoot({
      envFilePath: '.env',
      isGlobal: true,
      // ignoreEnvFile: true, <- 環境変数から取得する場合はコメントアウトを外す．
    }),
    TypeOrmModule.forRootAsync({
      imports: [ConfigModule],
      // 接続情報を作成するServiceクラスを定義
      useClass: TypeOrmConfigService, 
    }),
    ItemModule,
  ],
})
export class AppModule {
}

type-orm-config.service.ts

import { TypeOrmOptionsFactory, TypeOrmModuleOptions } from '@nestjs/typeorm';
import { Injectable } from '@nestjs/common';
import { ConfigService } from '@nestjs/config';
import { join } from 'path';

/**
 * DBの接続設定．
 */
@Injectable()
export class TypeOrmConfigService implements TypeOrmOptionsFactory {
  /**
   * DBの接続設定を環境変数をもとに作成します．</br>
   * 環境変数に設定されていない場合は，デフォルトの設定値を返却します．
   * @returns 接続情報
   */
  createTypeOrmOptions(): TypeOrmModuleOptions {
    const configService = new ConfigService();
    return {
      type: 'postgres' as 'postgres',
      host: configService.get('DATABASE_HOST', 'localhost'),
      port: Number(configService.get('DATABASE_PORT', 5432)),
      username: configService.get('DATABASE_USERNAME', 'postgres'),
      password: configService.get('DATABASE_PASSWORD', 'postgres'),
      database: configService.get('DATABASE_NAME', 'postgres'),
      entities: [join(__dirname + '../**/*.entity{.ts,.js}')],
      synchronize: false,
    };
  }
}

ConfigServiceをDIするのではなく，自分でnewするのがポイントです．

最後に

最近使い始めたのですが，素晴らしいフレームワークだとひしひしと感じております．
フレームワーク自体の良さはこちらの記事で紹介されています．

参考

• NestJs公式ドキュメント

• Can't init TypeOrmModule using factory and forRootAsync

• Nest.jsは素晴らしい

メモ

開発メモ

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <title>練習</title>
</head>
<body>
    <input name="kanso" id = "num_1" rows="1" cols="10"></input>
    <input name="kanso" id = "num_2" rows="1" cols="10"></input>
    <p id="result_1"></p>
    <p id="result_2"></p>
</body>
<script>
    $("[id^=num_]").change(function () {
        let value = $(this).val(); // 値を取得
        let id = $(this).attr('id'); // id取得
        // idによってresult_{id}に値を入れる
        let res = id.replace(/[^0-9]/g, ''); // idの数字の部分のみを取得
        let result_id = "result_" + res; // 取得した数字でidを生成
        var result = document.getElementById(result_id); // 生成したidの要素を取得
        result.innerHTML = value ? value * 100 : ''; // 取得した要素に値を入れる（入力がない場合は空）
    });
</script>
</html>

Vueを触っている時、ブラウザを切り替えたタイミングでフォーカスを外したいコンポーネントにあうことはありませんか？
そんな時まず思い浮かぶのは、eventをpreventDefaultすることだと思います。
事実、私もそう思い実行しました。
しかし、うまくいきませんでした。
なぜ？調べてみました。

focusイベントについて

MDNを見てみる。

focus イベントは、要素がフォーカスを受け取ったときに発生します。このイベントと focusin との違いは、 focusin がバブリングを行うのに対し focus は行わないことです。
focus の反対は blur です。

バブリング	なし
キャンセル可能	いいえ

キャンセル不可のため、preventDefalutは効かないらしい・・・。
というこで、フォーカスを発生させないためには逆にフォーカスを外してやればいい。
まぁそういえばそうかといった感じですが・・・

正解コード(javascript)

el-tooltipはコンポーネント内のフォーカスを外したい要素のクラス名称です。

App.js

mounted: () => {
    window.onfocus = () => {
        const onFocusElm = window.document.activeElement;
        if (onFocusElm.classList.contains("el-tooltip")) {
            onFocusElm.blur();
        }
    };
}

正解コード(typescript)

App.ts

mounted() => {
    window.onfocus = () => {
        const onFocusElm = window.document.activeElement;
        if (onFocusElm.classList.contains("el-tooltip")) {
            (onFocusElm as HTMLElement).blur();
        }
    };
}

javascriptのエラー解決に苦心したので、その記録。

状況

チャットアプリのメッセージ機能の更新を非同期通信上で、実施しようとしたところ、
投稿まで非同期で通信できなくなった。

問題のjsファイル

(function(){
  var buildHTML = function(message){
    console.log(message)
    if (message.image){
      console('1')
      var html =  
        `<div class = "message" data-message-id=${message.id}>
        <div class="messages__message" >
          <div class="messages__message__info">
            <div class="messages__message__info__member">
              ${message.user_name}
            </div>
            <div class="messages__message__info__date">
              ${message.created_at}
            </div>
          </div>
          <div class="messages__message__text">
            <p class="messages__message__text__content">
              ${message.content}
            </p>
          </div>
          <img src=${message.image} >
        </div>`
        return html;
    } else {
      console.log('2')
      var html =
        `<div class = "message" data-message-id=${message.id}>
        <div class="messages__message" >
          <div class="messages__message__info">
            <div class="messages__message__info__member">
              ${message.user_name}
            </div>
            <div class="messages__message__info__date">
              ${message.created_at}
            </div>
          </div>
          <div class="messages__message__text">
            <p class="messages__message__text__content">
              ${message.content}
          </p>
        </div>`
        return html;
    };
  }

    $('.new_message').on('submit', function(e){
    e.preventDefault();
    var formData = new FormData(this);
    var url = $(this).attr('action')
    $.ajax({
      url: url,
      type: "POST",
      data: formData,
      dataType: 'json',
      processData: false,
      contentType: false
    })
    .done(function(data){
      console.log(data)
      var html = buildHTML(data);
      $('.middle').append(html);
      $('form')[0].reset();
      $('.middle').animate({ scrollTop: $('.middle')[0].scrollHeight},'fast');
      $('input').prop('disabled', false);
    })
    .fail(function(){
      alert('メッセージ送信に失敗しました');
    })
  })

  var reloadMessages = function() {
    //カスタムデータ属性を利用し、ブラウザに表示されている最新メッセージのidを取得
    last_message_id = $('.message:last').data("message-id");
    $.ajax({
      //ルーティングで設定した通りのURLを指定
      url: "api/messages",
      //ルーティングで設定した通りhttpメソッドをgetに指定
      type: 'get',
      dataType: 'json',
      //dataオプションでリクエストに値を含める
      data: {id: last_message_id}
    })
    .done(function(messages) {
      console.log(messages)
      if (messages.length !== 0) {
        //追加するHTMLの入れ物を作る
        var insertHTML = '';
        //配列messagesの中身一つ一つを取り出し、HTMLに変換したものを入れ物に足し合わせる
        $.each(messages, function(i, message) {
          insertHTML += buildHTML(message)
        });
        //メッセージが入ったHTMLに、入れ物ごと追加
        $('.middle').append(insertHTML);
        $('.middle').animate({ scrollTop: $('.middle')[0].scrollHeight});
        $("#new_message")[0].reset();
        $(".form__submit").prop("disabled", false);
      }
    })
    .fail(function() {
      console.log('error');
    });
  };
  if (document.location.href.match(/\/groups\/\d+\/messages/)) {
    setInterval(reloadMessages, 7000);
  }
});

関連するhamlファイル

.messages
  .messages__message
    .messages__message__info
      .messages__message__info__member
        = message.user.name
      .messages__message__info__date
        = message.created_at.strftime("%Y年%m月%d日 %H時%M分")
    .messages__message__text
      - if message.content.present?
        %p.messages__message__text__content
          = message.content
      = image_tag message.image.url, class: 'lower-message__image' if message.image.present?

問題解決までの変更点は以下のとおり。
1.　jsファイル、"buildHTML"内で定義されたhtmlにreturn html;を2箇所追記する。（エラーの解決にはこれだけでよかった気もする...）
2.　hamlファイルから".message"のクラスを削除、hamlファイルとscssファイルをそれに合わせて調整する。
3.　そのままでは自動更新された文にcssが当たらないので、"div class="messages__message" "の記述を削除する。（本来は閉じタグも消去しなければいけないが、記述ミスで上記コードには表記されていなかった）
4.　.done内の".message"でクラス指定されている部分のクラスを指定し直す。

変更後のコードは以下

jsファイル

$(function(){
  var buildHTML = function(message){
    if (message.image){
      var html =  
        `<div class = "message" data-message-id=${message.id}>
          <div class="message__info">
            <div class="message__info__member">
              ${message.user_name}
            </div>
            <div class="message__info__date">
              ${message.created_at}
            </div>
          </div>
          <div class="message__text">
            <p class="message__text__content">
              ${message.content}
            </p>
          </div>
          <img src=${message.image} >
        </div>`
        return html;
    } else {
      var html =
        `<div class = "message" data-message-id=${message.id}>
          <div class="message__info">
            <div class="message__info__member">
              ${message.user_name}
            </div>
            <div class="message__info__date">
              ${message.created_at}
            </div>
          </div>
          <div class="message__text">
            <p class="message__text__content">
              ${message.content}
            </p>
        </div>`
        return html;
    };
  }

    $('.new_message').on('submit', function(e){
    e.preventDefault();
    var formData = new FormData(this);
    var url = $(this).attr('action')
    $.ajax({
      url: url,
      type: "POST",
      data: formData,
      dataType: 'json',
      processData: false,
      contentType: false
    })
    .done(function(data){
      var html = buildHTML(data);
      $('.middle').append(html);
      $('form')[0].reset();
      $('.middle').animate({ scrollTop: $('.middle')[0].scrollHeight},'fast');
      $('input').prop('disabled', false);
    })
    .fail(function(){
      alert('メッセージ送信に失敗しました');
    })
  })

  var reloadMessages = function() {
    //カスタムデータ属性を利用し、ブラウザに表示されている最新メッセージのidを取得
    last_message_id = $('.message:last').data("message-id");
    $.ajax({
      //ルーティングで設定した通りのURLを指定
      url: "api/messages",
      //ルーティングで設定した通りhttpメソッドをgetに指定
      type: 'get',
      dataType: 'json',
      //dataオプションでリクエストに値を含める
      data: {id: last_message_id}
    })
    .done(function(messages) {
      if (messages.length !== 0) {
        //追加するHTMLの入れ物を作る
        var insertHTML = '';
        //配列messagesの中身一つ一つを取り出し、HTMLに変換したものを入れ物に足し合わせる
        $.each(messages, function(i, message) {
          insertHTML += buildHTML(message)
        });
        //メッセージが入ったHTMLに、入れ物ごと追加
        $('.middle').append(insertHTML);
        $('.middle').animate({ scrollTop: $('.middle')[0].scrollHeight});
        $("#new_message")[0].reset();
        $(".form__submit").prop("disabled", false);
      }
    })
    .fail(function() {
      console.log('error');
    });
  };
  if (document.location.href.match(/\/groups\/\d+\/messages/)) {
    setInterval(reloadMessages, 7000);
  }
});

hamlファイル

.message{data: {message: {id: message.id}}}
  .message__info
    .message__info__member
      = message.user.name
    .message__info__date
      = message.created_at.strftime("%Y年%m月%d日 %H時%M分")
  .message__text
    - if message.content.present?
      %p.message__text__content
        = message.content
    = image_tag message.image.url, class: 'lower-message__image' if message.image.present?

javascriptのエラー解決に苦心したので、その記録。

状況

チャットアプリのメッセージ機能の更新を非同期通信上で、実施しようとしたところ、
投稿まで非同期で通信できなくなった。

問題のjsファイル

(function(){
  var buildHTML = function(message){
    console.log(message)
    if (message.image){
      console('1')
      var html =  
        `<div class = "message" data-message-id=${message.id}>
        <div class="messages__message" >
          <div class="messages__message__info">
            <div class="messages__message__info__member">
              ${message.user_name}
            </div>
            <div class="messages__message__info__date">
              ${message.created_at}
            </div>
          </div>
          <div class="messages__message__text">
            <p class="messages__message__text__content">
              ${message.content}
            </p>
          </div>
          <img src=${message.image} >
        </div>`
        return html;
    } else {
      console.log('2')
      var html =
        `<div class = "message" data-message-id=${message.id}>
        <div class="messages__message" >
          <div class="messages__message__info">
            <div class="messages__message__info__member">
              ${message.user_name}
            </div>
            <div class="messages__message__info__date">
              ${message.created_at}
            </div>
          </div>
          <div class="messages__message__text">
            <p class="messages__message__text__content">
              ${message.content}
          </p>
        </div>`
        return html;
    };
  }

    $('.new_message').on('submit', function(e){
    e.preventDefault();
    var formData = new FormData(this);
    var url = $(this).attr('action')
    $.ajax({
      url: url,
      type: "POST",
      data: formData,
      dataType: 'json',
      processData: false,
      contentType: false
    })
    .done(function(data){
      console.log(data)
      var html = buildHTML(data);
      $('.middle').append(html);
      $('form')[0].reset();
      $('.middle').animate({ scrollTop: $('.middle')[0].scrollHeight},'fast');
      $('input').prop('disabled', false);
    })
    .fail(function(){
      alert('メッセージ送信に失敗しました');
    })
  })

  var reloadMessages = function() {
    //カスタムデータ属性を利用し、ブラウザに表示されている最新メッセージのidを取得
    last_message_id = $('.message:last').data("message-id");
    $.ajax({
      //ルーティングで設定した通りのURLを指定
      url: "api/messages",
      //ルーティングで設定した通りhttpメソッドをgetに指定
      type: 'get',
      dataType: 'json',
      //dataオプションでリクエストに値を含める
      data: {id: last_message_id}
    })
    .done(function(messages) {
      console.log(messages)
      if (messages.length !== 0) {
        //追加するHTMLの入れ物を作る
        var insertHTML = '';
        //配列messagesの中身一つ一つを取り出し、HTMLに変換したものを入れ物に足し合わせる
        $.each(messages, function(i, message) {
          insertHTML += buildHTML(message)
        });
        //メッセージが入ったHTMLに、入れ物ごと追加
        $('.middle').append(insertHTML);
        $('.middle').animate({ scrollTop: $('.middle')[0].scrollHeight});
        $("#new_message")[0].reset();
        $(".form__submit").prop("disabled", false);
      }
    })
    .fail(function() {
      console.log('error');
    });
  };
  if (document.location.href.match(/\/groups\/\d+\/messages/)) {
    setInterval(reloadMessages, 7000);
  }
});

関連するhamlファイル

.messages
  .messages__message
    .messages__message__info
      .messages__message__info__member
        = message.user.name
      .messages__message__info__date
        = message.created_at.strftime("%Y年%m月%d日 %H時%M分")
    .messages__message__text
      - if message.content.present?
        %p.messages__message__text__content
          = message.content
      = image_tag message.image.url, class: 'lower-message__image' if message.image.present?

問題解決までの変更点は以下のとおり。
1.　jsファイル、"buildHTML"内で定義されたhtmlにreturn html;を2箇所追記する。（エラーの解決にはこれだけでよかった気もする...）
2.　hamlファイルから".message"のクラスを削除、hamlファイルとscssファイルをそれに合わせて調整する。
3.　そのままでは自動更新された文にcssが当たらないので、"div class="messages__message" "の記述を削除する。（本来は閉じタグも消去しなければいけないが、記述ミスで上記コードには表記されていなかった）
4.　.done内の".message"でクラス指定されている部分のクラスを指定し直す。

変更後のコードは以下

jsファイル

$(function(){
  var buildHTML = function(message){
    if (message.image){
      var html =  
        `<div class = "message" data-message-id=${message.id}>
          <div class="message__info">
            <div class="message__info__member">
              ${message.user_name}
            </div>
            <div class="message__info__date">
              ${message.created_at}
            </div>
          </div>
          <div class="message__text">
            <p class="message__text__content">
              ${message.content}
            </p>
          </div>
          <img src=${message.image} >
        </div>`
        return html;
    } else {
      var html =
        `<div class = "message" data-message-id=${message.id}>
          <div class="message__info">
            <div class="message__info__member">
              ${message.user_name}
            </div>
            <div class="message__info__date">
              ${message.created_at}
            </div>
          </div>
          <div class="message__text">
            <p class="message__text__content">
              ${message.content}
            </p>
        </div>`
        return html;
    };
  }

    $('.new_message').on('submit', function(e){
    e.preventDefault();
    var formData = new FormData(this);
    var url = $(this).attr('action')
    $.ajax({
      url: url,
      type: "POST",
      data: formData,
      dataType: 'json',
      processData: false,
      contentType: false
    })
    .done(function(data){
      var html = buildHTML(data);
      $('.middle').append(html);
      $('form')[0].reset();
      $('.middle').animate({ scrollTop: $('.middle')[0].scrollHeight},'fast');
      $('input').prop('disabled', false);
    })
    .fail(function(){
      alert('メッセージ送信に失敗しました');
    })
  })

  var reloadMessages = function() {
    //カスタムデータ属性を利用し、ブラウザに表示されている最新メッセージのidを取得
    last_message_id = $('.message:last').data("message-id");
    $.ajax({
      //ルーティングで設定した通りのURLを指定
      url: "api/messages",
      //ルーティングで設定した通りhttpメソッドをgetに指定
      type: 'get',
      dataType: 'json',
      //dataオプションでリクエストに値を含める
      data: {id: last_message_id}
    })
    .done(function(messages) {
      if (messages.length !== 0) {
        //追加するHTMLの入れ物を作る
        var insertHTML = '';
        //配列messagesの中身一つ一つを取り出し、HTMLに変換したものを入れ物に足し合わせる
        $.each(messages, function(i, message) {
          insertHTML += buildHTML(message)
        });
        //メッセージが入ったHTMLに、入れ物ごと追加
        $('.middle').append(insertHTML);
        $('.middle').animate({ scrollTop: $('.middle')[0].scrollHeight});
        $("#new_message")[0].reset();
        $(".form__submit").prop("disabled", false);
      }
    })
    .fail(function() {
      console.log('error');
    });
  };
  if (document.location.href.match(/\/groups\/\d+\/messages/)) {
    setInterval(reloadMessages, 7000);
  }
});

hamlファイル

.message{data: {message: {id: message.id}}}
  .message__info
    .message__info__member
      = message.user.name
    .message__info__date
      = message.created_at.strftime("%Y年%m月%d日 %H時%M分")
  .message__text
    - if message.content.present?
      %p.message__text__content
        = message.content
    = image_tag message.image.url, class: 'lower-message__image' if message.image.present?

初めましてプログラミング初心者です

個人アプリ作成しています

ボタンが押されたときにボタンの色が変わるように実装しています

教えていただける方いましたらお願いします

haml
%input{type: "button", value: "12", class: "btn"}

js
$(function(){
$('.btn').on('click', function(event){
event.preventDefault();
$(this).toggleClass('active');
});
});

scss
input{
width: calc(100% / 5);
height: 40px;
color:whitesmoke;
margin-left: 8px;
.btn.active{
color: red;
background-color: red;
}

GASで引数に日時を取るスラッシュコマンドを作るにあたって、「スラッシュコマンドで指定する日付と時刻はわかりやすいYYYY/MM/DD/hh/mm/ssがいい。でもSlack APIを叩く時はUNIXタイムスタンプで指定しないといけない」という都合により、GASで「YYYY/MM/DD/hh/mm/ss→UNIXタイムスタンプ」の変換をすることになったんですが、思いの外ネット上にベストマッチなソリューションが見当たらなかったので書き残しておきます。

実装①

//2020年1月1日12時34分56秒
var str = "2020/01/01/12/34/56"
var array = str.split(/\//).map(Number)
var date = new Date(array[0], array[1] - 1, array[2], array[3], array[4], array[5])
date = (date.getTime() / 1000) + ''
Logger.log(date) // -> 1577849696

実装②

var str = "2020/01/01/12/34/56"
var array = str.split(/\//)
var date = Utilities.formatString("%s-%s-%sT%s:%s:%s+09:00", array[0], array[1], array[2], array[3], array[4], array[5])
date = Date.parse(date) / 1000 + ''
Logger.log(date) // -> 1577849696

確認

UNIX時間⇒日付変換 - 高精度計算サイト - Keisan - CASIO

1000で割る意味

getTime()やDate.parse()によって返ってくるUNIX時は単位がミリ秒になっています。Slack APIで指定するタイムスタンプは秒単位でなければならないので、1000で割った値を文字列に変換しています。

実装①のメリデメ

メリット：

• 一度数値に変換するので、引数のバリデーションとかゼロ埋めとか気にしなくていい（？）
• 短くて読みやすい（？）

デメリット：

• Dateオブジェクトを経由するのが煩わしくないこともない
• Dateクラスのメソッドの仕様が厄介

デメリットの方について少し説明しますと、数列からDateオブジェクトを生成するnew Date()の構文は

new Date(year, monthIndex [, day [, hours [, minutes [, seconds [, milliseconds]]]]]);

なのですが、このmonthIndexは0から11で指定するんですね。

注: 引数 monthIndex は 0 から始まります。 つまり 1 月 = 0、 12 月 = 11 です。

Date - JavaScript | MDN

なので、new Date()に渡す時にそこだけ- 1する必要があります。

あと、公式マニュアルを見返していて気付いたんですが（強調は筆者）、

注: Date を複数の引数を伴ってコンストラクタとして呼び出された場所では、値が論理範囲より大きくても (month 値に 13 を与えたり、minute 値に 70 を与える)、調整された値になります。つまり、new Date(2013, 13, 1) は、new Date(2014, 1, 1) と等しくなるように調整され、両者とも 2014-02-01 の日付を生成します

……何…… ……だと……（画像略）

var str = "2020/13/01/01/03/05"
var array = str.split(/\//).map(Number)
var date = new Date(array[0], array[1] - 1, array[2], array[3], array[4], array[5])
Logger.log(date) // -> Fri Jan 01 01:03:05 GMT+09:00 2021

……ほん…… ……とだ……（来年の元日って金曜なんだ）

これだとうっかりタイポした時にちゃんと動作してくれないどころか全く予想外の結果になってしまいますね・・・。

結局バリデーションを自分で設定しないといけないとなると、最初に挙げたメリットもおじゃんになってしまいました。無念。

実装②のメリデメ

メリット：

• 分割してフォーマットに流し込んでパースするだけ
• パースした返り値がUNIX時の整数値になっているため目的に合致している
• フォーマットが厳密に決まっているので、実装①のような厄介な挙動をしない

デメリット：

• 特にない？

↓の記事ではDate.parse()の返り値がDateではなく整数になることを「罠」と形容していますが、今回のような使い方をする場合にはまさしく割れ鍋に綴じ蓋ですね。

JavaScript の Date は罠が多すぎる - Qiita

そして"2020/13/01/01/03/05"のようなありえない日付を指定した場合の挙動ですが、

var str = "2020/01/13/12/34/56"
var array = str.split(/\//)
var date = Utilities.formatString("%s-%s-%sT%s:%s:%s+09:00", array[0], array[1], array[2], array[3], array[4], array[5])
date = Date.parse(date) / 1000 + ''
Logger.log(date) // -> NaN

ちゃんと失敗してくれています。これなら例外処理を入れるにもif(isNaN(date))で済みます。いいですね。っていうかマニュアルにちゃんと書いてあるんですけども。

文字列を解釈できなかったり不正な日付 (例えば 2015-02-31) が指定された場合 NaN を返します。

Date.parse() - JavaScript | MDN

ちなみに、Date.parse()といえばブラウザによって挙動が異なる¹ことで有名（らしい）ですが、今回はGASなのでGASで動けば十分ということで、これでいいと思います（GASの仕様が変わらなければ）。

まとめ

2つの実装の長所・短所を比較した結果、実装②の方が良さそうだなと思いました。

書き始める前は実装①推しだったんですが、やはりマニュアルはちゃんと読んでおくべきですね。色んな意味で勉強になりました。

最後まで読んでいただきありがとうございました。

---

1. でも→を見る限りでは、最新バージョンならほとんどのブラウザで問題なく動作するんですかね？Date.parse() ブラウザー実装状況 - JavaScript | MDN ↩

100日チャレンジの211日目

twitterの100日チャレンジ#タグ、#100DaysOfCode実施中です。
すでに100日超えましたが、継続。

100日チャレンジは、ぱぺまぺの中ではプログラミングに限らず継続学習のために使っています。

211日目は

おはようございます
211日目

udemyでjavascript

あんまりやった感がない#100DaysOfCode #駆け出しエンジニアと繋がりたい #早起きチャレンジ

— ぱぺまぺ@webエンジニアを目指したい社畜 (@yudapinokio) January 14, 2020

sorceryでRails +SPA構成のOauthサンプルがあまりなさそうなので
参考になれば。

環境

backend
- rails 6系

front
- react:16.12
- react-router: v5系

以下、sorceryのwikiに沿いつつ、SPA用でカスタムしたところを中心に記載
sorcery wiki

今回はgithub と連携してみる

開発の概要

Backend(Rails)
- oauthからのcallbackを受け取り、ユーザー作成及びログイン処理

Front(React)
- githubAPIへQueryString形式でパラメーターをもたせてアクセス。
- 認証後callBackURLにリダイレクトし、Backendに取得したパラメーターを送信

Backend側開発

---

external module関連のセットアップ

# external moduleのインストール
bundle exec rails g sorcery:install external --only-submodules

# migration
bundle exec rails db:migrate

# 認証用モデル作成
bundle exec rails g model Authentication --migration=false

sorceryのgithub認証関連設定変更

認証用情報の取得
github側の認証設定は以下から行う
https://github.com/settings/developers

initializers/sorcery.rb

Rails.application.config.sorcery.submodules = [:external] #:external追加
Rails.application.config.sorcery.configure do |config|
　...
  config.github.key = "your github key"
  config.github.secret = "your github secret"
  config.github.callback_url = ""
  config.github.user_info_mapping = {:email => "email" }
  config.github.scope = "user:email"
end

Oauth用controllerの作成

oauths_controller

class OauthsController < ApplicationController
# Frontで取得したToken情報をもとにユーザー認証をするMethod
  def callback
    provider = params[:provider]
    # loginできた場合はここで200を返す
    if @user = login_from(provider)
      render json: { status: 'OK' }
    else
      begin
       # loginできない場合は送られてきた情報をもとにユーザー作成
        @user = create_from(provider)

        reset_session
        auto_login(@user)
        render json: { status: 'OK'　}
      rescue
        render json: { status: 'NG' }, status: 400
      end
    end
  end
end

ルーティングの設定

• wiki記載の内容と異なり、oauth用tokenが送信されてくるAPIのみでOK

config/routes.rb

Rails.application.routes.draw do 
  ...
  post "oauth/callback" => "oauths#callback"
end

Front側開発

---

関連するルーティングの定義

router.jsx

const AppRouter = () => (
  <Router>
    <Switch>
      <Route
        path="/callback/:provider/"
        component={ExternalAuthCallback}
      />
      <Route path="/sign_in" component={SignIn} />
      <Route component={NotFound} />
    </Switch>
  </Router>
);

export default AppRouter;

サインインページ

• サインインページの1機能としてGithub認証があるイメージ
• 通常のRailsのOauthと異なり、callbackされるURLはReactで構成されたSPAのURL(=>"/callback/:provider/")が叩かれることに注意

SignIn.jsx

// CONST.GITHUB.REDIRECT_URL = "http://localhost:3001/callback/github/"

const GITHUB_AUTH_URL = `https://github.com/login/oauth/authorize?client_id=${CONST.GITHUB.APP_ID}&redirect_url=${CONST.GITHUB.REDIRECT_URL}&scope=user:email`;

// ただ queryStringの付与したURLのリンクを踏ませるだけ
const signInForm = () => (
      <div className={styles.submitBox}>
        <Button href={GITHUB_AUTH_URL}>GITHUBで認証</Button>
      </div>
);

export default signInForm;

CallbackURLコンポーネント

• callback時に叩かれるURLで利用するコンポーネント
• URLパラメーターでprovider名（今回は"github")を取得
• callbackURLのquesyStringに付与された認証情報（code=XXXX）を取得
• ReactからバックエンドAPIへPostする

oAuthCallback/index.jsx

import React, { useState } from "react";
import queryString from "query-string";
import { useHistory } from "react-router";
import { useParams, useLocation } from "react-router-dom";
import { api } from "../../../modules/user";
import Circular from "../../atoms/circular";

const BEFORE = "BEFORE";
const DOING = "DOING";

const ExternalAuth = () => {
  const location = useLocation();
  const history = useHistory();
  const { code = "" } = queryString.parse(location.search);
  const { provider = "" } = useParams();
  const [requestStatus, setRequestStatus] = useState(BEFORE);

  const request = () => {
    setRequestStatus(DOING);
    api.sendExternalAuthRequest({ code, provider }).then(isSuccess => {
      if (isSuccess) {
        history.push("/member/dashboard"); // login後ページ
      } else {
        history.push(PAGE_PATH.AUTH_SIGN_IN); //認証失敗した場合
      }
    });
  };
　   
  if (requestStatus === BEFORE) {
    request();
  }
  return (
    <div className={styles.container}>
      <Circular />
    </div>
  );
};

export default ExternalAuth;

Rails APIへのリクエスト

api.js

export const sendExternalAuthRequest = async ({
  code,
  provider
}) => {
  const requester = requestManager.get();
  return requester
    .post(
      "/oauth/callback",
      {
        code,
        provider
      },
    )
    .then(() => true)
    .catch(() => false);
};

以下をindex.htmlとして保存して、ブラウザで開けばconsoleに現在価格が次々と出ます。

index.html

<script>
    var sock = new WebSocket('wss://ws.lightstream.bitflyer.com/json-rpc');

    sock.addEventListener("open", e => {
        sock.send('{"method": "subscribe","params": {"channel": "lightning_ticker_FX_BTC_JPY" }}');
    });
    sock.addEventListener("message", e => {
        var json = JSON.parse(e.data).params.message;
        console.log(json);
    });
</script>

1.bitFlyerにWebSocket接続して
2.価格のチャンネルを購読(subscribe)すれば
3.次々と最新価格が送られて来て、そのたびにmessageイベントが発生する
という動きになります。

公開されているAPIですので、bitFlyer契約者でなくても試せます。

例ではビットコインFXの価格を取得しています。詳しくは以下
https://bf-lightning-api.readme.io/docs/realtime-ticker

関数

main.js

const kansu = function(){
    console.log("関数がうごいた！");
}
kansu();

関数がうごいた！

アロー関数

main.js

const arrawKansu = () =>{
    console.log('アロー関数が動いた!');
}

arrawKansu();

アロー関数が動いた!

引数

main.js

'use strict';
const eat = (name) =>{
    console.log(`飯の名前${name}`);
}

eat('カレー');
eat('チャーハン');
eat('白飯');

飯の名前カレー
飯の名前チャーハン
飯の名前白飯

複数の引数

main.js

const person = (firstName,lastName) =>{
    console.log(`「姓」:${firstName}「名」:${lastName}`);
}
person('鈴木','一郎');
person('田中','太郎');

「姓」:鈴木「名」:一郎
「姓」:田中「名」:太郎

戻り値

main.js

const person = (firstName,lastName) =>{
    console.log(firstName);
    console.log(lastName);
    return firstName + lastName;
}
const personName = person('鈴木','一郎');
console.log(personName);

鈴木
一郎
鈴木一郎

コンポーネントの特定の動作を外部から呼び出すための方法です。関数コンポーネントでも実装できました。もはやクラスではないのでインスタンスメソッドと呼ぶのは正確ではないかもしれませんが…。

propsの値変更で多くのことは実現できるので出番は限られてくると思いますが、入力フィールドにフォーカスする、CSSアニメーションを再生するといった場合には有効だと思います。クラスを使わずに実装する際の備忘録としてまとめました。

メソッドの実装（子コンポーネント）

useImperativeHandleフックとforwardRefを組み合わせて実装します。この例の場合、インスタンス.doSomething()が呼ばれたタイミングでログが出力されます。

import React, { useImperativeHandle, forwardRef } from 'react';

function MyComponent(props, ref) {
  useImperativeHandle(ref, () => ({
    doSomething: () => {
      console.log('Do something');
    }
  }));
  return <div>My Component</div>;
}

export default forwardRef(MyComponent);

メソッドの呼び出し（親コンポーネント）

useRefフックとref属性によって子コンポーネントのインスタンスが参照できるようになります。ref.current.メソッド()で先程のメソッドを呼び出します。

import React, { useRef } from 'react';
import MyComponent from './MyComponent';

export default function App() {
  const myComponent = useRef(null);
  return (
    <div>
      <MyComponent ref={myComponent} />
      <button onClick={() => myComponent.current.doSomething()}>
        Click
      </button>
    </div>
  );
}

先に謝罪しておきます．
Qiita初投稿です．
読みづらい点あると思います．
ごめんなさい．

Chatworkのデータをcsvでバックアップしておきたい！

なんらかの事情があって，ChatWorkのデータをcsvで手元に置いたり印刷したい！
そんな人もいるのではないでしょうか？

まぁ，だいたいエクスポート機能あるやろ．．．．
と思っているあなた．

公式ページのよくある質問
https://help.chatwork.com/hc/ja/articles/203352770-%E3%83%81%E3%83%A3%E3%83%83%E3%83%88%E3%81%AE%E3%83%AD%E3%82%B0%E3%82%92%E4%BF%9D%E5%AD%98%E3%81%A7%E3%81%8D%E3%81%BE%E3%81%99%E3%81%8B-%E5%8D%B0%E5%88%B7%E3%81%AA%E3%81%A9-

恐れ入りますが、現時点ではチャットのログの保存機能や印刷機能はありません。
なお、エンタープライズプラン、およびKDDI Chatworkにはチャットログのエクスポート機能があります。
フリープラン、パーソナルプラン、ビジネスプランではエクスポート機能はありませんので
コピーペーストなどでログを保存・印刷してください。

まじですか！
コピペですか！

フリープランの私は，
コピペ保存というワードと
エクスポート機能がないことに驚きました．．．

こういうのって，だいたいツール出てるよね〜
っとqiitaを見てみれば一応参考はあったものの，　

• https://qiita.com/3846masa/items/1258ec6aa40049890a9a
• https://qiita.com/hirokishirai/items/29bfdfc6d61b911aacc1

ChatWorkのAPI仕様変更やらで，なにやら不穏な気配．．．

プランアップグレードして課金するか．．．．
どうしよう．．．．

よし，domから抜くか！

ということで，簡単に概要を説明

• web版のchatworkを表示
• chrome開発者ツールのコンソールを表示
• 画面サイズをモバイルにして読み込み
• 「タップして過去のメッセージを読み込む」クリックしてバックアップしたいとこまで読み込む
• 以下のjavascriptを開発者ツールのコンソールから実行
• コンソールに整形されたデータが出力される
• 整形されたデータを煮るなり焼くなり
• もはやコピペと変わらないんじゃ
• コピペで保存よりは整形して出力できる・・・かな

ということで実際にやっているスクショがこちら．

webブラウザ上に表示されているデータはたいてい構造化されているので，
チャット形式のような形式が決まっているものであれば，割と簡単に文章を抽出できます．

やっていることは，ブラウザで読み込んだhtmlの構造をみて，整形し，コンソールに表示しているだけです

PC表示だと上にスクロールしまくって過去の投稿を読み込ませなければいけないのですが，
スマホ表示にしておけば，「タップして過去のメッセージを読み込む」のクリックで過去の表示読み込みができます．
(最初の画像の赤矢印のところ）

ChatWorkに限らず，スマホ表示にした場合に構造が見やすくなったり
諸々の手順が楽になる事例は他にも有ると思いますので知っておくといいかも．

あとは，javascriptできれば，応用して使えると思います．
以下は試しにslack用のcsvインポート形式に合わせて整形しています．

無理矢理なところあります，あくまでも参考に．．．

/**
* Chatwork to csv to Slack script 
*
* 「スマホ表示」のWeb版Chatworkのコンソールに
* 以下のスクリプトを貼り付けて使用する．
* PC表示時のdomよりシンプルなので，処理が楽？と思ったのでやってみた
*/

//-------状況に合わせて変更-----------
function changeUserName(str){
    //return str; //名前をそのまま使いたい場合はそのままリターンしてください

    if(str==='チャットワークユーザ名1'){ //適に変更してください
        return 'UFS******';    //適に変更してください
    }
    else if(str==='チャットワークユーザ名2'){ //適に変更してください
        return 'UHH******';         //適に変更してください
    }
}
var slackChannelName = '#インポートテスト'; //適に変更してください
//----------------------------------


//SlackのcsvインポートはUnixタイム指定なので，chatwork上の文字列から変換．
//Yearは2019で決め打ちしちゃってます！
//TODO:要修正
function strToUnixTime(str){
    //return str; //日付をそのまま使いたい場合はそのままリターンしてください

    var split = str.split(' ');
    var md = split[0];
    md = md.replace('月','/');
    md = md.replace('日','');
    var ymd = '2019/' + md + ' ';
    var allstr = ymd + split[1];
    var dateobj = new Date(allstr);
    return parseInt( dateobj /1000 );
}

//出力用の配列．これを最終的に出力します．
var arr = [
    ['ts', 'team', 'user', 'text']
]
var cachDate;
var cashUser;


//タイムラインのチャット部分を取得し，投稿の数だけループ
$('#cw_timeline').find('.ui_chat').each((idx, item) => {

    //この変数に一行分（一投稿）のデータを入れていきます
    var field = []

    //日付を抜き出して挿入
    //TODO：雑に抜き出しているので要修正
    if ($(item).find('.ui_chat_date').length > 0) {
        var t =  $(item).find('.ui_chat_date').text().trim();
        if( t.includes("月") ){
            cashDate = t;
        }else{
            var month = cashDate.split(' ');
            t = month[0] + ' ' + t;
        }
        t = strToUnixTime(t);
        field.push( '"'+ t +'"' );
    } else {
        field.push('');
    }

    //チャンネル名を挿入
    field.push( '"'+ slackChannelName + '"' );

    //ユーザー名を挿入．連続投稿はユーザー名が無いパターンがあるので前投稿のキャッシュで埋める
    if ($(item).find('.cw_chat_name').length > 0) {
        var name = $(item).find('.cw_chat_name').text();
        if(name===''){          
            field.push( '"' + changeUserName(cashUser) +'"' );          
        }
        else{
            field.push( '"' + changeUserName(name) +'"' );
            cashUser = name;
         }
    }
    else {
        field.push( '"' + changeUser(cashUser) +'"' );
    }

    //本文を抜き出して挿入
    var message = $(item).find('pre').text().replace(/(\r\n|\n|\r)/g, "");
    field.push( '"'+ message +'"' );
    arr.push(field)
});

//コンソール出力
arr.forEach((value) => {
  console.log( value[0] + ','  + value[1] + ','  + value[2] + ','  + value[3] );
});

補足

のちにSlackでインポートするために，ChatWork上のユーザ名をSlackのUserIDに置き換えています．

• Slack の User ID を確認するには
• https://qiita.com/aluceps/items/e1e87cafbd004599416f

console出力した一行ずつはこんな形になりますが，
>"1563328680","#インポートテスト","UFSRY3QEN","マイチャットを作成しました。" VM283:84

コンソールからコピペした場合に
最後のVM283:84みたいなやつが余分で付いてきてしまうので，
適当なテキストエディターで置換して一括削除してください．

excelにもインポートしたりして使ったりできます．

ちなみに，

//コンソール出力
/*
arr.forEach((value) => {
  console.log( value[0] + ','  + value[1] + ','  + value[2] + ','  + value[3] );
});
*/
window.open(encodeURI("data:text/csv;charset=utf-8," + arr.map(e => e.join(",")).join("\n")))

みたいにすれば，csvでそのまま出力できます．
ただ，自分の環境では大量のデータだと出力に失敗することがあり，
最終的にはコンソール出力でコピペしました．

ChatworkからSlackへのインポートのために

• 文字列の日付情報から，UNIXタイムスタンプへ変更しなければならない．
• 同一ユーザの連続投稿は，ユーザ名情報が無いパターンが存在するので，その対応をする．
• "UNIXタイムスタンプ","チャンネル名","ユーザ名","本文" 形式のcsvがSlackのインポート形式

このポイントを押さえて，整形すればインポートできます．
上記のjavascriptのサンプルでは，ChatWork上の時間文字列からUNIXタイムスタンプへ変換して出力しています．

※日付を2019年に決め打ちで作ってしまっているので，時間があれば修正します．

あとは，Slackのcsvインポートのところでインポートさせてあげれば完了です．

ちゃんとインポートされるまで，いくつか手順をふみますが，
以下のようになれば完了です！

概要

createJSでのcanvasを使ったゲームを作成する際に

canvas = document.getElementById("canvas");
// stage作成
stage = new createjs.Stage(canvas);
createjs.Ticker.addEventListener("tick", stage);

上記のようにステージを作成することが一般的
このような状況で画面上のタップした座標を取得したい場合に

touchPosX = stage.mouseX / stage.scaleX;
touchPosY = stage.mouseY / stage.scaleY;

上記コードで取得できる。
PC上では問題ないが、
実機対応のためにタッチ操作を有効にした状態で

// タッチ操作を有効にする
createjs.Touch.enable(stage);

画面に配置したcanvasの上下左右の領域の端をタップすると
stage.mouseX, stage.mouseYの値が最後にタップした座標に固定されてしまう

対策

タップした座標を取る際にeventから座標を取得するようにする

var button;
button.addEventListener("mousedown", function(event) {
    var tapPointX = event.stageX;
});

原因

どうやら画面に配置したcanvasの上下左右の領域の端を押したときに、
イベントが二つ飛んでくるらしい(touchStartとmousedown)
イベントの種類ごとに_primaryPointerIDが設定される

	mouseDown	touchStart
_primaryPointerID	-1	0

canvas内のオブジェクトをタップしているだけでは

stageの_primaryPointerIDが0であるが画面に配置したcanvasの上下左右の領域の端を押すと、-1になってしまう

タップした点に関する情報はstage.pointerDataにprimaryPointerIDごとに保存されているのだが、一度_primaryPointerIDを-1にしてしまうと、そのときのx,y座がpointerData[-1]に保存され、stage.mouseXはその値を参照してしまう

参考サイト

https://createjs.com/docs/easeljs/files/easeljs_display_Stage.js.html
(200行目、60行目、)

・https://qiita.com/calmbooks/items/6df5e01a7a29417e55c6
(タッチデバイスにて、mousedownが2回発火)

前置き

ページネーションをやっていきます。
いくつかに分けて書いていきます。
今回は導入編として
どんな形でつくるかの大枠を説明?

いつも通り
超簡潔に説明できれば良いので
まずはこれだけ作りましょう??

…
は？これだけ？

…
そうです?笑

表示はこれだけですが、
導入としてこちらをやります。
・ページ遷移のmethods
・現在いるページにclassを付与

Let's try?

Step1: dataを用意

基本はページ番号 = 配列番号を
増やしたり減らしたり、
該当番号にクラスをつけるだけですね。

なのでまずはdataを用意?
初期値はそれぞれ0です。
・now = 現在のページ
・last = 残りのページ

一応ページコンテンツとして
数字の繰り返しだけいれておきましょう。

index.vue

<template>
 <div class="page">
   <ul>
     <li v-for="n in 5">
       {{ n }}
     </li>
   </ul>
 </div>
</template>

<script>
export default {
 data() {
   return {
     newsSection: {
       nav: {
         now: 0,
         last: 0,
       },
     },
   }
 },
}
</script>

Step2: methodsを用意

【動作】
矢印を押すとそれぞれmethodsで
Step1で用意したdataを動かしていきます。
5ページ(0~4番号)あるので、
はみ出す分はそれぞれ-1と5
はみ出したら0か4に戻します。
・now
・last
現在のページ数を反映させるものは
実践編で解説します。

【methods】
・←を押すとclickPrevNewsPage
・→を押すとclickNextNewsPage

【式】
三項演算を使用
式１ ? 式２ : 式３
式1がtrueなら式2、falseなら式3

index.vue

<template>
 <div class="nav">
   <div
     class="prev"
     @click="clickPrevNewsPage()"
   >
     <svg /> // 省略
   </div>
   <ul>
     <li>
       ページ番号
     </li>
   </ul>
   <div
     class="next"
     @click="clickNextNewsPage()"
   >
     <svg /> // 省略
   </div>
 </div>
</template>

<script>
export default {
 data() {
   return {
     newsSection: {
       nav: {
         now: 0,
         last: 0,
       },
     },
   }
 },
 methods: {
   clickPrevNewsPage() {
     this.newsSection.nav.now = this.newsSection.nav.now - 1 < 0
       ? this.newsSection.nav.now
       : this.newsSection.nav.now - 1
   },
   clickNextNewsPage() {
     this.newsSection.nav.now = this.newsSection.nav.now + 1 > this.newsSection.nav.last - 1
       ? this.newsSection.nav.now
       : this.newsSection.nav.now + 1
   },
 },
}
</script>

【解説】
◾️clickPrevNewsPage
　※nowが0の時は1ページ目。
式1
・パターン1
　現在1ページ(配列番号0)なら
　0 = 0 - 1 < 0
　trueなので式2を実行
・パターン2
　現在4ページ(配列番号3)なら
　3 = 3 - 1 < 0
　falseなので式3を実行

　式2 true
　　now = 0なので0番目(1ページ目)にする
　　= - 1番目(0ページ目)にはいけない
　式3 false
　　- 1して1ページ戻る

順番的に分かりにくいかもしれませんが要は
nowが0以上の時は - 1していって、
- 1になったら0に戻すと言うことですね。

◾️clickNextNewsPage
※nowが4の時は最終ページ。
式1
・パターン1
　現在5ページ(配列番号4)なら
　残り2ページ(配列番号4, 5)
　4 = 4 + 1 > 2 - 1
　2 - 1を左辺にもっていくので
　・ - 1にチェンジ
　・符号も逆向きにチェンジ
　4 - 1 =< 5
　trueなので式2を実行
・パターン2
　現在4ページ(配列番号3)なら
　残り3ページ(配列番号3, 4, 5)
　3 = 3 + 1 > 3 - 1
　3 + 2 =< 4
　falseなので式3を実行

　式2 true
　now = 4なので4番目(5ページ目)にする
　　= 5番目(6ページ目)にはいけない
　式3 false
　　+ 1して1ページ進む

複雑になってきましたが
1度理解すればテンプレとして使えますね?

classを付与

1ページ目にいる時は
そこだけボーダーをつけます。
ついでにクリックしたら
該当ページに飛ぶように@clickも?

index.vue

ページ表示部分を変更します。

// 変更前
   <ul>
     <li>
       ページ番号
     </li>
   </ul>

// 変更後
   <ul>
     <li
       :class="{ selected: newsSection.nav.now === 0}"
       @click="newsSection.nav.now = 0"
     >
       1
     </li>
   </ul>

クラス部分追加。

index.vue

<style lang="scss" scoped>
  .nav {
     ul {
       li {
         &.selected {
           padding: 3px 5px;
           border: 1px solid #4B4B4B;
         }
       }
     }
  }
}
</style>

【解説】
:class="{ class名: 式 }"
クラスバインディングで
nowが0と完全一致した場合のみ
selectedクラスを付与します。
つまり0番目の1ページにいる時は
1ページだけにボーダーつけてくれます。
https://jp.vuejs.org/v2/guide/class-and-style.html
==と===の違いはこの記事が分かりやすいです！
https://www.sejuku.net/blog/23942

@click="newsSection.nav.now = 0"
now = 現在いるページ
0にするので0番目(1ページ目)にする

ここまでのコード

毎度のことですが、
cssはほとんど省いております。
今回は
・ページ遷移のmethods
・現在いるページにclassを付与
でした?
続きは実践編などで公開します。

index.vue

<template>
 <div class="nav">
   <div
     class="prev"
     @click="clickPrevNewsPage()"
   >
     <svg /> // 省略
   </div>
   <ul>
     <li
       :class="{ selected: newsSection.nav.now === 0}"
       @click="newsSection.nav.now = 0"
     >
       1
     </li>
   </ul>
   <div
     class="next"
     @click="clickNextNewsPage()"
   >
     <svg /> // 省略
   </div>
 </div>
</template>

<script>
export default {
 data() {
   return {
     newsSection: {
       nav: {
         now: 0,
         last: 0,
       },
     },
   }
 },
 methods: {
   clickPrevNewsPage() {
     this.newsSection.nav.now = this.newsSection.nav.now - 1 < 0
       ? this.newsSection.nav.now
       : this.newsSection.nav.now - 1
   },
   clickNextNewsPage() {
     this.newsSection.nav.now = this.newsSection.nav.now + 1 > this.newsSection.nav.last - 1
       ? this.newsSection.nav.now
       : this.newsSection.nav.now + 1
   },
 },
}
</script>

<style lang="scss" scoped>
  .nav {
     ul {
       li {
         &.selected {
           padding: 3px 5px;
           border: 1px solid #4B4B4B;
         }
       }
     }
  }
}
</style>

このアカウントでは
Nuxt.js、Vue.jsを誰でも分かるよう、
超簡単に解説しています??
これからも発信していくので、
ぜひフォローしてください♪
https://twitter.com/aLizlab

機械学習については解説記事をかじった程度の知識しかない僕でも、物体検出プログラムを簡単に作れたので紹介します。

ml5.js

• ml5.js

機械学習プラットフォームでお馴染みのTensorFlowをJavaScriptで実装した TensorFlow.js というライブラリがあります。

• TensorFlow.js

WebGLを利用したGPGPUで計算を行うことによりネイティブを肉薄するパフォーマンスを得た、ブラウザで動く機械学習ライブラリです。
そしてTensorFlow.jsを、専門知識がなくても使えるよう至れり尽くせりしてくれるラッパーがml5.jsというわけです。

使い方

学習済モデルやアルゴリズムを選択してデータを入力することで、推論結果を得ることができます。

学習済モデルはデータ量が大きいのでライブラリ本体とは別に存在しており、選択した時点で配信サーバーへAjaxする挙動になります。
巨大なものだと100MB近くにまで達するので、スマホで利用する際は注意したほうが良いかもしれません。

入力可能なデータはHTMLMediaElementやImageDataなどがあります。
MediaStream API でカメラやマイクなどのデバイスからデータストリームを取得しHTMLMediaElementに紐付けることで、リアルタイム検出が可能です。

• MediaStream API - MDN

利用可能なモデル

• reference - ml5.js

MobileNetやDarknetなどのニューラルネットワークモデルが使えます。
(ここら辺は付け焼き刃なので深い言及は避けておきます)

物体検出プログラム

早速、実際のプログラムを作ってみます。

物体検出には YOLO というアルゴリズムを使用し、映像はウェブカメラやスマホカメラから取得します。

• YOLO (You Only Look Once)

HTML

<div class="overlay">
    <video id="capture" width="640" height="480"></video>
    <canvas id="detect" width="640" height="480"></canvas>
</div>

CSS

.overlay{
    position: relative;
}
.overlay > *{
    display: block;
    position: absolute;
}

まずHTML/CSSです。

いたって単純で、カメラから取得したリアルタイム映像を表示させる<video>と、検出結果をオーバーレイで表示させる<canvas>から成ります。

JavaScript

function getStream(video){
    return navigator.mediaDevices.getUserMedia({
        audio: false,
        video: {
            facingMode: "environment"
        }
    })
    .then((stream)=>{
        video.srcObject = stream;
        return video;
    });
}

最初にMediaStream APIを初期化します。

navigator.mediaDevices.getUserMedia()でデバイスのデータストリームを取得し、実際に表示させるHTMLMediaElementへ紐付けます。
初期化オプションは以下となります。

• audio: 音声を拾うか否か
• video: 映像関連の設定
• facingMode: リアカメラorフロントカメラ

environmentがリアカメラでuserがフロントカメラとなります。

なお、設定値が無効だった場合は有効値を順々に探索していきますが、明示した設定値のみに限定したい場合はexactプロパティ経由で設定します。

JavaScript

function detectObject(video, canvas){
    const render = canvas.getContext("2d");

    render.beginPath();
    render.lineWidth = 2;
    render.strokeStyle = "#2fad09";

    render.font = "16px consolas";

    render.fillStyle = "#ffffff";
    render.fillRect(0, 0, canvas.width, canvas.height);
    render.fillStyle = "#000000";
    render.fillText("Model Loading...", 4, 14);
    render.fillStyle = "#2fad09";

    return ml5.YOLO({
        filterBoxesThreshold: 0.01,
        IOUThreshold: 0.2,
        classProbThreshold: 0.5
    }).ready
    .then((model)=>{
        render.clearRect(0, 0, canvas.width, canvas.height);
        video.play();

        return setInterval(()=>{
            if(!model.isPredicting){
                model.detect(video)
                .then((results)=>{
                    render.clearRect(0, 0, canvas.width, canvas.height);

                    for(const result of results){
                        render.strokeRect(result.x * canvas.width, result.y * canvas.height, result.w * canvas.width, result.h * canvas.height);
                        render.fillText(`${result.label}: ${Math.round(result.confidence * 100)} %`, result.x * canvas.width + 4, result.y * canvas.height + 14);
                    }
                });
            }
        }, 67);
    });
}

物体検出プログラム本体です。

ml5.YOLO().readyでYOLOモデルを取得しmodel.detect()で検出処理を実行します。
モデル取得時に閾値オプションを渡せます。

なお検出処理は入力された映像のスナップショットに対して実行されるので、物体をトラッキングするにはループさせる必要があります。
単純な実装であればsetInterval()でひたすら回せば良いのですが、検出処理はヘビータスクゆえ、もし前コンテキストが実行中のまま次ループへ入ってしまうと、リソースの奪い合いで時間経過とともにどんどん重くなってしまいます。

その対策として、モデルオブジェクトには "推論を実行中か" をBooleanで返すisPredictingというプロパティがあります。
これを使い、確実に処理が終了してから次のループに入るためのロック処理を入れました。
この例だと67ms毎(≒15fps)に検出処理中でないか確認してから実行しています。

結果は、検出された物体の "座標" と "ラベル" と "確率" が検出数の分だけ配列で返されます。

JavaScript

getStream(document.getElementById("capture"))
.then(video => detectObject(video, document.getElementById("detect")))
.catch(error => alert(error.message));

最終的にこのようなかたちで実行します。

完成

作ったサンプルはGitHubPagesに上げておきました。

• ml_recognition - GitHub Pages

この通り、スマホでも問題なく実行できます。
が、前述の通りヘビータスクなので結構重くなります。

おわりに

「機械学習で色々やってみたいけど、そもそも入口が複雑すぎてお手上げ...」
みたいな敷居の高さを取り払ってくれる、とても良いライブラリだと思いました。

もちろん、理解を深めるにはより低レベルで高度な知識が必要になると思いますが、そのきっかけ作りには丁度良いなと感じました。

概要

javascriptを用いることで、DOM操作からスタイルシートを操作できます。DOMでスタイルシートを操作するには、以下のアプローチがあります。

1. インラインスタイルにアクセスする(styleプロパティ)
2. 外部のスタイルシートを適用する(classNameプロパティ)

styleプロパティ

javascriptでスタイルを操作するのに最もシンプルなのが、　インラインスタイルに対してアクセスする方法です。インラインスタイルとは、個々の要素に対して設定されたスタイルのことです。

sample.js

elem.style.prop[= value]
 //elem : 要素オブジェクト prop : スタイルプロパティ value : 設定値

たとえば、

sample.html

<div id="elem">マウスポインターを乗せると色が変わります</div>

sample.js

document.addEventListener('DOMContentLoaded', function() {
 let elem = document.getElementById('elem')

 //マウスポインターが乗ったタイミングで背景色を変更
 elem.addEventListener('mouseover', function() {
  this.style.backgroundColor = 'Yellow'
 }, false)

 //マウスポインターが外れたタイミングで背景色を戻す
 elem.addEventListener('mouseout', function() {
  this.style.backgroundColor = ''
 }, false)
}, false)

イベントリスナーの元では、thisはイベントの発生元を指している。
スタイルプロパティ名には注意が必要です。JavaScriptでは、「ハイフンを取り除いたうえで、２単語目以降の頭文字は大文字とする」必要があります。

background-color : backgroundColor
border-top-style : borderTopStyle

ただし、floatはstyleFloatとなる。

classNameプロパティ

styleプロパティは確かにシンプルだが、javascriptコードの中にCSSのコードが混在してしてしまうため、やはりCSSのコードは別にすることが望ましい。外部スタイルシートで定義されたスタイルにアクセスするのは、classNameプロパティの役割です。

sample.js

elem.className[= clazz]
 //elem : 要素オブジェクト clazz : スタイルクラス

たとえば、

sample.html

<link rel="stylesheet" href="css/style.css" />
//コード
<div id="elem">マウスポインターを乗せると色が変わります</div>

style.css

.highlight {
 background-color : Yellow;
}

sample.js

document.addEventListener('DOMContentLoaded', function() {
 let elem = document.getElementById('elem')
 //マウスポインターが乗ったタイミング
 elem.addEventListener('mouseover', function() {
  this.className = 'highlight'
 }, false)
 elem.addEventListener('mouseout', function() {
  this.className = ''
 }, false)
}, false)

このようにすることによって、編集がしやすくなります。また、classNameプロパティには複数のクラスを関連づけることもできます。その場合は、

sample.js

this.className = 'clazz1, clazz2'

スタイルクラスを外す

classNameプロパティを利用して、特定のスタイルクラスを着脱することができます。

sample.html

<link rel="stylesheet" href="css/style.css" />
//コード
<div id="elem">クリックすると背景色が変わります</div>

sample.js

document.addEventListener('DOMContentLoaded', function() {
 let elem = document.getElementById('elem')

 //クリックしたタイミングで背景色を変更
 elem.addEventListener('click', function() {
  this.className = (this.classNmae === 'highlight' ? '' : 'highlight')
 }, false)
}, false)

また、複数のスタイルクラスが適用されている場合は、

sample.html

<link rel="stylesheet" href="css/style.css" />
//コード
<div id="elem" class="line">クリックすると背景色が変わります</div>

css.style.css

.highlight {
 background-color: Yellow;
}

.line {
 border: 1px solid Red;
}

sample.js

document.addEventListener('DOMContentLoaded', function() {
 let elem = document.getElementById('elem')

 elem.addEventListener('click', function() {
  //空白区切りの文字列を分割
  let classes = this.className.splite(' ')
  //highlightが存在する位置を検出
  let index = classes.indexOf('highlight')
  if(index === -1){
   //存在しなければ、動的に追加
   classes.push('highlight')
  }else{
   //存在する場合には、highlightを除名
   classes.splice(index, 1)
  }
  //配列を空白入りの文字列に
  this.className = classes.join(' ')
 }, false)
}, false)

classListプロパティ

classListプロパティを利用することで、class属性の値をDOMTokenListオブジェクトとして取得する。classListでは、

length : リストの長さ
item(index) : インデックス番目のクラスを取得
contain(clazz) : 指定したクラスがあるかどうか
add(clazz) : リストにクラスを追加
remove(clazz) : リストのクラスを削除
toggle(clazz) : クラスのオン/オフを切り替え

toggleを用いることで、条件演算子が不要になる。コードが直感的になる。

参考資料

山田祥寛様　「javascript本格入門」

概要

Vue.jsもすでにバージョンを重ねて、開発環境等々とり得る選択肢が増え、自分のような初学者（元々組込み系ソフトウェア設計者として何年か働いているので、初学者というには微妙ですが）は混乱してしまったため、備忘録。

初学者ほど、意外にツールや設計の重要性についてはあまり意識していないようなので、そういった観点で本記事は作成しています。

　前提知識は以下の通り。

• Node.js
• Bootstrap
• なんか適当にWebの知識がある
• ターミナルでコマンド

Vue.jsとは

Webフレームワークの一つ。基本的には中規模～大規模向けと言われています。この規模ベースの表現は分かりにくいですが、個人的には以下のような機能の有無が関係しているものと思います。

• 小規模：DOM操作ができる
• 中規模：グローバル変数を格納できる機能がある
• 大規模：クライアント側(Webブラウザ側)にてルーティング機能がある

開発環境

　あらかじめ「node.js」が導入されている前提で記述します。ここでは、ほとんど「npm」を用いたパッケージ管理ソフトとして使用しています。パッケージ管理ソフトとは、コマンド一発でパッケージ（ライブラリ）をインストールできるものと考えておいてもらえればいいと思います。

余談ですが、私は「node.js」はバージョン管理ソフト「nodist」から入れています。「node.js」はバージョンアップが早く、またweb系は何だかんだ様々な環境を想定するだろうなと思い、導入しています。

• nodits：https://github.com/nullivex/nodist/releases

今回は「vue/cli」を採用します。「nuxt.js」を採用している人もいますが、現行の「vue/cli」であれば簡単なアプリケーションを開発分には事足りそうだったので。コマンド一発で「router」と「vuex」を使えますし。

言語も基本は「Javascript」にします。オブジェクト指向的に書きたいと思い、typescriptの採用も検討しましたが、しっかりコンポーネント毎に作ることとしていれば良さそう。静的型付けしたい感もありますが、そこまで大規模化しなければ神経質になる必要もないかなと思い、「typescript」の採用は見送りました。単純にそのあたりの勉強がメンドイということもありますが。

また、「bootstrap」も利用します。デザインセンスが壊滅的にないので、付け焼き刃ですが使用します。

Bootstrapとは？

wikipedia的には「Webアプリケーションフレームワーク」。「見た目」を「それっぽく」「レスポンシブ」にするフレームワークです。ここでいう「レスポンシブ」とは画面の大きさに合わせて見た目を変えられるという意味です。

エディタ（VScode）

Javascriptを使用する上でよく使用されているのは「VScode」だと思います。特別宗教上の理由がない限りはVScodeを使用すると良いと思います。

• Visual studio Code：https://azure.microsoft.com/ja-jp/products/visual-studio-code/

ブラウザ（Google Chrome）

これは私の場合ですが、私は「Google Chrome」を使用しています。一応ChromeのプラグインとしてVue.js用のデバッグツールがあります。ここでは、このツールの使い方を説明しませんが、一応入れとくといいのかもしれません。

• Vue.js devtools：https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd?hl=ja

「vue/cli」の導入／プロジェクトの作成

コンソールにて、以下を入力。そうすると、npm環境におけるグローバル領域において「vue/cli」がインストールされます。

npm install -g @vue/cli

導入出来たら、何も考えずに次のコマンド。

vue create myProject
※「myProject」は任意の名前

このコマンドは「vue/cli」におけるプロジェクト作成のコマンドです。このコマンドを打つと以下のようになります。

Please puck preset:(Use arrow keys)
 default(babel,eslint)
>Manually select features

defeultでもいいですが、自分はManuallyでプロジェクトを作成します。その後、自分は最低限以下の用のような項目にチェックを入れてプロジェクトを作成します。あとは適当にEnterを押します。

?Please pick a preset: Manually select features
? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i
> to invert selection)
>(*) Babel
 ( ) TypeScript
 ( ) Progressive Web App (PWA) Support
 (*) Router
 (*) Vuex
 ( ) CSS Pre-processors
 (*) Linter / Formatter
 ( ) Unit Testing
 ( ) E2E Testing

Bootstrap-vueのインストール

Bootstrap-vueは、そのBootstrapをVue.jsをベースにして使用するためのライブラリです。インストールの仕方は簡単で、以下のコマンドを押下すると良いです。

cd myProject
npm install bootstrap-vue

「cd myProject」でプロジェクトフォルダに移動後、インストールします。

Vus.jsによるプロジェクトのファイル構成

プロジェクトを作成すると、自動に様々なファイルが作成されます。私はレガシーな組込み系ばかり関わっていたので、作成されるファイル数に面食らいました。主なファイルの構成は以下の通りです。「：」以下は自分の何となくのイメージ。

myProject
 ├─node_modules：npmコマンドで入れたライブラリの格納する場所。ほとんどいじらない
 ├─public
 │  └─index.html：ほとんど何もいじらないhtmlファイル。いじってもCDNのリンクを張るくらい
 └─src
    ├─assets：静的ファイルリソース
    ├─components：単一コンポーネントファイルを格納する場所
    ├─router
 　 │  └─index.js：ルーティング設定ファイル
    ├─store
　　│  └─index.js：グローバル変数を格納するところ
    ├─views：ページレイアウトのためのコンポーネント
    ├─App.vue：最上位コンポーネント
    └─main.js：ライブラリとかの設定するファイル

ユーザは基本的に「src」以下のファイルしか編集しません。Vue.jsでは、基本的に「コンポーネント」ごとにまとめやすいようにしているように思えます。このあたりは最近のwebフレームワークでは共通した特徴だと思いますが、他のフレームワークよりは意識するファイルが少ない印象を受けます。似たフレームワークであるところの「Anguler」の方が、プラグイン的なフレームワークが整っているように思いますが、初学者としてはBootstrap+Vue.jsの方が理解が早いし、業務上の応用が利きそうな雰囲気があります。

コンポーネントの作成

　コンポーネントとは、ソフトウェアを構成する部品である。ただし、ここでいうコンポーネントとは「コンポーネント指向におけるコンポーネント」ということに注意すること。具体的には以下の４つ。

• 構造
• スタイル
• 状態（≒データ）
• 機能

　思想としては「オブジェクト指向」もあるが、こちらが指向するのは「データ」と「機能」だけど、「コンポーネント指向」ではそれをもう少し大きくしたイメージである。

単一コンポーネントファイル

　上記のコンポーネントを作成するため、vue.jsでは拡張子「.vue」にて単一コンポーネントファイルを作成する。

　単一コンポーネントファイルは以下のような要素で構成される。個人的な見方だが、コンポーネント指向としては以下のような対応付け。

• template：構造
• script：状態、機能
• style：スタイル

sample.vue

<template>
  <div class="com">
  </div>
</template>

<script>
  default export {
    name:'com',
    data(){
      return {
        dt1: "",
        dt2: ""
      }
    },
    components:{}
  }
</script>

<style>
</style>

ページ作成

　新しいページを作成するときは「view」ディレクトリを編集します。基本的な構成は単一コンポーネントファイルと同様である。

　違いは、基本的にここでは、単一コンポーネントファイルの組み合わせで記述し、データの保持は基本的にはこっちで行う（ここで基本的にと言っているのは、ページ間で共有する場合は「vuex」にてデータの保持を行うが、ここでは詳しく記述しない）。

ルーティング（router）

　基本的に「router」ディレクトリのindex.jsしか編集しません。
　念頭に置くのは以下のふたつです。

• ルーティングの設定（これは「router」のindex.js）
• 設定したパスに移動するための設定

「routes」変数の中を以下のような感じに定義します。
「views」フォルダの中に定義したコンポーネントファイルを呼び出すように設定します。

/router/index.js

import Vue from 'vue'
import VueRouter from 'vue-router'
// viewsフォルダにあるコンポーネントファイルを呼び出し
import Auth from '../views/Auth.vue'
import Home from '../views/Home.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',// パスの設定
    name: 'auth',// 名前
    component: Auth// 呼び出したコンポーネントファイルを設定
  },
  {
    path: '/home',// パスの設定
    name: 'home',// 名前
    component: Home// 呼び出したコンポーネントファイルを設定
  }
]

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

export default router

グローバル変数の管理（vuex）

　ここでは「vuex」について説明します。正直個人的にこれが一番面倒だった。可能であれば、ページ間でのデータの共有のない設計をすべきだと考えます。
　「vuex」はページ間にてデータを共有するための機能です。

変数／ゲッター関数／セッター関数の定義

「store」フォルダにあるindex.jsに定義します。以下に例を示します。

• state：変数の定義
• getters：ゲッター関数（値の取得）の定義
• mutations：セッター関数（値の変更）の定義

/store/index.js

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
    state: {
        // 変数の定義
        user: "",
        password: ""
    },
    getters:{
        // ゲッター関数の定義
        user(state){return state.user},
        password(state){return state.password}

    },
    mutations: {
        // セッター関数の定義
        setUser(state, payload){state.user = payload},
        setPassword(state, payload){state.password = payload}
    },
    actions: {
    },
    modules: {
    }
})

関数の呼び出し

this.$store.commit("setUser", this.user);

手順

最後に簡単に手順を示します。

• プロジェクトを作成
• 「views」に作成したいページ分コンポーネントファイルを用意
• 「router」のindex.jsに「views」に用意したページ分パスを設定
• 「store」のindex.jsにページ間をまたいで使用する変数を設定
• あとはガツガツコンポーネントファイルを編集する

最後に

ここでは、Vue.jsについて簡単にではありますが、説明しました。詳細な説明は何かしらの参考書を見ることをお勧めします。以下は私が買った参考書です。

• 基礎から学ぶ Vue.js：https://www.amazon.co.jp/%E5%9F%BA%E7%A4%8E%E3%81%8B%E3%82%89%E5%AD%A6%E3%81%B6-Vue-js-mio/dp/4863542453/ref=sr_1_3

参考

• フロントエンドのコンポーネント設計に立ち向かう/qiita：https://qiita.com/seya/items/8814e905693f00cdade2
• Vue.js：https://jp.vuejs.org/index.html
• BootstrapVue：https://bootstrap-vue.js.org/

開発したもの

もぐら叩きゲーム（Webアプリケーション）
http://yusuke97.html.xdomain.jp/index.html

きっかけ

javascriptを触れる機会があり、勉強していくうちに楽しくなっていき何か形にしたかったこと。

こだわったところ

• スマホでもPCでも遊べるようにする
• 誤ってズームしたり,画像を選択しないようにする
• レスポンスを速くする
• シンプルなUI

使ったもの

• javascript
• CSS
• html
• Cent OS
• Apache HTTP Server（ローカル開発環境）
• XFREEのレンタルサーバー

開発の流れ（1人, 2週間）

1. 使う写真をダウンロード、加工
2. もぐらが動くようにする（1匹だけ）
3. 10匹のもぐらが動くくようにする
4. 配置を変える。
5. もぐらを叩いてから反応する時間を短くする。
6. 初級と上級に分ける。

難しかったこと

• javascriptの非同期通信
• もぐらを叩いてから反応する時間を短くする。
• スマホでもPCでも遊べるようにすること。
• ブラウザによって挙動が違うところ。

感想

コードによって全然レスポンスの速さが違ったりブラウザによってもぐらの挙動、位置、bgmが違っていたので、難しかった。しかし、javascript,CSSが意外と深いことがわかり面白かった。もっと速いWebアプリケーションを開発するためにもっと深く知りたいと思った。

最後に

間違いがあればコメントくださるとありがたいです。

Typescriptを始めたいけどどこから初めて良いかわからないという方の、TypescriptのWebサイトに掲載されていた同名のページを少しだけアレンジして紹介します。

環境の準備

まず、node.jsがPCにインストールされている必要がある。インストールされていない場合、下記のページからLTSの最新版をダウンロードしてインストールします。
https://nodejs.org/en/

Typescriptのインストール

下記のコマンドを実行して、typescriptのライブラリをダウンロードしてきます。会社の環境などで、プロキシサーバが間にある方は、プロキシありの方のコマンドを実行してください。

プロキシなし

npm install -g typescript

プロキシあり

npm install -g typescript

最初のTypescriptファイルの作成

まずテキストエディタを開いて、下記のJavascriptコードをgreeter.tsというファイルに保存してください。

greeter.ts

function greeter(person) {
    return "Hello, " + person;
}

let user = "Jane User";

document.body.innerHTML = greeter(user);

Typescriptコードのコンパイル

次にコマンドプロンプトを開き、さっき作ったgreeter.tsが保存されているパスに移動してから下記のコマンドを実行します。

コマンド

tsc greeter.ts

実行すると、同じコードが書かれたgreeter.jsというファイルが作成されます。

次に、Typescriptが提供している機能を使ってコードを改良します。

greeterの引数にstringの型定義を追加しましょう。

function greeter(person: string) {
    return "Hello, " + person;
}

let user = "Jane User";

document.body.innerHTML = greeter(user);
Type annotations

上記のコードによって、javascriptにはない型定義の機能を追加することができました。試しに、変数userに数値を入れて、greeterメソッドを呼んでみます。

function greeter(person: string) {
    return "Hello, " + person;
}

let user = 12345;

document.body.innerHTML = greeter(user);

結果はこの通り。エラーが出力されました。

error TS2345: Argument of type 'number[]' is not assignable to parameter of type 'string'.

この場合でもgreeter.jsは作成され、使うこともできますが期待通りに動作しない可能性があることをTypescriptが警告を出します。

typeアノテーション

インタフェース

今度は、firstNameとlastNameを持っているオブジェクトを表現するインターフェースを作成します。Typescriptでは、

interface Person {
    firstName: string;
    lastName: string;
}

function greeter(person: Person) {
    return "Hello, " + person.firstName + " " + person.lastName;
}

let user = { firstName: "Jane", lastName: "User" };

document.body.innerHTML = greeter(user);
Classes

クラス

class Student {
    fullName: string;
    constructor(public firstName: string, public middleInitial: string, public lastName: string) {
        this.fullName = firstName + " " + middleInitial + " " + lastName;
    }
}

interface Person {
    firstName: string;
    lastName: string;
}

function greeter(person : Person) {
    return "Hello, " + person.firstName + " " + person.lastName;
}

let user = new Student("Jane", "M.", "User");

document.body.innerHTML = greeter(user);

TypescriptWebAppの起動

<!DOCTYPE html>
<html>
    <head><title>TypeScript Greeter</title></head>
    <body>
        <script src="greeter.js"></script>
    </body>
</html>

デバッグ

クロームで実行したJavascriptを実行し、デバッグをしてみましょう。
コードを止めると、javascriptのコードではなく、typescriptが表示されます。

まとめ

これにより、typescriptの開発環境ができました・
typescriptはjavascriptと異なりコンパイルというプロセスが入るため、実行しなくても記述みすや型の間違いを見つけてくれます。
記述量は多少増えますが、規模が大きくなればなるほど、開発を助けてくれるはずです。

参考

https://www.typescriptlang.org/docs/handbook/typescript-in-5-minutes.html