はじめに

Three.jsにはMMDモデルを読み込んでくれるMMDLoaderというツールがあり、これでMMDモデルを確認できるビューアーアプリを作りたいと思ったのですが、MMDモデルをサーバーにアップロードする形だと著作権的にグレーな気がしました。

そのとき、「ローカルで見るだけならわざわざサーバーに送る必要ないのでは？」ということに気づき、サーバーに送らなくて済むタイプのMMDモデルビューアを作ってみることにしました。

そのために一時的にブラウザからアクセス可能なローカルの領域を用意する必要があるのですが、今回はそれにIndexedDBを使いました。
(Githubのissueを調べたところ、IndexedDBについては何かしら議論したあとがあったのですが、この感じだとまだサポートは無いんだと思います)

作ったもの

デモ

こちらのデモをご覧ください。
MMDモデル(pmd/pmx)のファイルを選択すると、そのMMDモデルが表示されるはずです。
※MMDモデルはてきとうに「MMDモデル 配布」とかでググって見つけてください。
※申し訳ありませんがまだテクスチャは貼れません...

プログラム

https://github.com/one-color-low/MMDSaver

• app/MMDSaver.jsというのがIndexedDBのあれこれを操作してるjsです。
• app/js/loaders/MMDLoader.jsはarraybufferを直接読み込めるように改造してあります。

仕組み

MMDLoaderに限らず、Three.jsの3Dモデルローダーは第一引数に静的ファイルのパスを渡す仕様になっていると思います。MMDLoader内ではこのパスに基づいて xhrリクエストをサーバーに送信し、レスポンスとしてArrayBuffer形式のモデルファイルを受け取っています。 このことから、ローダーにパスではなく直接ArrayBufferを渡せばいいと思いました。

流れ

1. フォームからバイナリ形式のファイルを取得
2. ファイルをreadAsArrayBufferでArrayBufferに変換
3. IndexedDBに保存
4. IndexedDBから取り出し
5. 一度blobに変換しローダーに渡す ※なぜかArrayBufferのままではローダーに渡せなかったため
6. ローダー内でblobに対しreadAsArrayBufferをかけArrayBufferに戻す
7. 本来xhr処理するはずだった場所でこのArrayBufferを受け取る

さいごに

初心者なので間違ったことを書いてしまっているかもしれません。もし何かあればコメントください！！

連想配列のループ処理

連想配列とはキーと値のペアで構成される配列です。

const array = {
    key: 'value',
    key:'value',
}

プロパティを指定するには2種類の方法があります。

//ドット記法
array.key

//ブラケット記法
array['key']

const obj = {}
for(const i=0; i<5; i++){
    obj[i] = i*100;
}

