マイブログ リスト

2019年11月21日木曜日

【JavaScript】コーディング規約を選定した話


初めまして、MtFormです。
今回はVue.jsのプロジェクトのコーディング規約を定めるにあたっていろいろ迷ったお話です。


コーディング規約とは（ざっくり概念）


プログラムって、同じ動作をする場合でも異なる書き方ができますよね。
例えば、
let a,b,c;
と書くか、
let a;
let b;
let c;
と書くか。

このあたりは個人の好みで書き方が分かれてしまうので、複数人でコードを書くとバラバラの記法になって、バグの原因になったりします。
そこで、コードの書き方を統一するためのルールを定めることにしました、これがコーディング規約です。




メジャーなJSコーディング規約


コーディング規約を1から全部決めるのは大変なので、大手の企業が公開しているコーディング規約を使わせていただきます。（場合によってはカスタマイズします）
今回は３つの候補に絞りました。

JavaScript Standard Style


・2015年に提唱された。ESLintのサブセットである（カスタマイズ済のESLint）
・行末のセミコロン禁止のため、人によっては受け入れられない。
※セミコロンを必須とした「JavaScript Semi-Standard Style」もある。

Google JavaScript Style Guide

・ESLintの候補として表示されるほど標準的なスタイル
・AngularやGWTなどを開発しているGoogle製

Airbnb JavaScript Style Guide

・ESLintで候補として表示されるほど標準的なスタイル
・GitHub上で最も人気のあるスタイル（starが90kで第1位、第2位は22.7k：2019年11月現在）
・オープンな議論を通じてスタイルが決定している。
・スタイルについてパフォーマンスに関するエビデンスがある。



選ばれたのはAirbnbでした


どのスタイルガイドもESLint（JSの構文チェッカー）に対応しているのですが、パフォーマンスに対するエビデンスがあるということで、Airbnb JavaScript Style Guide を利用することにしました。

今回のプロジェクトはVue-CLIで作られていたので、導入は次のコマンドでOK
$ yarn add @vue/eslint-config-airbnb -dev
これでESLintの設定がvue.jsとAirbnb JavaScript Style Guideに対応してくれました。

構文チェックは次のコマンド
$ yarn lint --no-fix
試してみると50個くらいエラーが検出されて焦りましたが、--no-fixオプションを外して実行するとlint側で勝手にコードを修正してくれるのでエラーは5個くらいまで減り、
残りも日本語のリファレンスを見ながら修正できました。



苦戦したポイント

個人的に引っかかった部分は次の2点。


comma-dangle

（https://mitsuruog.github.io/javascript-style-guide/#commas--dangling）

 配列の末尾には、カンマが必須らしい！
末尾カンマはJSONだとエラーになるから気持ち悪いなあと思いつつリファレンスを読んでみると、
・末尾コンマはbabelが自動的に消してくれる
・gitの差分がきれいになる
とのこと。
確かに、差分はこっちのほうが断然わかりやすい！
スタイルガイドはgit管理の部分まで視野に入ってるんですね。

BAD
const array = [
  apple,
  banana,
  chocolate
];

GOOD
const array = [
  apple,
  banana,
  chocolate,
];


operator-linebreak

（https://mitsuruog.github.io/javascript-style-guide/#variables--linebreak）
代入で=の前後に改行を入れてはいけない。
でも、そこを直したらmax-lenの100文字に引っかかってエラーになるんだけど……。
という板挟みの状況に陥ったわけですが、リファレンスにはちゃんと書いてありました。

そういう場合は、「値を丸括弧で囲むこと」だそうです。

BAD
const text =
  'superLongText';

GOOD
const text = (
  'superLongText'
);


結論

Airbnb JavaScript Style Guideは、リファレンスが丁寧！！
以上です、ありがとうございました。

参考サイト


・JavaScriptのスタイルガイドまとめ(おすすめ4選)
・JavaScript Standard Styleのススメ
・セミコロンは省略？人気スタイルガイドに学ぶJavaScriptのコーディング規則
・JavaScriptの有名なコーディングスタンダードまとめ
・ESLintをAtomに導入し、Reactの構文にも対応したAirbnbのJSスタイルガイドを使う


