第７回hogehoge会 -VS Live Shareでコードレビュー会！with ブレイブスタジオ-

エンジニアチームをメインに技術周りの知見を共有する会、その名もhogehoge会！！

４月から順調に開催を続け、今回が第７回目となりました！
第１回目は「リモートhogehoge会「リモート環境での困ったことの共有＆俺スゲー環境自慢」」
第２回目は「第２回 hogehoge会の実施 -アプリを作ってみよう-」
第４回目は「第4回hogehoge会 -個人開発「川柳アプリ」の紹介-」
第５回目は「第５回hogehoge会の実施 -FizzBuzzを日本語でプログラミング、からの色々な手法へ-」
というテーマでやってきました。第6回目は近日公開です！

今回は初のコラボレーション企画！
bravesoftのグループ会社であるブレイブスタジオのエンジニア方々と合同のコードレビュー会です。

ブレイブスタジオ + bravesoftのエンジニア陣で総勢16名の参加・・・！
いつものhogehoge会は大体8名前後なので、だいぶ豪華ですね。
それではいってみましょう！

コードレビューの方法

コードレビュー会という事で、今回はVisual Studio Live Shareでコードをシェアしていきます。

Visual Studio Codeシェア
間宮さん「招待URL送ったのでみんな入ってください。あれ、１人しか入ってないですね（笑）」
赤ちゃん「あれ？プラグインインストール必要？」
シロー「あ、GitHubアカウント必要なのか」
初の試みなのでみんなログインに少々苦戦。

５分後

Visual Studio Live Code share
一同「おおおおお！！シェアできた！」
全員で共通の画面でコードを書けるようになりました。赤枠に現在シェアしている人が表示されます。
それぞれが書いている部分は各色でハイライトされるので、誰が書いているかひと目でわかります。

新しいツールで一斉に遊びはじめる皆々。

1.トップバッター：おじさんのコードをレビュー

visual studio code share
おじさん「これは朝礼の資料のために遊びで作ったコードです。」
赤ちゃん「JQueryで書くのやめてもらって良いですか（怒）」
おじさん「まあ遊びで作ったやつだから多めにみて」

おじさん朝礼コード2

おじさんの朝礼発表では、コーポレートサイトのメンバーページでChromeのコンソール画面におじさん作成コードを貼ると、上記のように「ぐしゅ！」やダイアログ表示など面白い挙動が生まれます。

コンソール画面

↑コンソール画面

おじさんのコードをみんなでながめること数分。
ここでお題は『変数の宣言「var」と「let」の使い分け』について。

スタジオさん「最近JSを勉強し初めたばかりですが、varとletの定義の仕方の違いってなんですか？」
おじさん「varは上書きできて、letはできない、と認識しています」
ゆうき「varはグローバルスコープ。letはカッコ{}の中で使うブロックスコープが作れる、ですかね」

ここでJavaScriptマスター・赤ちゃんの登場！

赤ちゃん「varは巻き上げっていって、もう一回再定義できたりします。一方、letは再定義すると文法エラーになる。また、値の書き換えはletはできて、constはできない」

シロー「こういう事だよね。

for(let i = 0; i < 9;i++) {
　console.log(i);
}
console.log(i);

for(let i = 0; i < 9;i++) {

　console.log(i);

}

console.log(i);

はできないけど

for(var i = 0; i < 9;i++) {
　console.log(i); 
}
console.log(i);

for(var i = 0; i < 9;i++) {

　console.log(i);

}

console.log(i);

はできる。グローバルなので」

おじさん「いや〜〜気持ち悪いよね。JavaScript。スコープが」
赤ちゃん「いやいやいやそれはおじさんがjsに寄り添ってないだけですよ」

2.かわさんのコードをレビュー

川さんのコード

みっちー「次はRubyのコードがみたいです！まぁRubyは10年前くらいにチョロっと書いたくらいかな」
赤ちゃん「RubyってPythonみたいな書き方でしたっけ。あんまり知らないのですけど」
かわ「誰もいかないですか？じゃあ私がいきますネ！！」
みっちー「これ何？js？」
かわ「Goです」
一同「Goか〜〜〜」
かわ「これは、昔作ったやつですね」
おじさん「typeに書いてあるのは構造体の宣言なの？」
かわ「はい。クラスみたいなものをまとめて定義しています。クラスよりは弱いです。」

かわさんのコードにみんな興味津々。

みっちー「ネストが気になった」
かわ「どこですか？ああ、ここですね！速度を優先しました」
みっちー「下記のコード、

if (isA()) {
　a();
} else {
　b();
}

if (isA()) {

　a();

} else {

　b();

}

これは、

if (!isA()) {
　b();
　return;
}
a();

if (!isA()) {

　b();

　return;

}

a();