for(const key in obj){
    if(obj.hasOwnProperty(key)){
        const val = obj[key];
        console.log(val);
}

//for in文でループ処理をしてプロパティを出力しています。

動的変数

varでの変数宣言はやめましょう。

let:動的変数、最大代入可能
const:静的変数、再代入不可能

関数内で宣言した変数は外部から参照できず、constは値の変更はできません。

textareaオブジェクト

textarea要素を扱うことが出来ます。
```
document.getElementById('wanko').value
//valueでプロパティを使用できます
document.getElementById('wanko').value = pome

document.getElementById('wanko').value.row = '10'

const input_message = document.getElementById('message').value;
message = 'input_message';
document.getElemtntById('output_message').innerHTML = message;
```

Javascriptの実行が遅い時

JSは外部ファイルに記述する
JSファイルの読み込みは

Javascriptの簡単なメモです。
アプリ制作に応用できる基本レシピですので、参考にされたい方はどうぞ。

連想配列のループ処理

連想配列とはキーと値のペアで構成される配列です。

const array = {
    key: 'value',
    key:'value',
}

プロパティを指定するには2種類の方法があります。

//ドット記法
array.key

//ブラケット記法
array['key']

const obj = {}
for(const i=0; i<5; i++){
    obj[i] = i*100;
}

for(const key in obj){
    if(obj.hasOwnProperty(key)){
        const val = obj[key];
        console.log(val);
}

//for in文でループ処理をしてプロパティを出力しています。

Javascriptの実行が遅い時

JSは外部ファイルに記述する
JSファイルの読み込みは/bodyの直前にする
無駄な変数宣言や毎回のDOM生成をしない

ファイルのダウンロード

Blobオブジェクトとwindow.URL.createObjectURLメソッドを使います。

<a href='./wanko.txt' download='wanko'>ダウンロード</a>

const blob = new Blob(
    [text],
    {'type':'text'})
    const url =window.URL.createObjectURL(blob)
    document.getElemntById('link') = url
}

JSでselect要素にoption追加

selectタグを取得
optionタグを作成、テキストとvalueを設定
appendChildでタグ追加

<button onVlick='add()'>add</button>

<select name='name' id='select'>
    <option value='1'>1</option>
    <option value='2'>2</option>
</select>


function add(){
    const select = document.getElementById('select');
const option = dociument.createElement(option);
option.text=3;
option.value=3;
select.appendChild(option);
}

JSでのセッションの情報管理

セッションとはフロント側でデータを一時保存できる機能のことです。

//SessionStorageが使用可能か判定
if(('sessionStrage' in window) && (window.sessionStotagr !== null)){
    //ok
}    else{
    //no
}

//SessionStorageへデータを保存
sessionStorage.setItem('session_save',1);
window.sessionStorage.seiItem('session_save',1);
sessionStorage.session_save = 1;

//データを取り出す
get_storage = sessionStorage.getItem(session_save);
get_storage = window.sessionStorage.getItem(''session_save);
get_storage = sessionStorage.session_save;

//データを削除
sessionStorage.removeItem('session_save');
window.sessioStorage.removeItem('session_save');

//全削除（初期化）する
sessionStorage.clear();
window.sessionStorage.clear();

文字コードを変換

文字コードとは機械語を人が読める文字に変換するための規約です。

文字列の1文字の文字コードの確認には

文字列.charCodeAt(数値)

文字コードのデコードには

String.fromCharCode(数値);

処理の順番の変更

console.log('a');
cetTimeout(()=>{
    console.log('b')},0
);
console.log('c');


let num = 100;
console.log(num);
new Promise((resolve,reject) => {
    num +=100;
    console.log(num);
    resolve(num);
}).then((num)
 =>{
    setTimeout(()=>{
    num+=200},0);
    console.log(num);
}).then((num) =>{
    console.log(num);
})

//100 200 400 400

配列の最後の要素を書き換える

const array = ['a','b','c']

array[array.length - 1] = 'e';

array.pop();
//削除

delete.array[2];

配列の最後の要素を書き換える

const array = ['a','b','c']

array[array.length - 1] = 'e';

array.pop();
//削除

delete.array[2];

動的変数

varでの変数宣言はやめましょう。

let:動的変数、最大代入可能
const:静的変数、再代入不可能

関数内で宣言した変数は外部から参照できず、constは値の変更はできません。

textareaオブジェクト

textarea要素を扱うことが出来ます。

document.getElementById('wanko').value
//valueでプロパティを使用できます
document.getElementById('wanko').value = pome

document.getElementById('wanko').value.row = '10'

const input_message = document.getElementById('message').value;
message = 'input_message';
document.getElemtntById('output_message').innerHTML = message;

初めに

閲覧していただき、ありがとうございます！
現在からくり株式会社でiOSエンジニアとしてインターンしております。
今回勤務報告を自動化してみたので、そちらを記事にしたいと思います?

背景

インターン生（アルバイト）は月に一回勤務報告をSlackでしないといけないのですが、
いつも手入力で報告しており、これが滅茶苦茶めんどくさい、、、
「月1の作業くらい頑張れよ?」という野次が飛んできそうですが、
なんせエンジニアなので楽したい性分なのです?

そもそもGASとは？？

Google Apps Script(GAS)とは、Googleが提供するサーバーサイド・スクリプト環境のことです。
スプレッドシートやGoogleフォームなどのサービスを、
JavaScriptをベースとしたプログラム言語を使って操作することができます。

実装方針

インターン生は上記写真のように出勤日時をGoogleカレンダーに記入しなくてはいけないので、
これらイベント情報を抽出して出勤時間を計算していきたいと思います。

1.カレンダーから出勤のイベントを抽出

const myCalendar = CalendarApp.getCalendarById('自分のカレンダーID');
const attendanceDays = myCalendar.getEvents(getFirstDate(new Date()), getLastDate(new Date()), {search: "出勤"});

//月の初めを取得
function getFirstDate (date) {
  return new Date(date.getFullYear(), date.getMonth(), 1);
}

//月の最後を取得
function getLastDate (date) {
  return new Date(date.getFullYear(), date.getMonth() + 1, 0);
}

getCalendarByIdメソッドを用いて自分のGoogleカレンダーを取得後、
getEventsメソッドを用いて出勤のイベントだけを抽出します。

2.勤務時間を計算

for(var i = 0; i < attendanceDays.length; i++) {
   var attendanceTime = attendanceDays[i].getStartTime()
   var leavingTime = attendanceDays[i].getEndTime()
   var actualWorkingHours = getActualWorkingHours(leavingTime.getHours(), attendanceTime.getHours())
}

function getActualWorkingHours(leavingTime, attendanceTime) {
  actualWorkingHours = leavingTime - attendanceTime
  if (actualWorkingHours == 9) {
    return actualWorkingHours - 1
  } else {
    return actualWorkingHours
  }
}

取得してきた各々のイベントの終了時刻getEndTime()と開始時刻getStartTime()を取得し、
その差分を計算します。
また、フル勤務の際(10:00~19:00)は1時間休憩をとる必要があり、
実働時間を正確に計算する為、差分から1時間引きます。

3.Slackに投稿

function postMessage() {

  var url = "https://slack.com/api/chat.postMessage";

  var payload = {
    "token" : "アクセストークン",
    "channel" : "投稿したいチャンネルのID",
    "text" : "<@メンションしたい相手のID>投稿するメッセージ,
    "as_user" : true
  };

  var params = {
    "method" : "post",
    "payload" : payload
  };

  UrlFetchApp.fetch(url, params);
}

成果物

これで毎月の勤務報告を手入力をしなくても
自動で勤務報告ができるようになりました！（送り忘れることもなし）

まとめ

普段Swiftを書いていて、今回初めてJavaScript(GAS)を触ったのですが、
なんとか形にすることができてとりあえずホッとしてます笑（なんせこの土日で勉強して書いた為、、、ギリギリ?）
まだ交通費の記入や15分単位での計算に対応できてないので、
その辺りを改善していきたいなです。
また、コードを書いている内にあれも自動化したいな〜?
みたいなのが色々出てきたので、社員の方がより重要な業務に時間を割けるように
無駄な作業はインターン生で自動化していければなと思います！
（社員さんは忙しくてなかなか手が回らないので、、、）

最後に

僕がインターンをしているからくり株式会社では現在エンジニアを募集しているそうです！
（インターン、新卒、中途問わず）
興味がありましたら、是非一度遊びに来てくださいね〜！！
Wantedly

Vue.jsで要素のCSSアニメーションをつける際に「要素が画面に入ってきたら」という条件を判定したく、調査をして実装したのでそのまとめとなります。

elementの取得方法については今回はVue.jsの機能で取得していますが、document.getElementByIdなどで取得しても同様に動きます。

こちらのコンポーネントで実装しています。

// 画面最上部と要素の上端の距離
// こちらの値はスクロール値がすでに引いてある値となるので注意。
// 要するにこの値が0の場合要素の上端が画面の上端となっている状態
var positionY = this.$el.getBoundingClientRect().y
// 要素の縦幅
var clientHeight = this.$el.getBoundingClientRect().height
// 表示している画面の領域の高さ
var windowSize = window.innerHeight

/**
 * 画面上部の判定
 * 画面最上部との距離 + 要素サイズ > 0
 * = 画面上部に要素の一番下部が表示されているか
 * かつ
 * 画面下部の判定
 * 画面最上部との距離 < 画面サイズ
 * = 画面下部に要素の一番上部が表示されているか
 */
if (positionY + clientHeight > 0 && positionY < windowSize) {
  // 画面に要素が少しでも表示されている場合
} else {
  // それ以外
}

具体的には、下記のようにしています。

if (positionY + clientHeight > 0 && positionY < windowSize) {
  // 画面に要素が少しでも表示されている場合
  // 画面に表示されるclassを付与する
} else {
  // それ以外
  // 画面に表示されなくなるclassを付与する
}

表示だけでなく、様々なエフェクトをかけたい場合はここからさらにsetTimeoutなどの非同期処理で順を追ってclassを付与していくと良いと思います。

はじめに

　この記事はHameeアドベントカレンダー2019 24日目のものです。
こっそりで一人で使っていた仕組みを、社内の他の人たちにも使ってもらえるようにするために、一手間加えた、という話をします。

そもそも...

　そもそも、こっそりと何を作って使っていたのか、から話さないといけませんね......
Hameeでは、GoogleCalendarを社員のスケジュール管理に使用しています。僕も毎日ではありませんが、MTGや社内の勉強会などの予定が入っています。その日のスケジュールは朝に把握して、今日はMTGがあるから、この時間までに、これをやろう、みたいなことを考えています。それを、僕は朝起きてからすぐにやりたかったのですが、それはデフォルトではできませんでした。社内のカレンダーを、自分のスマホで確認することはできないからです。

　そこで、GoogleCalendarに入っている自分の予定をGoogleAppsScriptを用いて取得し、それを社内で使用しているChatworkのマイチャットに整形して送信する仕組みを実装しました。これでスマホでChatworkから、毎朝、起きた時に1日のスケジュールを把握することができます、やったね！

　GoogleAppsScriptは、ざっくりいうと、Googleが提供するJavaScriptの実行環境です。
GoogleCalendarやGoogleSpreadSheetをはじめとするGoogleの各種サービスを、JavaScriptで操作することができます。このときは、GoogleCalendarを操作できるように用意されている　CalendarAppを用い、calendarIdを指定して自分のカレンダーを取得しています。

カレンダーを取得し、予定の詳細を保持しているCalendarEventから、
・ イベントのタイトル
・ 開始時刻と終了時刻
・ カレンダーイベントへのリンク(ここを参考に)
を取得し、

[info][title]Today's Your Schedules!  2019/12/23 (Mon) [/title]Title: 予定のテスト
StartTime:14:00
EndTime  :15:00
Location:小田原のどこか
URL: https://www.google.com/calendar/event?eid=
[/info]

のような文面を生成して、以下の図のようなメッセージをマイチャットに送信しています。

マイチャットへの送信は、ChatWorkが公式で提供しているAPIを用いて、以下のようなエンドポイントでマイチャットのルームIDを指定して行なっています。
/rooms/{room_id}/messages

これをGoogleAppsScript(GAS)から実行するのですが、GAS用の(非公式)のライブラリ、Chatwork Client for Google Apps Scriptがあったのでそれを使用させていただいています。

ここまでのコードをまとめると、以下のようになります。

// sender
function sendChat(message, roomId, client) {
    client.sendMessage({
        room_id: roomId,
        body: message
    });
}
// calendarIdに対応するcalendarからその日の予定を取得する
function getMyEvents(calendarId) {
    var myCal = CalendarApp.getCalendarById(calendarId);
    var date = new Date();
    return myCal.getEventsForDay(date);
}
//全ての予定に対して必要な情報を集めた配列を取得
function getMySchedules(calendarId) {
    var myEvents = getMyEvents(calendarId);
    var mySchedules = [];
    if (myEvents.length === 0) {
        return mySchedules;
    }
    for (var i = 0; i < myEvents.length; i++) {
        var myEvent = myEvents[i];
        var splitEventId = myEvent.getId().split('@');
        var eventURL = "https://www.google.com/calendar/event?eid=" + Utilities.base64Encode(splitEventId[0] + " " + calendarId);
        var startTimeStr = Utilities.formatDate(myEvent.getStartTime(), "JST", "HH:mm");
        var endTimeStr = Utilities.formatDate(myEvent.getEndTime(), "JST", "HH:mm");
        var mySchedule = 'Title: ' + myEvent.getTitle() + '\nStartTime:' + startTimeStr + '\nEndTime  :' + endTimeStr + '\nLocation:' + myEvent.getLocation() + '\n';
        mySchedule += 'URL: ' + eventURL + '\n';
        mySchedules.push(mySchedule);
    }
    return mySchedules;
}
// マイチャットに、1日のスケジュールを配信する
function sendMyTodaysSchedules(roomId, calendarId, chatworkToken) {
    // chatworkに配信するためのclientインスタンス
    var client = ChatWorkClient.factory({ token: chatworkToken });
    // 取得したカレンダーの予定情報
    var mySchedules = getMySchedules(calendarId);
    var date = new Date();
    var dateStr = Utilities.formatDate(date, 'JST', "yyyy/MM/dd (E)");
    var message = '[info][title]Today\'s Your Schedules!  ' + dateStr + ' [/title]';
    if (mySchedules.length === 0) {
        message += '本日の予定は特にありません。';
    }
    for (var i = 0; i < mySchedules.length; i++) {
        message += mySchedules[i];
        message += '\n';
    }
    message += '[/info]';
    sendChat(message, roomId, client);
}
function  main(){
    var roomId = '/* roomId */';
    var calendarId = '/* calendarId */';
    var chatworkToken = '/* chatworkToken */';
    sendMyTodaysSchedules(roomId, calendarId, chatworkToken);
}

あとはこれに、トリガーを設定して毎朝送られてくるようにすれば完成です。

他の人にも使ってもらえるようにする

ここからが本題です笑 この仕組みを使っているうちに、他の人にも使わせてあげたくなってきました。そこで、どうやったら使わせてあげられるか、もとい、使っていただけるかを考えました。

まず、利用者の登録を、GoogleSpreadSheetで行うようにしました。
このシートに、名前とcalendarId、予定を送ってほしいルームのroomIdを記入してもらいます。これを、朝の決まった時間に読み取って、カレンダーの情報をユーザーごとにTo付けをして送信します。

これをやるにあたって、発生した問題がいくつかありました。

　1つ目は、ChatworkでのTo送信の際のaccount_idの取得方法の変更が必要となった点です。To送信先のaccount_idの取得を、送信先のルームにいるユーザーのaccount_idを取得することで行なっています。マイチャットが送信先になっている場合は、1つのaccount_idしか存在しませんでしたが、他のroomIdも指定できるようにしたので、名前で、送信したいユーザーのaccount_idを検索してあげる必要性が発生しました。今回は新たに、この部分のロジックを実装しています。また、実運用中にルームから検索できないケースがあったので、contactからも検索できるようにしています。

// To:[account_id]形式のテキストを出力
function makeTo(name, room_id, client) {
    var account_id = getAccountId(name, client, room_id);
    var message = '[To:' + account_id + ']' + name + '\n';
    return message;
}
// roomから取得できないときは、コンタクトから取得
function getAccountId(name_, client, room_id) {
    if (room_id === '') {
        var account_id = getUserId(name_,room_id,client);
        return account_id;
    }
    try {
        var account_id = getUserId(name_, room_id, client);
    } catch(error) {
        var account_id = getUserIdFromContact(name_, client);
    }
    return account_id;
}
// room_idが示すchatroomのメンバー一覧を取得し、ユーザー名に対するaccount_idを取得する
function getUserId(name_, room_id, client) {
    var members = client.get('/rooms/' + room_id + '/members');
    if (members.length == 1) {
        return members[0].account_id;
    }
    return searchUserId(members, name_);
}
// account_idの取得をcontactから行うように変更
function getUserIdFromContact(name_, client) {
    var members = client.get('/contacts/');
    return searchUserId(members, name_);
}
// 検索部分の共通化
function searchUserId(members, name_){
    var user = members.filter(function (member) {
        name_ = name_.replace(/\s+/g, '');
        name = member['name'].replace(/\s+/g, '');
        return (name.match(name_) != null);
    });
    return user[0].account_id;
}

2つ目は、僕のGoogleCalendarに追加されていないと、CalendarAppの検索対象にならないことです。今は仕方なく、Calendarに手動で追加しています。あとで、根本対応？として、SpreadSheetの変更をトリガーにして、Calendarに追加する仕組みを実装します。(仮にユーザーが100名になったら、僕のカレンダーに100名登録されてしまうのですが...)
今回は、一時対応として、配信に失敗した時にエラーメッセージを表示する仕組みを以下のように実装しています。また、スプレッドシートのセルにtrueが入ったユーザーにだけ、手動で再送信する仕組みも実装しました。(直接scriptEditorから関数を実行します。実装はほとんど下記と同じなので割愛します)

    var chatworkToken = '/* chatworkToken */';
    // スプレッドシートのid
    var id = '/* spreadsheetId */';
    var spreadsheet = SpreadsheetApp.openById(id);
    var sheet = spreadsheet.getSheetByName('members');
    var range = sheet.getRange(2, 1, 1000, 4);
    var values = range.getValues();

    for (var i = 0; i < values.length; i++) {
        var userVal = values[i];
        if (userVal[0] === '')
            break;
        var name = userVal[0];
        var calendarId = userVal[1];
        var roomId = userVal[2].toString();
        try {
            sendMyTodaysSchedules(roomId, name, calendarId, chatworkToken);
            var date = new Date();
            sheet.getRange('D'+(i+2).toString()).setValue(date);
        }
        catch (error) {
            // エラーをspreadSheetに表示し、再送フラグも追加
            Logger.log(error);
            sheet.getRange('D'+(i+2).toString()).setValue(error);
            sheet.getRange('E'+(i+2).toString()).setValue('true');
        }
    }

3つ目は、土日にも送られてしまうことがあげられます。これは自分一人で使っている時にはあまり気にならなかったのですが、お休みの日にもChatworkにチャットが送られてしまうことに対する罪悪感から対策しています。

 // 土日は送らない
 var day = new Date().getDay();
 if (day === 0 | day === 6) {
    Logger.log("土日は送らない");
    return;
 }

おわりに

ひとりで使っている時には問題にならなかったことも、複数人で使うとなると大きな問題になることがあります。そのような問題を解決して、他の人にも使っていただけるようなものを作ることで、ユーザーの目線に立って考えるいい機会になった、と思います。なによりも自分が作ったものを他の人に使っていただける、というのが結構嬉しいです。会議室、今日どこだっけってなった時にスマホから確認できるとか、想定していない使い方も出てきて面白いです。
ただ、僕のChatworkTokenを使用しているので、毎朝、僕からToでユーザーに自分の予定が送られるという不思議な状況になっています。(あとでBotのアカウントに変えようかな...)

ちなみに、現在、僕を含めた7名にこの仕組みは利用されています。ご利用ありがとうございます！

はじめに

こんにちは！@70days_jsです。
今日は文字を泳がせてみました。(gif)↓

64日目。(2019/12/21)
よろしくお願いします。

サイトURL

https://sin2cos21.github.io/day65.html

やったこと

文字を泳がせてみました。
別の言い方をすると、文字がランダムなスピードでY方向の移動をくり返しています。

html↓

 <body>
    <canvas id="canvas"></canvas>
  </body>

canvasを使っています。

css↓

body {
  margin: 0;
}
#canvas {
  background-color: black;
}

bodyのmarginを消して、背景を黒にしています。

JavaScript↓

let canvas = document.getElementById("canvas"),
  ctx = canvas.getContext("2d"),
  twidth = (canvas.width = window.innerWidth),
  theight = (canvas.height = window.innerHeight),
  chars = [],
  fontSize = Math.random() * 100,
  countNumber = 1,
  flag = true;
chars2 = [
  "あ",
  "い",
  "う",
...略...
  "を",
  "ん"
];

function Character(ctx) {
  this.ctx = ctx;
  this.x = Math.floor(Math.random() * twidth);
  this.y = Math.floor(Math.random() * theight);
  this.size = fontSize;
  this.char = chars2[Math.floor(Math.random() * chars2.length)];
  this.v = Math.floor(Math.random() * 5);
}

Character.prototype.render = function() {
  this.draw();
  this.positionChange();
};

Character.prototype.positionChange = function() {
  this.y -= this.v + 1;
  if (this.y < 0) this.y = theight;
  if (this.y > theight) this.y = 0;
};

Character.prototype.draw = function() {
  let ctx = this.ctx;
  ctx.beginPath();
  ctx.fillStyle = "rgba(31, 227, 13, .5)";
  ctx.font = this.size + "px Arial";
  ctx.fill();
  ctx.fillText(this.char, this.x, this.y);
  ctx.closePath();
};

for (var i = 0; i < 100; i++) {
  fontSize = Math.random() * 15;
  let char = new Character(ctx);
  chars.push(char);
}