投稿者 時刻: 0 件のコメント:

2019年6月13日木曜日

【facebook】Messengerプラットフォーム


ある日の出来事…
*:.。..。.:+·ﾟ·✽:.。..。.:+·ﾟ·✽:.。..。.:+·ﾟ·✽:.。..。.:+·ﾟ·*:.。..。.:+

インスタントゲームを作ったはいいが、ゲームのリテンションが低すぎてつらいよお…あれ、facebookさんがコッチを見ている…(´；ω；`)ｳｯ

(face・ω・book)つ …ｽｯ「再エンゲージメントのためにゲームボットを設定する」

(´；ω；`)！！

*:.。..。.:+·ﾟ·✽:.。..。.:+·ﾟ·✽:.。..。.:+·ﾟ·✽:.。..。.:+·ﾟ·*:.。..。.:+

 こんにちは👀

月島ファクトリープログラマーのmotchyと申します👶

冒頭の経緯から、インスタントゲームでボットを使用したいと考え、facebookのMessengerプラットフォームを使用しました。

今回は、インスタントゲームでMessengerプラットフォームを使用するまでの過程について投稿させていただきます。
以下、3つのステップでご説明します。

  1. Facebookページを作成しよう！
  2. Webhookを設定しよう！
  3. Messengerプラットフォームを使えるように申請しよう！

1.Facebookページを作成しよう！
ゲームボットを使用するには、インスタントゲームと連動するFacebookページが必要になります。なので、まずはゲーム用のページを作成しましょう😃

2.Webhookを設定しよう！
ゲームとFacebookページを連動させることによって、メッセンジャーを使用してメッセージの送受信を行った際、バックエンドにHTTPコールが送信されます。
サーバーのエンドポイントをページのイベントと紐づけるために、Webhookの設定をします。
facebookのチュートリアルは正直わかりにくかったので、わたしは下記サイトを参考にし（て、インフラの方に設定してもらい）ました。

3.Messengerプラットフォームを使えるように申請しよう！
Messengerプラットフォームを使用するには、pages_messagingというSend APIの承認が必要になります。アプリダッシュボードの「Messengerのアプリレビュー」から簡単に申請することができます。

上記の手順を行うと、プレイヤーがインスタントゲームを終了するたびに、「2.Webhookを設定しよう！」で用意したサーバーにPOSTリクエストが飛んできます。
このPOSTリクエストから、プレイヤーにメッセージを送信するためのPSIDを含んだ下記のユーザー情報が取得できます。

これでユーザーにゲームやれやれってメッセージを送り放題だ👿👿👿
わーい👿👿👿

…は、facebookさんは許さない。もうひと手間。

設定は3ステップで終了ですが、ボットを受け取るか受け取らないかはユーザー次第です。

2019年1月以降の新規ユーザーについては、ユーザーボットがデフォルトで無効に設定されるようになりました。
そのため、インスタントゲームに、ゲームボットを承認してくれるかユーザーに問う処理を実装してください。


★最後に
*:.。..。.:+·ﾟ·✽:.。..。.:+·ﾟ·✽:.。..。.:+·ﾟ·✽:.。..。.:+·ﾟ·*:.。..。.:+

Messengerプラットフォームの対応については、設定のフェーズでかなり時間がかかった印象だったことから今回の投稿内容に至りました。

ただ、思い返して書き起こしてみたはいいものの、そんなに難しいことしてないので、ちょっと悔しいです。（facebookのチュートリアルきらいだ…(´・ω・`)ﾎﾞｿ。）

また何か新しい機能を使用した際には、ブログ更新したいと思います。

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

*:.。..。.:+·ﾟ·✽:.。..。.:+·ﾟ·✽:.。..。.:+·ﾟ·✽:.。..。.:+·ﾟ·*:.。..。.:+


投稿者 時刻: 0 件のコメント:
登録: 投稿 (Atom)