こっちの方が良いのでは？ネストを１個減らせる」
かわ「うーん。isA()はもう上で計算結果がでているので!isA()でbooleanをもう一回計算しないといけない。その部分で効率を優先しました。今のPCの性能ではそこまで処理が遅いなどはないけど、例えば1000万人が利用するサービスとかだと考慮しないといけない」
間宮さん「元組込屋からすると、かわさんの意見はよくわかる（笑）。コンパイラレベルでいうとそこってミリsecで変わるんだよね。アセンブラだとそれなりのメモリは食うんで、どっちが早いかと言われるとかわさんの方が早いからね」
みっちー「なるほどねー。つまり、処理か、可読性を取るか、ということか」

シロー「可読性という視点でいうと、私のチームでは１スコープは１００行まで、ネストは３つまでという鉄の規制があります」
一同「鉄（笑）」
赤ちゃん「かつスクロールせずに見れたら最強！」
ゆうき「おー。僕のチームでもそういうルール作りたいな」
赤ちゃん「そういうのどんどん作っちゃって良いと思う！共同開発しやすいよう整備していく事は大事」

3.シローさんのコードをレビュー

シロー「僕が今開発に携わってるチケッティング機能の抽選の部分のソースコードです」

話題はログの残し方について

シロー「バッチ処理で途中経過の記録みたいなものをプッシュしていってるんですよ。ただプッシュする場所が関数によってまちまちになっていてどういう順番で書き込まれるのかわからないという悩みがあります」
みっちー「順番大事？」
シロー「プロセスが見えづらいかなって」
赤ちゃん「んー、実行された順に入りそうですけどね」
おじさん「ちょっとこのケースとは違うかもしれないけど、ファイルにログ出力する時にいろんな処理のログが混ざっちゃうと一連の処理が見辛いという問題があって。その時は処理自体に名前つけて、ログに入れちゃう。そうするとgrepできる」
赤ちゃん「そうですね。シローはログに関数名入れちゃえばいいんじゃない？」
シロー「ああそっか」
おじさん「ただ非同期処理とかだと、プロセスAが書いた関数なのかプロセスBが書いた関数なのか混ざる事がある。その場合はプロセスIDを入れてログを出す」
間宮さん「特に昔は全部関数名とプロセスID入れてたね、ログに。うざいなっていうくらい（笑）」
シロー「非同期処理の時とかに、プロセスIDをつけておくと、関数はプロセスAさんのものと、プロセスBさんのものなんだってわかるってことですね。それだけでも同じログを２回出しているわけでは無いんだなってわかりますね」
間宮さん「そうそう。それで、大体意図したプロセスで呼ばれて無い事が発覚して直すパターン（笑）」

4.開発環境の情報を共有

間宮さん「スタジオさんの方でもコードレビューしませんか？」
おじさん「スタジオ社長のコードみちゃう？」※ブレイブスタジオの社長はエンジニア出身
一同「笑」
スタジオさん「ところで、bravesoft内ではIDE（統合開発環境）とか決まりとかあるんですか？IDEとかテキストエディタとか」
赤ちゃん「僕の所属してるフロントチームでは、ESLint、Prettierとか、あと虹色のやつ」
みっちー「虹色？（笑）」
赤ちゃん「Rainbow Bracketsでした。個人的におすすめです。カッコごとに色をつけてくれるのでネストのチェックとかできます」
ゆうきさん「僕はアンドロイド開発ですが、エディタはatomですね」
くーちゃん「僕もatomですね」
みっちー「エディタはね〜〜〜宗教論争になってくるからね〜〜〜」
くーちゃん「もはや実装するよりもエディタの実装の方が大変みたいのありますよね・・」
赤ちゃん「Javaやってた時Eclipseの設定がめっちゃ大変だった」
間宮さん「スタジオさんは何を使ってるんですか？」
スタジオ「僕はatomを使ってますが、やはりVSCodeは多いんじゃないかなと思います」

・共有サービスについて

間宮さん「スタジオさんの方で共有のツールは何か使われてますか」
スタジオさん「今は　Backlogに残していってますね」
間宮さん「お、私たちも以前はそうでした。今はコンフルというサービスに移行したのですが、コンフルーエンス（略：コンフル）は書きやすくて、皆すごく記録を残してくれています」
スタジオさん「コンフルですか。参考にします。動画も投稿できますか？設定方法などは書くよりも動画の方がわかりやすいかなって」
間宮さん「確かに環境構築の手順などは動画の方がわかりやすいかもしれないですね。一応、投稿できるみたいですよ（※参照）」

赤ちゃん「オンラインMTGが多くなってきたと思いますが、弊社ではSnapCameraを使って顔を変えるのも最近流行ってます。おじさんのナス、ブルンブルンしてて面白い」
おじさん「シローの女装はもう見慣れすぎて何も思わなくなった」
シロー「これ社内で好評だからな。これで営業したら受注できるかもしれない」
みっちー「僕の赤ちゃんverも人気あるよ、これこれ！」
スタジオさん「面白いですね（笑）」

間宮さん「あと結構うちではオンライン飲み会や勉強会もやっていますね。こんhogehoge会も４月からずっとリモートでやっているのですが、好評で今回で７回目になります」
スタジオさん「お〜リモートでも情報共有ができる機会を設けるのはとても良いですね。社員同士のコミュニケーションにも繋がりますし。私も取り入れていきたいと思います」