function render() {
  ctx.clearRect(0, 0, twidth, theight);
  for (var i = 0; chars.length > i; i++) {
    let char = chars[i];
    char.render();
  }
  requestAnimationFrame(render);
}

render();

昨日作ったCharacterコンストラクターを再利用しています。
メソッドは新たにpositionChange()メソッドを加えました。

Y方向の移動をthis.vを使って変更しています。
this.vはランダムで作っているので、あまり遅すぎるものを警戒して最後に+1しています。

感想

とてもシンプルなコードですが、文字が動いているのはワクワクしますね。
ひらがなっていいな。

最後まで読んでいただきありがとうございます。明日も投稿しますのでよろしくお願いします。

概要

JavaScriptのArrayを使う上で、Arrayにはどんな機能があって、どういう場面でどう便利に使えるのか、ぜひ知っておきたいです。

そうしないと、Arrayのさまざまな関数でできることって、結局for文で手続き的に書いていけば実装できてしまうので、ソースがfor文だらけになってしまうかもしれません。

弊社のマッチングアプリ『CoupLink』は、JavaScriptで書かれているのですが、ソース内でArrayの機能がそれぞれどれくらい、そしてどのように使われているのかまとめてみました。

---

• 添付しているアプリのスクリーンショットはダミーのものになります。
• 例で出しているサンプルのデータは、説明しやすいよう新たに定義したもので、実際の構造とは関係ありません。
• 例で出しているJavaScriptのコードも同様に、説明しやすい内容で新たに書いたもので、実装のソースとは関係ありません。

1位 filter (70回)

特に特殊な使い方はしておらず、配列から特定のものに絞りたい場合に使っています。

→

↑全スタンプのうち、選択しているタブのスタンプだけを表示します

// チャットで使える複数の種類のスタンプを全てフラットな配列で受け取っている
const stamps = [
  { id: 1, name: 'stamp1-1', group: 1 },
  { id: 2, name: 'stamp1-2', group: 1 },
  // ...
  { id: 41, name: 'stamp2-1', group: 2 },
  { id: 42, name: 'stamp2-2', group: 2 },
  // ...
  { id: 239, name: 'stamp6-39', group: 6 },
  { id: 240, name: 'stamp6-40', group: 6 }
]

// 選択した種類のスタンプのみにフィルタリングする
const selectedGroup = 1
const selectedStamps = stamps.filter(v => v.group === selectedGroup)
// [{ id: 1, name: 'stamp1-1', group: 1 }, { id: 2, name: 'stamp1-2', group: 1 }, ...]

また、配列からfalsyな値を取り除きたいときなどにも使っています。

const values = ['val1', null, 'val3', null]
users.filter(v => v) // ['val1', 'val3']
// または
users.filter(Boolean) // ['val1', 'val3']

2位 map (65回)

mapは体感でもかなり使っている感じがします。

別の内容をマッピングしたり、

（都道府県idのみの配列を、都道府県文字列でマッピング）

// 都道府県マスタ
const PREFECTURES = [
  { id: 1, name: '北海道' },
  // ...
  { id: 47, name: '沖縄県' }
]

// 都道府県のidのみが格納された配列
const selectedPrefectureIds = [1, 2, 3]

// 上記のidの配列をマスタの内容でマッピング
const selectedPrefectures = selectedPrefectureIds.map(id => {
  return PREFECTURES.find(p => p.id === id)
})
// [
//   { id: 1, name: '北海道' },
//   { id: 2, name: '青森県' },
//   { id: 3, name: '岩手県' }
// ]

単純に深い階層にある値だけを取り出したり、

const prefectures = [
  { id: 1, name: '北海道' },
  { id: 47, name: '沖縄県' }
]
const prefectureNames = prefectures.map(v => v.name) // ['北海道', '沖縄県']

行ごとに何か関数を実行するような場合でも、返り値があるならmapを使うことが多いです。

const results = arr.map(v => execSmothing(v)) // [true, false]

3位 find (66回)

前提として、連続したデータは基本的にArrayで扱っています。
例えば複数のユーザーを変数で扱うとき、以下のようにidなどをキーとしてObjectに格納する、といったことはしません。

const users = {
  1: { name: 'user1' },
  2: { name: 'user2' },
  3: { name: 'user3' }
}
const user2 = users[2] // { name: 'user2' }

以下のようなデータを扱います。

const users = [
  { id: 1, name: 'user1' },
  { id: 2, name: 'user2' },
  { id: 3, name: 'user3' }
]

このとき、特定行の中にある値を元にその行を取得したい場合にfindを使います。

const user2 = users.find(u => u.id === 2) // { id: 2, name: 'user2' }

使われ方としてはほとんどがこのケースでした。

4位 includes (62回)

includesはほぼif文でのORを短くする目的で使われていました。

if (response.statusCode === 401 || response.statusCode === 403) {
  // Do something
}

↑を↓のように書きたい。

if ([401, 403].includes(response.statusCode)) {
  // Do something
}

起点の配列側が定数となり、引数が検証される側の変数となります。

5位 forEach (34回)

主に行ごとに何か別の関数を実行したいときなどに使われています。

const params = new URLSearchParams()
userIds.forEach(id => params.append('user_ids[]', id))

もしforEachやfor文の利用回数が一番多い人は、例えば以下のように他のArray関数が使えるケースでもfor文を使ってしまっているかもしれません。

const users = [
  { id: 1, gender: 'male' },
  { id: 2, gender: 'female' },
  { id: 3, gender: 'male' }
]

// femaleだけの配列にしたい
const femaleUsers = []
users.forEach(user => {
  if (user.gender === 'female') femaleUsers.push(user)
})

// filterが使えます
const femaleUsers = users.filter(user => user.gender === 'female')

5位 join (25回)

joinはいたって普通の使い方で、配列を文字列で列挙する際に使っています。
これ以外の使い方はあまり思いつきません。

const user1 = {
  name: 'user1',
  hobbies: [{ id: 1, name: '映画鑑賞' }, { id: 2, name: '音楽' }, { id: 3, name: 'グルメ' }]
}
user1.hobbies.map(h => h.name).join(', ') // 映画鑑賞, 音楽, グルメ

6位 some (14回)

一行でもcallbackでtrueを返せば、結果がtrueになる関数です。

そのままの使い方では、フォームのバリデーションなどで使っていました。

const arr = [
  { question: '質問1', answer: '回答1' },
  { question: '質問2', answer: '' },
  { question: '質問3', answer: '回答3' },
]
if (arr.some(v => v.answer === '')) alert('未入力項目があります')

他の使い方:

someはループ中にtrueが見つかれば、その時点でtrueを返し、それ以降の行のコールバックは実行されません。

この仕様を利用して、break文のような処理を書くことができます。

const arr = ['arg1', 'arg2', 'arg3']
arr.some(arg => {
  const result = execSomething(arg)
  return !result // 失敗したらbreak
})

// execSomething('arg2') で失敗したら execSomething('arg3') は実行されない

7位 reduce (5回)

一般的にはドキュメントにある例のように、各行を集計して1つの結果にまとめる、といった使いかと思われます。

const arr = [1, 5, 10, 20]
const sum = arr.reduce((prev, current) => prev + current) // 36

CoupLinkでは、第二引数の初期値を利用して新たなObjectやArrayを組み立てるためにたまに使われていました。

→

例えば、上のスクリーンショットの例では、フラットに格納されたチャットのメッセージの配列を、日付ごとにグルーピングした状態したいときに、reduceを以下のように使っています。

// メッセージの一覧がフラットに格納された配列を
const massages = [
  { date: '2019-12-01', message: 'm1' },
  { date: '2019-12-01', message: 'm2' },
  { date: '2019-12-02', message: 'm3' },
  { date: '2019-12-03', message: 'm4' },
  { date: '2019-12-03', message: 'm5' },
  { date: '2019-12-03', message: 'm6' }
]

// このように日付でグルーピングしたい
[
  { date: '2019-12-01', messages: ['m1', 'm2'] },
  { date: '2019-12-02', messages: ['m3'] },
  { date: '2019-12-03', messages: ['m4', 'm5', 'm6'] }
]

//  reduce
const messageGroup = messages.reduce((arr, current) => {
  const foundRow = arr.find(v => v.date === current.date)
  if (foundRow) {
    foundRow.messages.push(current.message)
  } else {
    arr.push({ date: current.date, messages: [current.message] })
  }
  return arr
}, [])

意地でも一回の代入で仕上げたい人向けです。

forEachで書くと以下のようになります。
reduceの仕様を覚えていない人も少なくないかもしれませんが、さきほどとやっていることは同じです。

// forEach
const messageGroup = []
messages.forEach(current => {
  const foundRow = arr.find(v => v.date === current.date)
  if (foundRow) {
    foundRow.messages.push(current.message)
  } else {
    arr.push({ date: current.date, messages: [current.message] })
  }
})

おわり

おわりです！

概要

JavaScriptのArrayを使う上で、Arrayにはどんな機能があって、どういう場面でどう便利に使えるのか、ぜひ知っておきたいです。

そうしないと、Arrayのさまざまな関数でできることって、結局for文で手続き的に書いていけば実装できてしまうので、ソースがfor文だらけになってしまうかもしれません。

弊社のマッチングアプリ『CoupLink』は、JavaScriptで書かれているのですが、ソース内でArrayの機能がそれぞれどれくらい、そしてどのように使われているのかまとめてみました。

---

• 添付しているアプリのスクリーンショットはダミーのものになります。
• 例で出しているサンプルのデータは、説明しやすいよう新たに定義したもので、実際の構造とは関係ありません。
• 例で出しているJavaScriptのコードも同様に、説明しやすい内容で新たに書いたもので、実装のソースとは関係ありません。

1位 filter (70回)

特に特殊な使い方はしておらず、配列から特定のものに絞りたい場合に使っています。

→

↑全スタンプのうち、選択しているタブのスタンプだけを表示します

// チャットで使える複数の種類のスタンプを全てフラットな配列で受け取っている
const stamps = [
  { id: 1, name: 'stamp1-1', group: 1 },
  { id: 2, name: 'stamp1-2', group: 1 },
  // ...
  { id: 41, name: 'stamp2-1', group: 2 },
  { id: 42, name: 'stamp2-2', group: 2 },
  // ...
  { id: 239, name: 'stamp6-39', group: 6 },
  { id: 240, name: 'stamp6-40', group: 6 }
]

// 選択した種類のスタンプのみにフィルタリングする
const selectedGroup = 1
const selectedStamps = stamps.filter(v => v.group === selectedGroup)
// [{ id: 1, name: 'stamp1-1', group: 1 }, { id: 2, name: 'stamp1-2', group: 1 }, ...]

また、配列からfalsyな値を取り除きたいときなどにも使っています。

const values = ['val1', null, 'val3', null]
users.filter(v => v) // ['val1', 'val3']
// または
users.filter(Boolean) // ['val1', 'val3']

2位 map (65回)

mapは体感でもかなり使っている感じがします。

別の内容をマッピングしたり、

（都道府県idのみの配列を、都道府県文字列でマッピング）

// 都道府県マスタ
const PREFECTURES = [
  { id: 1, name: '北海道' },
  // ...
  { id: 47, name: '沖縄県' }
]

// 都道府県のidのみが格納された配列
const selectedPrefectureIds = [1, 2, 3]

// 上記のidの配列をマスタの内容でマッピング
const selectedPrefectures = selectedPrefectureIds.map(id => {
  return PREFECTURES.find(p => p.id === id)
})
// [
//   { id: 1, name: '北海道' },
//   { id: 2, name: '青森県' },
//   { id: 3, name: '岩手県' }
// ]

単純に深い階層にある値だけを取り出したり、

const prefectures = [
  { id: 1, name: '北海道' },
  { id: 47, name: '沖縄県' }
]
const prefectureNames = prefectures.map(v => v.name) // ['北海道', '沖縄県']

行ごとに何か関数を実行するような場合でも、返り値があるならmapを使うことが多いです。

const results = arr.map(v => execSmothing(v)) // [true, false]

3位 find (66回)

前提として、連続したデータは基本的にArrayで扱っています。
例えば複数のユーザーを変数で扱うとき、以下のようにidなどをキーとしてObjectに格納する、といったことはしません。

const users = {
  1: { name: 'user1' },
  2: { name: 'user2' },
  3: { name: 'user3' }
}
const user2 = users[2] // { name: 'user2' }

以下のようなデータを扱います。

const users = [
  { id: 1, name: 'user1' },
  { id: 2, name: 'user2' },
  { id: 3, name: 'user3' }
]

このとき、特定行の中にある値を元にその行を取得したい場合にfindを使います。

const user2 = users.find(u => u.id === 2) // { id: 2, name: 'user2' }

使われ方としてはほとんどがこのケースでした。

4位 includes (62回)

includesはほぼif文でのORを短くする目的で使われていました。

if (response.statusCode === 401 || response.statusCode === 403) {
  // Do something
}

↑を↓のように書きたい。

if ([401, 403].includes(response.statusCode)) {
  // Do something
}

起点の配列側が定数となり、引数が検証される側の変数となります。

5位 forEach (34回)

主に行ごとに何か別の関数を実行したいときなどに使われています。

const params = new URLSearchParams()
userIds.forEach(id => params.append('user_ids[]', id))

もしforEachやfor文の利用回数が一番多い人は、例えば以下のように他のArray関数が使えるケースでもfor文を使ってしまっているかもしれません。

const users = [
  { id: 1, gender: 'male' },
  { id: 2, gender: 'female' },
  { id: 3, gender: 'male' }
]

// femaleだけの配列にしたい
const femaleUsers = []
users.forEach(user => {
  if (user.gender === 'female') femaleUsers.push(user)
})

// filterが使えます
const femaleUsers = users.filter(user => user.gender === 'female')

5位 join (25回)

joinはいたって普通の使い方で、配列を文字列で列挙する際に使っています。
これ以外の使い方はあまり思いつきません。

const user1 = {
  name: 'user1',
  hobbies: [{ id: 1, name: '映画鑑賞' }, { id: 2, name: '音楽' }, { id: 3, name: 'グルメ' }]
}
user1.hobbies.map(h => h.name).join(', ') // 映画鑑賞, 音楽, グルメ

6位 some (14回)

一行でもcallbackでtrueを返せば、結果がtrueになる関数です。

そのままの使い方では、フォームのバリデーションなどで使っていました。

const arr = [
  { question: '質問1', answer: '回答1' },
  { question: '質問2', answer: '' },
  { question: '質問3', answer: '回答3' },
]
if (arr.some(v => v.answer === '')) alert('未入力項目があります')

他の使い方:

someはループ中にtrueが見つかれば、その時点でtrueを返し、それ以降の行のコールバックは実行されません。

この仕様を利用して、break文のような処理を書くことができます。

const arr = ['arg1', 'arg2', 'arg3']
arr.some(arg => {
  const result = execSomething(arg)
  return !result // 失敗したらbreak
})

// execSomething('arg2') で失敗したら execSomething('arg3') は実行されない

7位 reduce (5回)

一般的にはドキュメントにある例のように、各行を集計して1つの結果にまとめる、といった使いかと思われます。

const arr = [1, 5, 10, 20]
const sum = arr.reduce((prev, current) => prev + current) // 36

CoupLinkでは、第二引数の初期値を利用して新たなObjectやArrayを組み立てるためにたまに使われていました。

→

例えば、上のスクリーンショットの例では、フラットに格納されたチャットのメッセージの配列を、日付ごとにグルーピングした状態したいときに、reduceを以下のように使っています。

// メッセージの一覧がフラットに格納された配列を
const massages = [
  { date: '2019-12-01', message: 'm1' },
  { date: '2019-12-01', message: 'm2' },
  { date: '2019-12-02', message: 'm3' },
  { date: '2019-12-03', message: 'm4' },
  { date: '2019-12-03', message: 'm5' },
  { date: '2019-12-03', message: 'm6' }
]

// このように日付でグルーピングしたい
[
  { date: '2019-12-01', messages: ['m1', 'm2'] },
  { date: '2019-12-02', messages: ['m3'] },
  { date: '2019-12-03', messages: ['m4', 'm5', 'm6'] }
]

//  reduce
const messageGroup = messages.reduce((arr, current) => {
  const foundRow = arr.find(v => v.date === current.date)
  if (foundRow) {
    foundRow.messages.push(current.message)
  } else {
    arr.push({ date: current.date, messages: [current.message] })
  }
  return arr
}, [])

意地でも一回の代入で仕上げたい人向けです。

forEachで書くと以下のようになります。
reduceの仕様を覚えていない人も少なくないかもしれませんが、さきほどとやっていることは同じです。

// forEach
const messageGroup = []
messages.forEach(current => {
  const foundRow = arr.find(v => v.date === current.date)
  if (foundRow) {
    foundRow.messages.push(current.message)
  } else {
    arr.push({ date: current.date, messages: [current.message] })
  }
})

おわり

おわりです！

個人的に開発しているサイトではWordPressのPHP上にReactを載せており、そこではbundleのハッシュ値をphp側で参照できるようにしています。extract-hash-webpack-pluginを使うと任意のテキスト形式でハッシュ値を含んだファイルを出力できます。今回はPHPから参照したいので.phpの形式で出力してみます。以下がwebpack.config.jsの例です。

var path = require('path');

var ExtractHashWebpackPlugin = require('extract-hash-webpack-plugin').default;
const { CleanWebpackPlugin } = require('clean-webpack-plugin');

const DIST_PATH = "theme/dist";

module.exports = {
    entry: "./src/index.tsx",
    output: {
        filename: "index.[hash].js",
        path: path.resolve(__dirname, DIST_PATH)
    },
    /* ... */
    plugins: [
        new ExtractHashWebpackPlugin({
            dest: DIST_PATH,
            filename: 'version.php',
            fn: hash => `<? $JS_HASH = '${hash}'; ?>`
        }),
        /* ... */
    ]
};

プラグインのfnオプションでハッシュ値を使った出力を定義できます。今回は変数$JS_HASHにハッシュ値を保存するPHPのコードを出力するようにしています。

ユーザー情報の取得については、こちらをご参照ください。
JavaScriptによるユーザー情報の取得

ページ表示時に処理

イベント	内容
DOMContentLoaded	HTMLドキュメント解析完了時(deferを指定しているなら不要)
load	全リソースの読み込み完了時(キャッシュの場合は対象外)
pageshow	全リソースの読み込み完了時(キャッシュの場合も対象)

js

window.addEventListener("load", () => {
  console.log("ページが読み込まれた");
});

ページ非表示時に処理

イベント	内容
beforeunload	ページ遷移直前
unload	ウィンドウを閉じた時、他のページに切り替えた時、ページをリローした時に発生(キャッシュの場合は対象外)
pagehide	ページ遷移などで元のページが隠れた時

js

window.addEventListener("beforeunload", () => {
  event.returnValue;
});

タブがバックグラウンドになったときに処理

イベント	内容
visibilitychange	タブのコンテンツが表示されたとき、非表示(バックグラウンド)になったとき

document要素に対して設定します。
document.visibilityStateと組み合わせて使います。

js

document.addEventListener('visibilitychange', () => {

  if (document.visibilityState === 'visible') {
    console.log("コンテンツが表示された");
  }

  if (document.visibilityState === 'hidden') {
    console.log("コンテンツがバックグラウンドになった");
  }

})

ページのフォーカスのイベント

ページにフォーカスされた時

JavaScript

window.addEventListener("focus", () => {
  console.log("ページにフォーカスされた");
});

ページからフォーカスが外れた時

JavaScript

window.addEventListener("blur", () => {
  console.log("ページからフォーカスが外れた");
});

タイトル

タイトルの取得

html

<button id="js-getTitleButton">タイトル取得</button>

JavaScript

const getTitleButton = document.getElementById("js-getTitleButton");

getTitleButton.addEventListener("click", () => {
  console.log(document.title);
});

タイトルの変更

html

<button id="js-changeTitleButton">タイトル変更</button>

JavaScript

const changeTitleButton = document.getElementById("js-changeTitleButton");

changeTitleButton.addEventListener("click", () => {
  document.title = "new title"
});

ハッシュ

値の取得

htm

<button id="js-getHashButton">ハッシュ取得</button>

JavaScript

const getHashButton = document.getElementById("js-getHashButton");

getHashButton.addEventListener("click", () => {
  console.log(location.hash);
});

変更イベント

html

<button id="js-changeHashButton">ハッシュ変更</button>

JavaScript

const changeHashButton = document.getElementById("js-changeHashButton");

//ハッシュ変更        
changeHashButton.addEventListener("click", () => {
  location.hash = "sample";
});

//ハッシュ変更監視
window.addEventListener("hashchange", () => {
  console.log("ハッシュが変更された");
});

ダイアログ

アラート

html

<button id="js-alertButton">アラート</button>

JavaScript

const alertButton = document.getElementById("js-alertButton");

alertButton.addEventListener("click", () => {
  alert("アラート");
});

コンファーム

html

<button id="js-confirmButton">コンファーム</button>

JavaScript

const confirmButton = document.getElementById("js-confirmButton");

confirmButton.addEventListener("click", () => {

  const confirmReaction = confirm("OK or Cancel");

  if (confirmReaction === true) {
    console.log("OKを選択した");
  }

  if (confirmReaction === false) {
    console.log("Cancelを選択した");
  }

});

文字入力プロンプト

html

<button id="js-promptButton">プロンプト</button>

JavaScript

const promptButton = document.getElementById("js-promptButton");
promptButton.addEventListener("click", () => {
  const promptReaction = prompt("文字入力してください", "デフォルト文字列")

  if (promptReaction === "") {
    console.log("入力されなかった");
  } else if (promptReaction == null) {
    console.log("キャンセルされた");
  } else {
    console.log(`${promptReaction}と入力された`);
  }

});

ウィンドウサイズ

プロパティ
window.innerWidth	ビューポートの幅
window.innerHeight	ビューポートの高さ
window.document.documentElement.clientWidth	(スクロールバーを除く)
window.document.documentElement.clientHeight	(スクロールバーを除く)

html

<button id="js-windowSizeButton">ウィンドウサイズ</button>

JavaScript

const windowSizeButton = document.getElementById("js-windowSizeButton");

windowSizeButton.addEventListener("click", () => {

  console.log(`幅${window.innerWidth}px`);
  console.log(`高さ${window.innerHeight}px`);

});

スクロール

表示位置の取得

ドキュメント左上基準で取得されます。

プロパティ	内容
window.scrollX	X軸方向のスクロール量
window.scrollY	Y軸方向のスクロール量

html

<button id="js-scrollPositionButton" style="margin-top:2000px;">スクロール位置取得</button>

JavaScript

const scrollPositionButton = document.getElementById("js-scrollPositionButton");

scrollPositionButton.addEventListener("click", () => {
  console.log(`X軸${window.scrollX}`);
  console.log(`Y軸${window.scrollY}`);
});

表示位置の変更

メソッド	内容
scrollTo(X,Y)	スクロールする座標の指定(絶対)
scrollBy(X,Y)	スクロールする座標の指定(相対)

html

<button id="js-scrollButton" style="margin-top:2000px;">スクロールボタン</button>

JavaScript

const scrollButton = document.getElementById("js-scrollButton");

scrollButton.addEventListener("click", () => {
  window.scrollTo(0, 0);
});

スクロール時に処理

イベント	内容
scroll	対象の要素がスクロールしたとき

js

window.addEventListener('scroll',()=>{
  console.log(window.scrollX,window.scrollY);
});

Intersection Observer

「基準の要素」と「監視される要素」を監視して、重なり具合をきっかけにして処理を行います。

IntersectionObserver オブジェクトの作成

js

const observer = new IntersectionObserver(callback, options);

IntersectionObserverの第一引数

交差割合が変わったときに実行されるコールバック関数です。

js

const callback = (entries, observer) => {
  entries.forEach(entry => {
    //処理
  })
}

引数	説明
entries	交差オブジェクト observe メソッドを複数回呼び出せば複数の要素を監視できるので配列 このオブジェクトから交差の割合などの情報を引き出せる
observer	IntersectionObserverオブジェクト

IntersectionObserverの第二引数

オプションです。

js

 const options = {
   root: null,
   rootMargin: 0,
   threshold: [0.25, 0.5]
 }

項目	説明
root	基準にしたい要素を指定 デフォルトはビューポート
rootMargin	対象要素との交差位置の調整 正の値を指定：画面に入る前に交差判定 デフォルト：0
threshold	コールバックを実行する交差の閾値 数値か、複数の場合は配列で指定可能 例：threshold: [0.2, 0.5]の場合は、20%と50％のときに判定が行われる 範囲：0～1の間(デフォルト0)

observerのobserveメソッドで監視を開始

js

const target = document.querySelector('#something');
observer.observe(target)

IntersectionObserverEntryのプロパティ	内容
intersectionRatio	交差している領域の割合
boundingClientRect	監視対象の要素のサイズと、そのビューポートに対する位置
intersectionRect	交差している領域のサイズと、そのビューポートに対する位置
isIntersecting	trueは交差状態への移行、falseは非交差状態への移行
rootBounds	rootの要素のサイズと、そのビューポートに対する位置
target	監視対象
time	タイムスタンプ

html

<div class="greenSection"></div>

<div class="redSection"></div>

<div class="yellowSection"></div>

<div class="greenSection"></div>

<div class="redSection"></div>

<div class=" yellowSection"></div>

css

.greenSection {
  background-color: green;
  height: 1000px;
}

.redSection {
  background-color: red;
  transition: background-color 0.4s ease-out;
  height: 2000px;
}

.redSection.active {
  background-color: blue;
}

.yellowSection {
  background-color: yellow;
  height: 1000px;
}

js

//Intersection Observerの処理
const startIntersectionObserver = () => {

  //thresholdで指定した値の時に呼ばれるコールバック
  const callback = (entries, observer) => {
    entries.forEach(entry => {

      //交差判定の時点でintersectionRationが20%以上のとき
      if (entry.intersectionRatio >= 0.2) {

        //activeクラスを追加
        entry.target.classList.add('active')
      }

      //交差判定の時点で見えている領域が20%を下回ったとき
      else if (!entry.isIntersecting) {
        //activeクラスを削除
        entry.target.classList.remove('active')
      }
    })
  }

  //Intersection Observerのオプションの指定
  const option = {

    //基準となる要素の指定(ブラウザ)
    root: null,

    //対象要素との交差位置の調整
    rootMargin: "0px",

    //20%と100%で交差判定を出す
    threshold: [0.2, 1]

    }

  //Intersection Observerのインスタンス生成
  const observer = new IntersectionObserver(callback, option);

  //対象の要素取得(NodeList)
  const targetList = document.querySelectorAll('.redSection');
  //NodeListの配列化
  const targetArray = [...targetList];

  //対象の配列の各要素を監視する
  targetArray.forEach((target) => {
    observer.observe(target);
  })

}

//Intersection Observerの処理の実行
startIntersectionObserver()

リサイズ

画面サイズ変更時に処理

イベント	内容
resize	ブラウザのウインドウサイズが変わった時

js

window.addEventListener('resize', () => {
  console.log('ブラウザがリサイズされた');
})

負荷削減(リサイズ時の処理削減)

サイズが1ピクセルでも変わると発火するので負荷が高いです。
リサイズの1秒後に処理を行うタイマー+リサイズごとに解除することで負荷を抑えます。

js

let resizeTimer;

window.addEventListener('resize', () => {

  //リサイズタイマーに値があればタイマー解除
  if (resizeTimer != null) {
    clearTimeout(resizeTimer);
  }

  const onResize = () => {
    console.log("リサイズした")
  }

  resizeTimer = setTimeout(() => {
    onResize();
  }, 1000);

})

負荷削減(ブレイクポイントを超えた時だけ処理)

違い	内容
resizeイベント	ウィンドウサイズ変更ごとに実行される
matchMedia()	一度だけ実行される(負荷軽減)

メソッド	内容
matchMedia(メディアクエリ)	メディアクエリの情報
matchMedia(メディアクエリ).addListener(処理)	メディアクエリに一致したとき処理を実行

プロパティ	内容
matchMedia(メディアクエリ).match	メディアクエリに一致するかどうか(真偽値)

js

const mediaQueryList = matchMedia('(min-width:500px)');
console.log(mediaQueryList);　//幅が500以上のときtrue

js

matchMedia('(max-width:300px)').matches; //真偽値
matchMedia('(min-width:100px) and (max-width:700px)').matches; //真偽値

js

const mediaQueryList=matchMedia('(orientation:portrait)');
mediaQueryList.addListener(()=>{
  console.log('向きが変更された');
})

ResizeObserver

指定した監視要素のリサイズを検知して処理を行う事ができます。

observerの作成

js

const resizeObserver = new ResizeObserver(entries => {
  for (const entry of entries) { ... }
}); 

対象の監視開始

js

resizeObserver.observe(target);

対象の監視終了

js

resizeObserver.unobserve(target);

サンプル

html

<p id="text--red">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquam, autem optio qui molestias accusamus fugiat nam debitis sunt modi! Voluptatum ullam minus eius earum voluptate dicta dolore neque, voluptatibus itaque maiores hic necessitatibus debitis repudiandae! Quaerat voluptatibus velit magnam veritatis, adipisci perspiciatis reprehenderit consectetur magni laboriosam, dolore repellendus doloribus nesciunt, est dolorum dignissimos. Earum, aliquam nulla? Dolor quo ipsum omnis neque obcaecati corporis sint. Libero repellendus sed autem optio quia doloribus fugiat veritatis excepturi, molestias deserunt nam facere. Quibusdam amet distinctio officia suscipit labore magnam obcaecati aperiam dolorem beatae impedit vitae optio nostrum alias voluptas repellendus similique ad corrupti commodi libero temporibus, excepturi quam. Vero ducimus nisi eaque doloremque atque facilis, tempora accusantium rerum nesciunt, aliquid asperiores ad in pariatur saepe, doloribus deleniti culpa repellendus ratione quia quisquam deserunt iste enim? Nulla, omnis. Maxime cupiditate, delectus corporis praesentium aut commodi architecto eius eos, animi odio dolore fuga totam sint. Suscipit dolorem culpa voluptatem dolor sint. Dignissimos aliquid obcaecati nemo nesciunt eos sint accusamus quos, odit neque architecto aliquam natus magni a nisi libero, omnis quas impedit voluptate! Obcaecati ducimus atque reiciendis, mollitia sint eligendi labore impedit voluptates laboriosam dolor debitis veritatis saepe amet accusamus cupiditate eum dolorem magni nulla. Esse, voluptate, dolorem inventore mollitia delectus tenetur deleniti quibusdam ducimus perspiciatis consequuntur fuga consectetur rerum itaque laboriosam nisi a maxime rem reprehenderit, qui hic enim nihil accusamus soluta! Sapiente veritatis eos obcaecati, accusamus reiciendis delectus voluptates natus odit dolor excepturi officiis iure? Saepe in tenetur soluta libero? Nam, iusto quisquam. Reiciendis, blanditiis dolor? Unde mollitia perferendis aliquid expedita sapiente, ipsa harum possimus debitis numquam exercitationem ipsam suscipit nemo porro hic dolor dolorem adipisci laudantium voluptatem fugit aliquam, tenetur voluptatibus maxime inventore! Sequi magni ad, veritatis, voluptatem aliquid dolorum mollitia laudantium libero commodi ipsam ullam porro doloremque fugit in hic quasi ut.
</p>

<p id="text--blue">
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Hic, officiis nobis dolorum sint asperiores a aperiam velit fugit aliquid nihil sunt ducimus nostrum! Quas assumenda, corporis rerum molestiae in culpa! Neque dolores at consectetur nisi inventore dolorem corrupti quibusdam maxime unde eos! Ipsam asperiores consectetur unde commodi tempora sit magni ea nesciunt modi explicabo quo voluptas, provident reiciendis. Eligendi deleniti at officia excepturi nemo quae doloribus itaque, reiciendis, explicabo velit rem et cum. Laudantium pariatur doloribus ab delectus qui perspiciatis alias blanditiis vero voluptate quam dicta culpa incidunt quae illo, cupiditate praesentium fugit quia tenetur fugiat iusto ipsa nisi consequuntur. Doloribus quisquam amet fuga? At ab magnam inventore architecto nostrum explicabo quasi labore sit illum delectus, mollitia voluptatum quibusdam temporibus commodi rerum placeat? Vel quidem recusandae ipsum asperiores ratione odit porro repudiandae reiciendis doloribus ad, corporis illo est animi iste natus! Odit similique reiciendis id temporibus molestiae libero est iste, quibusdam ea! Atque, dolores? Atque minima impedit dolores nobis dolorem exercitationem officia harum? Ullam voluptatum modi sint. Voluptas numquam saepe officiis hic dolore nisi doloremque consectetur quidem, voluptatem unde ad alias vitae modi labore aut quia sit ipsa fugit perferendis inventore praesentium repellendus! Atque culpa sapiente laboriosam labore tenetur molestias velit, explicabo minima temporibus ab ad assumenda repudiandae ipsum totam aspernatur iure iste modi, amet, sint ratione placeat sed dolorum dicta. Illum magnam veniam accusantium nulla unde non esse, provident perspiciatis commodi dolorem minima doloribus fugit nihil ut qui similique laboriosam culpa earum dicta at fuga voluptas quo porro. Odio laboriosam illum, obcaecati quo aliquam hic eligendi fugit repellat earum veniam saepe iste quidem cum facilis. Saepe qui obcaecati nisi sapiente porro dolore molestias tenetur expedita explicabo, modi recusandae eos necessitatibus ipsam deleniti odit ut distinctio doloremque numquam dicta reiciendis, debitis dolorum adipisci est odio. Incidunt fugiat illo porro asperiores.
</p>

<p id="text--yellow">
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Modi corporis quisquam quidem, nobis laboriosam, quasi optio delectus autem tempora accusantium eligendi, placeat magni mollitia illum est tenetur accusamus dolorem nemo! Reprehenderit, doloremque. Quos, officia corrupti fugiat nulla illum iusto accusantium ex nam necessitatibus esse dolor veniam excepturi id accusamus error impedit sed sunt quidem inventore adipisci optio quaerat rerum! Mollitia perferendis quibusdam sed impedit quo aut facere nemo quaerat odit ut pariatur cumque nulla molestiae fugiat, sunt quasi suscipit omnis consequuntur quia eligendi eaque architecto fuga maiores? Facilis dolores libero magni nam sed assumenda minus accusantium, placeat, vero aliquam inventore consequatur eligendi totam blanditiis error natus quos excepturi necessitatibus porro repellat, aspernatur soluta. Illum a, nesciunt incidunt expedita excepturi cumque autem nobis placeat impedit deleniti fugit. Optio distinctio natus dolor voluptates quaerat atque reiciendis a sit, molestiae itaque quo, sequi assumenda, quis aliquam? Nobis velit beatae magni doloremque accusamus eos aperiam quaerat amet, suscipit, error quos, culpa quod eum sunt soluta. Aspernatur repellendus eum nam eligendi, maxime repudiandae similique accusamus amet earum facilis quod explicabo fugit totam praesentium pariatur suscipit, quibusdam aperiam omnis labore adipisci sequi dolore ducimus perspiciatis! Unde explicabo vel cumque impedit recusandae. Corrupti, repellendus exercitationem? Natus iure facilis, id delectus veniam autem enim reiciendis quod voluptas, illo minima repudiandae alias dolores voluptates accusantium? Veritatis, praesentium atque? Aliquid at atque dolores quaerat, consequuntur laboriosam quae maxime maiores consectetur, quibusdam inventore beatae porro corporis fuga in ipsam mollitia velit voluptatum nisi praesentium? Consequuntur error aliquam temporibus, fugit assumenda minima aspernatur, amet natus ipsa perspiciatis aperiam sapiente voluptate incidunt atque itaque alias voluptas et neque, sit consequatur autem! Culpa dolor facere architecto consectetur nulla unde ea obcaecati dolorem neque quia sapiente provident voluptate soluta minus, eaque aperiam nihil totam sunt quas inventore adipisci debitis! Quos expedita nulla fugit tempore optio!
</p>

css

#text--red {
   background-color: red;
}

#text--blue {
  background-color: blue;
  max-width: 800px;
}

#text--yellow {
  background-color: yellow;
  max-width: 400px;
}

js

//監視対象の取得
const red = document.querySelector("#text--red");
const blue = document.querySelector("#text--blue");
const yellow = document.querySelector("#text--yellow");

const resizeObserver = new ResizeObserver(entries => {
  for (const entry of entries) {

    //リサイズされた検知した要素
    console.log("リサイズされた要素：" + entry.target.id);

    //位置、サイズ
    console.log("top：" + entry.contentRect.top);
    console.log("left：" + entry.contentRect.left);
    console.log("width：" + entry.contentRect.width);
    console.log("height：" + entry.contentRect.height);

  }

});

resizeObserver.observe(red);
resizeObserver.observe(blue);
resizeObserver.observe(yellow);

フルスクリーン表示

html

<button id="js-fullscreenButton">フルスクリーン</button>
<button id="js-clearfullscreenButton">フルスクリーン解除</button>

JavaScript

const fullscreenButton = document.getElementById("js-fullscreenButton");

fullscreenButton.addEventListener("click", (element) => {

  //chrome.firefox
  if (document.body.requestFullscreen) {
    document.body.requestFullscreen();
  }

  //edge
  if (document.body.webkitRequestFullscreen) {
    document.body.webkitRequestFullscreen();
  }

});

const clearfullscreenButton = document.getElementById("js-clearfullscreenButton");

clearfullscreenButton.addEventListener("click", () => {

  //chrome,firefox
  if (document.exitFullscreen) {
    document.exitFullscreen();
  }

  //edge
  if (document.webkitExitFullscreen) {
    document.webkitExitFullscreen();
  }
});

ページ遷移

ページを移動

html

<button id="js-movePageButton">ページ移動</button>

JavaScript

const movePageButton = document.getElementById("js-movePageButton");

movePageButton.addEventListener("click", () => {
  location.href = "https://www.google.co.jp/";
});

ページをリロード

html

<button id="js-reloadPageButton">ページリロード</button>

JavaScript

const reloadPageButton = document.getElementById("js-reloadPageButton");

reloadPageButton.addEventListener("click", () => {

  //キャッシュを使ったリロード
  location.reload();

  //キャッシュを使わないリロード
  location.reload(true);

});   

別ウィンドウを開く

html

<button id="js-openNewWindowButton">別ウィンドウを開く</button>

JavaScript

const openNewWindowButton = document.getElementById("js-openNewWindowButton");

openNewWindowButton.addEventListener("click", () => {
  window.open("https://www.google.co.jp");
});

履歴

履歴の前後のページに移動

メソッド	内容
history.back()	履歴1つ戻る
history.forward()	履歴1つ進む
history.go(n)	履歴nつ進む

html

<button id="js-historygoMinus2Button">履歴2つ戻る</button>
<button id="js-historyBackButton">履歴1つ戻る</button>
<button id="js-historyforwardButton">履歴1つ進む</button>
<button id="js-historygo2Button">履歴2つ進む</button>

JavaScript

const historygoMinus2Button = document.getElementById("js-historygoMinus2Button");
const historyBackButton = document.getElementById("js-historyBackButton");
const historyforwardButton = document.getElementById("js-historyforwardButton");
const historygo2Button = document.getElementById("js-historygo2Button");

historygoMinus2Button.addEventListener("click", () => {
  history.go(-2);
});

historyBackButton.addEventListener("click", () => {
  history.back();
});

historyforwardButton.addEventListener("click", () => {
  history.forward();
});

historygo2Button.addEventListener("click", () => {
  history.go(2);
});

履歴の操作

URLが変わるだけで、ページの内容は変わりません。
実際にそのページに遷移する場合は読み込み処理を書く必要があります。

html

const historyPushButton = document.getElementById("js-historyPushButton");
const historyReplaceButton = document.getElementById("js-historyReplaceButton");
const historyBackButton = document.getElementById("js-historyBackButton");
const historyforwardButton = document.getElementById("js-historyforwardButton");

JavaScript

const historyPushButton = document.getElementById("js-historyPushButton");
const historyReplaceButton = document.getElementById("js-historyReplaceButton");
const historyBackButton = document.getElementById("js-historyBackButton");
const historyforwardButton = document.getElementById("js-historyforwardButton");

historyPushButton.addEventListener("click", () => {
  history.pushState(null, null, "/nextpage.html");
  console.log("履歴が追加された");
});

historyReplaceButton.addEventListener("click", () => {
  history.replaceState(null, null, "/other.html");
  console.log("履歴が上書きされた");
});

historyBackButton.addEventListener("click", () => {
  history.back();
});

historyforwardButton.addEventListener("click", () => {
  history.forward();
});

window.addEventListener("popstate", () => {
  console.log("履歴が辿られた");
})

Vue.jsを利用したWebシステムで帳票印刷する必要がありました。
方法がいくつかあり、検討した知見を紹介します。

背景

• フロントはVue.jsを利用したSPA
• 指定条件を入力しビジネスの統計情報を画面表示する
  • 集計、グラフを伴う
• 統計画面上の「印刷」ボタンを押下すると帳票印刷 or PDFダウンロードする
  • ビジネスレポートは複数ページに渡る
  • 数値の集計表、グラフなどを伴う
• ヘッダ/フッタなどの体裁はこだわらない

また、画面ページ上の統計情報と印刷ページ上の統計情報は同じ情報であり、
開発コスト低減のために可能であれば、集計表、グラフなどの画面表示用コンポーネントを流用して帳票をレイアウトしたい状況です。

方式検討

実現方式は以下のように複数考えられますが、
最終的には「ブラウザの印刷機能でPDF保存」させる方法を採用しました。

• サーバサイドでPDFファイルを生成
  • テンプレートPDFを元に差し込み
  • PDF生成エンジンを利用
    • 独自レイアウト方式型
    • HTML+CSSでレイアウト型
  • headlessブラウザのレンダリング/印刷機能を利用
• クライアントサイドでPDFファイルを生成
  • PDFファイルを生成するJSライブラリ利用
    • 独自レイアウト型
    • HTML+CSSでレイアウト型
    • Domを元にCanvas化し、Canvas画像をPDFに貼り付ける
• クライアントサイドでブラウザの印刷機能でPDF保存 ←採用
  • レイアウトはHTML+CSS
  • Mediaクエリで印刷用CSS定義

以下、検討の際に考慮した観点について補足します。

定形雛形に差し込み vs ページ記述

例えば、「領収書印刷」などの用途のような、以下の条件のようなものは

• 1枚ペラもの
• 定型フォーマット
• 所定の位置に 宛名、金額 が記載できればOK

定形のテンプレートPDFを作成しておき、宛名、金額など一部のテキストに必要な値を差し込む方式が適していると言えます。

本要件は比較的ボリュームの多いビジネスレポートであり、以下のような特性があるため、テンプレート形式を取りにくいと考えました。

• ページ数は不定
  • 長文は改ページして複数ページをまたぐ
• グラフ、表が含まれる

レイアウト方式

独自方式

このとき、どのようにレイアウトをPDF化するか、という問題がありますが、
PDF生成エンジン・ライブラリによっては、独自のレイアウト指定が必要なものがあります。

以下はPDF生成ライブラリpdfkit の例です。
テキストだけなら良いですが、表やグラフをこれで描画するのは骨が折れそうです。

pdfkitの例

const PDFDocument = require('pdfkit');

// Create a document
const doc = new PDFDocument;

// Pipe its output somewhere, like to a file or HTTP response
// See below for browser usage
doc.pipe(fs.createWriteStream('output.pdf'));

// Embed a font, set the font size, and render some text
doc.font('fonts/PalatinoBold.ttf')
   .fontSize(25)
   .text('Some text with an embedded font!', 100, 100);

// Add an image, constrain it to a given size, and center it vertically and horizontally
doc.image('path/to/image.png', {
   fit: [250, 300],
   align: 'center',
   valign: 'center'
});

HTMLでレイアウト

独自レイアウト方法が大変なので、
慣れたHTML+CSSでレイアウト指定が可能なものがありますが、
カスタムCSSが利用しづらいなどの注意点ががあるようです。

bpampuch/pdfmake

ブラウザの印刷機能でPDFレンダリング

ChromeやFirefox, Safariなど人気のあるモダンブラウザでは
印刷機能でPDFとして保存する機能を備えており、
そのレンダリング性能も信頼できると言って良いでしょう。

Mediaクエリを利用して印刷用CSSを定義し、
印刷する際のコンテンツサイズ指定、不要な画面サイドのナビやボタン類を非表示にするなどの制御が可能です。

フォント

PDF生成エンジン/ライブラリによってはデフォルトで日本語フォントを扱えないものが多いようです。
pdfkit, pdfmake(内部でpdfkitを利用)などはフォント埋め込みのための事前処理や設定が必要なようです。

特に、クライアントサイドでPDFを生成する場合は埋め込み用フォントを事前生成するという方法以外に、
Domとして日本語表示したイメージをあえて画像化してPDFに埋め込む、という方法もあります。

日本語コンテンツのボリュームによっては、多くの画像が埋め込まれるため、(フォント埋め込みの場合よりも)PDFのサイズは大きくなるかもしれません。

改ページ

複数ページにまたがるPDFの場合は改ページ位置を制御したいかもしれません。
PDF生成エンジン、ライブラリを利用する場合は、そのエンジンの改ページ制御方法に倣う必要があります。

ブラウザの印刷機能でPDFを生成する場合もMediaクエリで改ページの制御が可能です。

一方、フォントの問題のためにコンテンツを画像化してPDFに貼り付けている場合は改ページ制御が煩わしいかもしれません。

その他のデザイン・体裁のコントロール

特に、ブラウザの印刷機能を利用してPDFファイルを作成する場合、
クライアントユーザの設定によって生成されるPDFが異なるため、
デザイン・体裁的にコントロール、画一化することは難しいのが現状です。

• 用紙サイズ、向き、マージン
• 背景画像の有無
• ヘッダ・フッタの有無
  • URL, ページタイトル, 作成日

主要なモダンブラウザのデフォルトで利用した際に
文章の中身が読めれば良く、ヘッダ・フッタなどにはこだわらなくて良い、
という今回の要件では許容できると判断しました。

処理の負荷 (サーバサイド/クライアントサイド)

不特定多数のユーザが利用するシステムであり、
サーバ負荷を抑えたいため、可能であればクライアント側でPDFを生成したいと考えました。

デバッグのしやすさ

ブラウザの印刷機能を利用する場合は、デバッグの際に、印刷用CSSと画面表示用CSSを合わせて置けばレイアウト確認は楽々ですね。
ブラウザのデベロッパーツールも活用できるので、ルーラを表示したり、画面を見ながら微調整を試すことも容易です。

PDF生成エンジン/ライブラリの場合はデバッグは大変かも。

Vue.js での実装例

<template>
  <div class="sheets">
    <div>
      <el-button type="primary" @click="handlePrint">印刷</el-button>
      ※PDFで保存したい場合は印刷ダイアログで「PDF保存」を指定してください
    </div>
    <div class="sheet">
      <h2>帳票サンプル</h2>
      <h3>テーブルを印刷する</h3>
      <el-table :data="list" border fit>
        <el-table-column label="ID" prop="id" align="center" width="80px">
          <template slot-scope="scope">
            <span>{{ scope.row.id }}</span>
          </template>
        </el-table-column>
        <el-table-column label="Title" min-width="150px">
          <template slot-scope="{row}">
            <span>{{ row.title }}</span>
          </template>
        </el-table-column>
        <el-table-column label="Author" width="110px" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.author }}</span>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="sheet">
      <h3>改ページのテスト</h3>
      2ページ目
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: null
    }
  },
  created() {
    this.getList()
  },
  mounted() {
    this.fetchData()
  },
  methods: {
    getList() {
      // APIからデータ取得する想定
      this.list = [
        { id: 1, author: 'John Due', title: 'Hello, world' },
        { id: 2, author: '太郎', title: 'あいうえお かきくけこ' }
      ]
    },
    fetchData() {
      document.title = 'タイトルをいい感じに設定する'
      setTimeout(() => {
        this.$nextTick(() => {
          this.handlePrint()
        })
      })
    },
    handlePrint() {
      window.print()
    }
  }
}
</script>

<style lang="scss" scoped>
.sheet {
  page-break-after: always;
}

/* hide in print */
@media print {
  .sheets > :not(.sheet) {
    display: none;
  }
}

/* for preview */
@media screen {
  /* mm単位で指定しているけど、vueコンポ側はpx単位なので、無理にmmにしなくてもいいかも。解像度の違いでハマるかも */
  .sheet {
    width: 200mm;
    min-height: 296mm; /* 設定しなくてもいいかも。あまり印刷画面に似せすぎると、些細な違いがバグに見えてしまう */
    margin: 5mm;
    padding: 5mm;
    background: white;
    box-shadow: 0 .5mm 2mm rgba(0,0,0,.3);
  }
}
</style>
<style lang="scss">
/* for preview */
@media screen {
  BODY {
    background: #eee;
  }
}
</style>

Vueで実装した帳票プレビュー画面

Webシステムで帳票印刷機能を実行すると、プレビュー画面を表示するようにしています。
画面上部にある「印刷」ボタンは、メディアクエリにて画面表示の場合のみボタン表示して、印刷時には非表示にしています。

あえて、印刷プレビューっぽく見えるようにグレー背景、縦ページ、ドロップシャドウなどを設定していますが、ブラウザの印刷ダイアログでもプレビュー表示されるので、無くて良いかも。

ブラウザの印刷ダイアログ

Chromeの印刷ダイアログの例。
デフォルトではWebページタイトルがPDFファイル名になるので、印刷直前にWebページタイトルを切り替えるように実装しておきます。

参考

• JavaScript - 【Jｓ】特定の部分を印刷させるには?｜teratail
• https://jsfiddle.net/96vLc1bm/4/
• そろそろ真面目に、HTMLで帳票を描く話をしようか - Qiita

はじめに

初めまして、@kashiwagi_wataruと申します。

プログラミングを初めて間もない頃って成果物を誰かに使ってもらうことが少なくてモチベーションの意地が結構難しいと思うんですよね。
なんか初心者の人でも誰かに使ってもらえるようなアプリを開発できる記事をかけないかなぁと考えてみました！
そこで思いついたのがコピペでできる。テトリスを作って遊んでもらお！と言う開発から公開まで一連の流れを体験できる記事です。

追記：OUTPUTの鬼となるため、初めてqiitaの記事を書かせていただくことになりました。
乱文、乱コードは寒い日の夜中に子供にプレゼントを届けるサンタのような目でみていただければ幸いです

この記事の対象とする人

• プログラミングを初めてまもない人
• サーバーサイドが苦手な人
• 自分が作ったものを誰かに使ってみてもらいたい人
• 今この記事を見ている人

やりたいことメモ

大人気ゲームテトリスを作る
スマホでも操作可能。
ホーム画面に追加をするとオフラインでも使えようにする
消した行をカウントする。
デプロイとか難しいことはしたくない。AWSで間違ってお金がかかったりするから（うっかり課金経験者ですw）

（AWSでお金がうっかり課金されちゃいガチな人はこちらへ笑 https://qiita.com/Yuji-Ishibashi/items/bb1c0042fd16a9350c5a ）

目次

大きく分けて3つに分けることができます。

1. PWAの設定をする
2. テトリスを作る
3. githubで公開する

一応なぞってコピペしていくと完成するようになっていますが、
興味あるところまで飛ばしてくださっても全然大丈夫です！

PWAとは？

みなさん、PWAってご存知ですか。
Googleが言い出した、今注目されつつある仕組みで、
これを使えばwebサイトのUIUXをよりよくできるだろうと言われているものになります。

https://www.seohacks.net/basic/terms/pwa/

WAとは、「Progressive Web Apps」の略称で、モバイル向けWebサイトをスマートフォン向けアプリのように使えるようにする仕組みです。
PWAはそれ自体が何か特殊な一つの技術、というわけではありません。レスポンシブデザイン、HTTPS化など、Googleが定める要素を備えたWebサイトであり、オフラインやプッシュ通知に対応するためのブラウザAPI(Service Workerなど)を利用しているWebサイトをPWAと呼びます。
PWAを実装することでプッシュ通知やホーム画面へのアイコン追加など、アプリの特徴的な機能をWebサイトに持たせる事ができます。これにより、UX向上やユーザーエンゲージメントの改善にもつながるとして注目されています。

つまり、webアプリケーションをあたかもスマホアプリのように使えるようになるとのことです！
「ホーム画面に追加」をするとキャッシュさえ残っていればオフラインでもそのwebページが利用可能になるとのこと。。

PWAの導入

PWAの導入はすごく簡単です。

必要なファイルは下記の3つです。

• index.html
• service_worker.js
• manifest.json

圧倒的少なさ！
これだけでゲームが作れるなんて

では一つずつ紹介していきますね

index.html

このファイルは一番最初に表示されるページとなります。
スマホでもたくさん使って欲しいのでviewportの記述を忘れずに、
とりあえずは下記のような感じでいいでしょう。

index.html

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="manifest" href="manifest.json">
    <title>Tetris_app</title>
  </head>
  <body>
　　<script>
      if ('serviceWorker' in navigator) {
        navigator.serviceWorker.register('service_worker.js').then(function(registration) {
          console.log('ServiceWorker registration successful with scope: ', registration.scope);
        }).catch(function(err) {
          console.log('ServiceWorker registration failed: ', err);
        });
      }
     </script>
   </body>
</html>

service_worker.js

PWAにとってこのファイルはとても大事です。
push通知とかアプリチックなことを実行するときに重要なservice_workerの登録をしてくれます。

service_worker.js

// キャッシュファイルの指定
var CACHE_NAME = 'TetrisApp-caches';
var urlsToCache = [
    '/kashiwagi-wataru.github.io/',
];

// service workerの記述 
    if ('serviceWorker' in navigator) {
    navigator.serviceWorker.register('service_worker.js').then(function(registration) {
        console.log('ServiceWorker registration successful with scope: ', registration.scope);
    }).catch(function(err) {
        console.log('ServiceWorker registration failed: ', err);
    });
    }
// インストール処理
self.addEventListener('install', function(event) {
    event.waitUntil(
        caches
            .open(CACHE_NAME)
            .then(function(cache) {
                return cache.addAll(urlsToCache);
            })
    );
});

// キャッシュロードの処理
self.addEventListener('fetch', function(event) {
    event.respondWith(
        caches
            .match(event.request)
            .then(function(response) {
                return response ? response : fetch(event.request);
            })
    );
});

manifest.json

これは、スマホでアプリみたいに利用できるようにするためのファイルです。
下記のような感じでいいでしょう
ポイントは"display": "standalone"です。
standaloneにすることでスマホでアプリのように使用することができます。
もっと拘りたい方は、
https://developer.mozilla.org/ja/docs/Web/Manifest
をみて改造してみてください
アイコンとかを指定できたりもします。

manifest.json

{
    "short_name": "Tetris",
    "name": "Tetris_App",
    "display": "standalone",
    "start_url": "index.html"
}

これで最低限必要なファイルは完成です！（簡単！）

テトリスを作る

今からテトリスを作っていきます。
テトリスといえば知らない人はいないあのゲームのことですよね。
ゲームをつくるといっても使うのは、HTML CSS Javascriptの3つしか使いません。
先ほど作った3つのファイル＋cssファイル,jsファイルを作りましょう。
下記のファイルは全て同じ階層に格納されます。

• index.html（このファイルに上書きしていきます）
• service_worker.js（これは触らない）
• manifest.json（これも触らない）

--下記2つを追加--

• style.css
• app.js

こんなのを作れればいいなぁと思ってます。

テトリスのコードはすごく長くなるのでザーッとみてコピペでいいですw
追々細かい説明を書いていきます笑(2020年になってから笑)

テトリスのコードは下記の通りです。

index.html

先ほど作ったindex.htmlに追記（上書き）していきましょう

index.html

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" href="style.css">
    <link rel="manifest" href="manifest.json">
    <title>PWA Sample</title>
  </head>
  <body>
    <div class="title-wrap">
      <h1>テトリスで遊ぼう！</h1>
    </div>
    <div class="wrapper-container">
      <div class="tetris-container">
        <div class="tetris-main">
          <canvas id="stage" width="250px" height="500px" style="background-color:black;">
          </canvas>
        </div>
        <div class="tetris-option">
          <span class="tetris-panel-container">
            <p>Next</p>
              <canvas id="next" width="150px" height="150px" style="background-color:black;">
              </canvas>
            <p>LINES:<span id="lines">0</span></p>
            <p><span id="message"></span></p>
            <div class="tetris-panel-container-padding">
            <table class="tetris-button-panel">
              <tr>
                <td></td>
                <td id="tetris-rotate-button" class="tetris-button">↻</td>
                <td></td>
              </tr>
              <tr>
                <td id="tetris-move-left-button"class="tetris-button">←</td>
                <td id="tetris-fall-button"class="tetris-button">↓</td>
                <td id="tetris-move-right-button"class="tetris-button">→</td>
              </tr>
            </table>
            </div>
          </span>
        </div>
      </div>
    </div>
    <script src="app.js"></script>
    <script>
      var tetris = new Tetris();
      tetris.startGame();
    </script>
  </body>
</html>

style.css

style.css

html {
    touch-action: manipulation;
}



h1 {
    margin:  0;                 
    position:  relative;        
    font-size: 40px;            
    text-align:  center;        
    margin:  20px 0;            
    display: inline-block;     
}

p {
    margin:  0;                 
    line-height: 2;             
}

 .title1-wrap {
    padding-bottom:  20px;      
    text-align:  center;        
}


.wrapper-container {
    display: inline-block;
}

.tetris-container {
    height:530px;
    display: flex;
    flex-direction: row;
    margin: 10px;
    background-color: #333333;
}

.tetris-panel-contaizner {
    display: flex;
    padding-left: 10px;
    padding-right: 10px;
    flex-direction: column;
    color: white;
    background-color: #333333;
}

.tetris-panel-container-padding {
    flex-grow: 1;
}

.tetris-panel-container p {

   margin-left:20px;
   padding: 10px 0;
   font-family: sans-serif;
   font-size: 20px;
   color: #ffffff;
}

.tetris-button-panel {
    border-style: none;
    width: 100%;
    padding-top:100px;
}

.tetris-button {
    padding-top: 10px;
    padding-bottom: 10px;
    text-align: center;
    background: #444444;
    box-shadow: inset 0 2px 0 rgba(255,255,255,0.2), inset 0 -2px 0 rgba(0, 0, 0, 0.05), 0 2px 6px rgba(0, 0, 0, .15);
    border-radius: 4px;
}

.tetris-button:active {

    box-shadow: 0 0 2px rgba(0, 0, 0, 0.30);
}

app.js

app.js

class Tetris {
    constructor() {
        this.stageWidth = 10;
        this.stageHeight = 20;
        this.stageCanvas = document.getElementById("stage");
        this.nextCanvas = document.getElementById("next");
        let cellWidth = this.stageCanvas.width / this.stageWidth;
        let cellHeight = this.stageCanvas.height / this.stageHeight;
        this.cellSize = cellWidth < cellHeight ? cellWidth : cellHeight;
        this.stageLeftPadding = (this.stageCanvas.width - this.cellSize * this.stageWidth) / 2;
        this.stageTopPadding = (this.stageCanvas.height - this.cellSize * this.stageHeight) ;
        this.blocks = this.createBlocks();
        this.deletedLines = 0;

        window.onkeydown = (e) => {
            if (e.keyCode === 37) {
                this.moveLeft();
            } else if (e.keyCode === 38) {
                this.rotate();
            } else if (e.keyCode === 39) {
                this.moveRight();
            } else if (e.keyCode === 40) {
                this.fall();
            }
        }

        document.getElementById("tetris-move-left-button").onmousedown = (e) => {
            this.moveLeft();
        }
        document.getElementById("tetris-rotate-button").onmousedown = (e) => {
            this.rotate();
        }
        document.getElementById("tetris-move-right-button").onmousedown = (e) => {
            this.moveRight();
        }
        document.getElementById("tetris-fall-button").onmousedown = (e) => {
            this.fall();
        }
    }

    createBlocks() {
        let blocks = [
            {
                shape: [[[-1, 0], [0, 0], [1, 0], [2, 0]],
                        [[0, -1], [0, 0], [0, 1], [0, 2]],
                        [[-1, 0], [0, 0], [1, 0], [2, 0]],
                        [[0, -1], [0, 0], [0, 1], [0, 2]]],
                color: "rgb(0, 255, 255)",
                highlight: "rgb(255, 255, 255)",
                shadow: "rgb(0, 128, 128)"
            },
            {
                shape: [[[0, 0], [1, 0], [0, 1], [1, 1]],
                        [[0, 0], [1, 0], [0, 1], [1, 1]],
                        [[0, 0], [1, 0], [0, 1], [1, 1]],
                        [[0, 0], [1, 0], [0, 1], [1, 1]]],
                color: "rgb(255, 255, 0)",
                highlight: "rgb(255, 255, 255)",
                shadow: "rgb(128, 128, 0)"
            },
            {
                shape: [[[0, 0], [1, 0], [-1, 1], [0, 1]],
                        [[-1, -1], [-1, 0], [0, 0], [0, 1]],
                        [[0, 0], [1, 0], [-1, 1], [0, 1]],
                        [[-1, -1], [-1, 0], [0, 0], [0, 1]]],
                color: "rgb(0, 255, 0)",
                highlight: "rgb(255, 255, 255)",
                shadow: "rgb(0, 128, 0)"
            },
            {
                shape: [[[-1, 0], [0, 0], [0, 1], [1, 1]],
                        [[0, -1], [-1, 0], [0, 0], [-1, 1]],
                        [[-1, 0], [0, 0], [0, 1], [1, 1]],
                        [[0, -1], [-1, 0], [0, 0], [-1, 1]]],
                color: "rgb(255, 0, 0)",
                highlight: "rgb(255, 255, 255)",
                shadow: "rgb(128, 0, 0)"
            },
            {
                shape: [[[-1, -1], [-1, 0], [0, 0], [1, 0]],
                        [[0, -1], [1, -1], [0, 0], [0, 1]],
                        [[-1, 0], [0, 0], [1, 0], [1, 1]],
                        [[0, -1], [0, 0], [-1, 1], [0, 1]]],
                color: "rgb(0, 0, 255)",
                highlight: "rgb(255, 255, 255)",
                shadow: "rgb(0, 0, 128)"
            },
            {
                shape: [[[1, -1], [-1, 0], [0, 0], [1, 0]],
                        [[0, -1], [0, 0], [0, 1], [1, 1]],
                        [[-1, 0], [0, 0], [1, 0], [-1, 1]],
                        [[-1, -1], [0, -1], [0, 0], [0, 1]]],
                color: "rgb(255, 165, 0)",
                highlight: "rgb(255, 255, 255)",
                shadow: "rgb(128, 82, 0)"
            },
            {
                shape: [[[0, -1], [-1, 0], [0, 0], [1, 0]],
                        [[0, -1], [0, 0], [1, 0], [0, 1]],
                        [[-1, 0], [0, 0], [1, 0], [0, 1]],
                        [[0, -1], [-1, 0], [0, 0], [0, 1]]],
                color: "rgb(255, 0, 255)",
                highlight: "rgb(255, 255, 255)",１１１１１１１１１１１１
                shadow: "rgb(128, 0, 128)"
            }
        ];
        return blocks;
    }

    drawBlock(x, y, type, angle, canvas) {
        let context = canvas.getContext("2d");
        let block = this.blocks[type];
        for (let i = 0; i < block.shape[angle].length; i++) {
            this.drawCell(context,
                     x + (block.shape[angle][i][0] * this.cellSize),
                     y + (block.shape[angle][i][1] * this.cellSize),
                     this.cellSize,
                     type);
        }
    }

    drawCell(context, cellX, cellY, cellSize, type) {
        let block = this.blocks[type];
        let adjustedX = cellX + 0.5;
        let adjustedY = cellY + 0.5;
        let adjustedSize = cellSize - 1;
        context.fillStyle = block.color;
        context.fillRect(adjustedX, adjustedY, adjustedSize, adjustedSize);
        context.strokeStyle = block.highlight;
        context.beginPath();
        context.moveTo(adjustedX, adjustedY + adjustedSize);
        context.lineTo(adjustedX, adjustedY);
        context.lineTo(adjustedX + adjustedSize, adjustedY);
        context.stroke();
        context.strokeStyle = block.shadow;
        context.beginPath();
        context.moveTo(adjustedX, adjustedY + adjustedSize);
        context.lineTo(adjustedX + adjustedSize, adjustedY + adjustedSize);
        context.lineTo(adjustedX + adjustedSize, adjustedY);
        context.stroke();
    }

    startGame() {
        let virtualStage = new Array(this.stageWidth);
        for (let i = 0; i < this.stageWidth; i++) {
            virtualStage[i] = new Array(this.stageHeight).fill(null);
        }
        this.virtualStage = virtualStage;
        this.currentBlock = null;
        this.nextBlock = this.getRandomBlock();
        this.mainLoop();
    }

    mainLoop() {
        if (this.currentBlock == null) {
            if (!this.createNewBlock()) {
                return;
            }
        } else {
            this.fallBlock();
        }
        this.drawStage();
        if (this.currentBlock != null) {
            this.drawBlock(this.stageLeftPadding + this.blockX * this.cellSize,
                this.stageTopPadding + this.blockY * this.cellSize,
                this.currentBlock, this.blockAngle, this.stageCanvas);
        }
        setTimeout(this.mainLoop.bind(this), 500);
    }

    createNewBlock() {
        this.currentBlock = this.nextBlock;
        this.nextBlock = this.getRandomBlock();
        this.blockX = Math.floor(this.stageWidth / 2 - 2);
        this.blockY = 0;
        this.blockAngle = 0;
        this.drawNextBlock();
        if (!this.checkBlockMove(this.blockX, this.blockY, this.currentBlock, this.blockAngle)) {
            let messageElem = document.getElementById("message");
            messageElem.innerText = "GAME OVER";
            return false;
        }
        return true;
    }

    drawNextBlock() {
        this.clear(this.nextCanvas);
        this.drawBlock(this.cellSize * 2, this.cellSize, this.nextBlock,
            0, this.nextCanvas);
    }

    getRandomBlock() {
        return  Math.floor(Math.random() * 7);
    }

    fallBlock() {
        if (this.checkBlockMove(this.blockX, this.blockY + 1, this.currentBlock, this.blockAngle)) {
            this.blockY++;
        } else {
            this.fixBlock(this.blockX, this.blockY, this.currentBlock, this.blockAngle);
            this.currentBlock = null;
        }
    }

    checkBlockMove(x, y, type, angle) {
        for (let i = 0; i < this.blocks[type].shape[angle].length; i++) {
            let cellX = x + this.blocks[type].shape[angle][i][0];
            let cellY = y + this.blocks[type].shape[angle][i][1];
            if (cellX < 0 || cellX > this.stageWidth - 1) {
                return false;
            }
            if (cellY > this.stageHeight - 1) {
                return false;
            }
            if (this.virtualStage[cellX][cellY] != null) {
                return false;
            }
        }
        return true;
    }

    fixBlock(x, y, type, angle) {
        for (let i = 0; i < this.blocks[type].shape[angle].length; i++) {
            let cellX = x + this.blocks[type].shape[angle][i][0];
            let cellY = y + this.blocks[type].shape[angle][i][1];
            if (cellY >= 0) {
                this.virtualStage[cellX][cellY] = type;
            }
        }
        for (let y = this.stageHeight - 1; y >= 0; ) {
            let filled = true;
            for (let x = 0; x < this.stageWidth; x++) {
                if (this.virtualStage[x][y] == null) {
                    filled = false;
                    break;
                }
            }
            if (filled) {
                for (let y2 = y; y2 > 0; y2--) {
                    for (let x = 0; x < this.stageWidth; x++) {
                        this.virtualStage[x][y2] = this.virtualStage[x][y2 - 1];
                    }
                }
                for (let x = 0; x < this.stageWidth; x++) {
                    this.virtualStage[x][0] = null;
                }
            let linesElem = document.getElementById("lines");
                this.deletedLines++;
                linesElem.innerText = "" + this.deletedLines;
            } else {
                y--;
            }
        }
    }

    drawStage() {
        this.clear(this.stageCanvas);

        let context = this.stageCanvas.getContext("2d");
        for (let x = 0; x < this.virtualStage.length; x++) {
            for (let y = 0; y < this.virtualStage[x].length; y++) {
                if (this.virtualStage[x][y] != null) {
                    this.drawCell(context,
                        this.stageLeftPadding + (x * this.cellSize),
                        this.stageTopPadding + (y * this.cellSize),
                        this.cellSize,
                        this.virtualStage[x][y]);
                }
            }
        }
    }

    moveLeft() {
        if (this.checkBlockMove(this.blockX - 1, this.blockY, this.currentBlock, this.blockAngle)) {
            this.blockX--;
            this.refreshStage();
        }
    }

    moveRight() {
        if (this.checkBlockMove(this.blockX + 1, this.blockY, this.currentBlock, this.blockAngle)) {
            this.blockX++;
            this.refreshStage();
        }
    }

    rotate() {
        let newAngle;
        if (this.blockAngle < 3) {
            newAngle = this.blockAngle + 1;
        } else {
            newAngle = 0;
        }
        if (this.checkBlockMove(this.blockX, this.blockY, this.currentBlock, newAngle)) {
            this.blockAngle = newAngle;
            this.refreshStage();
        }
    }

    fall() {
        while (this.checkBlockMove(this.blockX, this.blockY + 1, this.currentBlock, this.blockAngle)) {
            this.blockY++;
            this.refreshStage();
        }
    }

    refreshStage() {
      this.clear(this.stageCanvas);
      this.drawStage();
      this.drawBlock(this.stageLeftPadding + this.blockX * this.cellSize,
                this.stageTopPadding + this.blockY * this.cellSize,
                this.currentBlock, this.blockAngle, this.stageCanvas);
    }

    clear(canvas) {
        let context = canvas.getContext("2d");
        context.fillStyle = "rgb(0, 0, 0)";
        context.fillRect(0, 0, canvas.width, canvas.height);
    }
}

githubで公開する！！

では作成したファイルをサーバーに公開して終了となります。
サーバーはhttpsが利用できるAWSやherokuなどで頑張って公開しようかと思っていたところ、
githubだけで簡単にwebページを公開する方法があるそうです。

しかもgithubの公式さんが言うには、かなり簡単とのこと。
これはやるしかないですね

github公式が割とわかりやすいのでおいておきますね。
https://pages.github.com/

github.ioと言うものらしいです。

github.ioのメリットデメリット

メリット

• 簡単にwebページを公開できる
• 無料
• 更新したい場合はリポジトリにpushするだけ

デメリット

• ソースコードが公開される
• サーバー依存のjsとかは使えない

今回は...

• ただ自分で作ったwebページを公開するだけ（特にセキリュティを気にするものはない）
• jsはサーバーに依存しない

と言うことで最適な方法と言えるのではないのでしょうか。

方法

やり方は簡単で、
リポジトリ名を
username.github.io
にするだけでいいらしいです。すごい。

ではやってみましょう。(本当にほぼ公式のやり方をなぞっていくだけですw）

① まずはリポジトリを作ります。
命名規則はusername.github.io　だそうです。
僕の場合は下記のようになります。

② 次に下記のコマンドを実行します。デスクトップとかでね

クローンして

git clone https://github.com/username/username.github.io

移動してサンプルテキストを入れて(index.htmlを作って)

cd username.github.io

echo "Hello World" > index.html

git add --all

git commit -m "Initial commit"

git push -u origin master

そして https://username.github.io にアクセスすればHelloWorldと表示されるはず！

なぜか404と怒られてしまいました。。。

原因はよくわかりませんw
ですが作ったリポジトリのsettings にある

ここにリンクが載っていました。
リンクの構造がgithub公式の構造と少し違いますが、とりあえず踏んでみましょう。

表示されました！
（反映されるまで、少し時間が（３０秒くらい)かかるかもしれないので焦らずに待ちましょう）

これで作ったゲームを公開する準備はできました。

このリポジトリにテトリスのファイルをぶち込んで完成となります。

動作確認

最終的なファイルは
- index.html
- style.css
- app.js
- manifest.json
- service_worker.js

の５つになると思います。

githubのリポジトリに全てのファイルが揃ったらhttps://username.github.ioにアクセスしてみましょう。
PC、スマホ両方でアクセスすると良いと思います。

こんな感じでChromeとは別のタブで開けていたらOKです！
オフラインでの動作を確認したいので一度タブを閉じで機内モードにしてから開いてみてください
機内モードでもテトリスで遊べちゃうと思います！
恐るべしPWA。。。

こんな感じで、テトリスをスマホアプリのように扱えるようになりました。
リンクを友達に教えると友達のスマホでも遊べるようになるのでぜひ友達に送りつけてみてください。

参照記事

結構コピペしてますw
https://paiza.hatenablog.com/entry/2018/08/29/PWA%E5%85%A5%E9%96%80%EF%BC%81JavaScript%E3%81%A7%E7%B0%A1%E5%8D%98%E3%81%AB%E9%AB%98%E9%80%9F%E5%8C%96%EF%BC%86%E3%82%AA%E3%83%95%E3%83%A9%E3%82%A4%E3%83%B3%E5%AF%BE%E5%BF%9C%E3%81%AEWeb%E3%82%B5

http://kmaebashi.com/programmer/tetris/index.html

https://www.webprofessional.jp/what-is-the-attention-project-pwa-by-google/

https://www.seohacks.net/basic/terms/pwa/