こんにちは！セレス広報担当です。
今回は、セレスのエンジニアが主催する、無料勉強会の様子をお届けします！

全4回シリーズの第1回として2月28日（火）に開催しました。Youtubeの生配信だけに、アクシデント発生の“ライブ感”満載で、（特に舞台裏は）笑いありの楽しい勉強会となりました（笑）

次回、第2回に企画しているWebデザイナー向けのオンライン勉強会の告知もありますので、ぜひ最後までご覧ください！

新卒/中堅エンジニア向け無料オンライン勉強会【第1回】

全4回シリーズ、セレスのエンジニア&Webデザイナー主催、無料オンライン勉強会の第1回。今回は、新卒/中堅エンジニア向けとして、「レガシーコード」対策をテーマに、第一線で活躍する2人のエンジニアが現場で実践している部内のコーディングルールについて説明します。

2005年に創業したポイントサービスも、現在では累計会員数1,000万人を超えるポイントサイト「モッピー」として今年で18年目を迎えます。2011年に提供を開始したパソコン版およびスマートフォン版サービスの保守運用の観点から、「“負の遺産”＝レガシーコード」とどのように向き合い、いかにして同じ過ちを繰り返さずにサービスを運用していくか、新人エンジニアの方にも分かりやすくお話しています！

「レガシーコード」とは

分かりやすく言うと「時代遅れのコード」です。複数のエンジニアでチーム開発していると、開発者独自のクセや記号などコードが複雑化され、時間の経過とともに古くなり、そのまま放置され、ますます難読化していくという悪循環に陥ります。また、使用言語や周辺ツールの度重なるバージョンアップにより、作成当初は最新だったコードも時代の変化とともにレガシー化していきます。

タイムテーブル

勉強会のタイムテーブルはこちら♪

18:50～19:00　開場
19:00～19:10　オープニング
19:10～19:45　勉強会[本編]
【第1部】「レガシーから見る、守るべきコーディングのルール」
　Sさん（ポイントサイト「モッピー」サービス運用）
【第2部】「複数システム保守におけるレガシー化対策とコーディングルール」
　Yさん（社内イントラネット運用）
19:45～20:00　質疑応答、クロージング

今回の勉強会の対象者はこういう方々です！

webエンジニア
・新卒エンジニア
・実務経験2～3年の中堅エンジニア
・初めて勉強会参加します！という方
・効率重視で開発できる手法を学びたいエンジニア
・レガシーなサービスでの開発をしている方、改善したい方
・当社の採用選考を受けたいという方

登壇者のご紹介

▼ファシリテーター

（左）Oさん　／人事総務部　人事・総務グループ、（右）Yさん　／サービスエンジニアリング部　副部長

>>今回、見事なアドリブ力を発揮したYさんのインタビュー記事もございます。ぜひ、ご覧ください！

▼スピーカー

Sさん　／サービスエンジニアリング部　システムグループ　ポイント事業部　／使用言語：PHP/JS

ポイントサイト「モッピー」のバックエンドとして、システム開発、運用、保守を担当。

Yさん　／サービスエンジニアリング部　インフラグループ　リーダー　／使用言語：PHP/jQuery/Vue.js/Go

社内イントラネットのシステム開発、運用、保守を担当。コーポレートサイトの運用から、社内ユーザー管理、請求書発行システム、目標管理システムなど、約10個の社内システムを開発し、保守、運用を担当。

18：00～　会場セッティング～通しリハーサル

～左のモニターが「OBS Studio」の画面、右がZoom画面～

今回は、フリーソフト「OBS Studio」を使って、Youtubeの限定公開でライブ配信しました。24階のカフェテリアをメイン会場に、音声のハウリング防止のため、2名のスピーカーがそれぞれ別室から発表する形で、3拠点体制で行われました。

～絶賛リハーサル中！！原稿を読んでいるとは思えないほど、ものすごくナチュラルに話す2人～

19:10～　第1部「レガシーから見る、守るべきコーディングのルール」

Sさん　／サービスエンジニアリング部　システムグループ　ポイント事業部　／使用言語：PHP/JS

～左上から時計まわりに「モッピーの負債について」、「レガシーがもたらす悲劇」、「チームで決めたコーディングルールや命名規則③」、「「PSR12の主な規則④」～

「レガシーから見る、守るべきコーディングのルール」概略

・モッピーとは
・モッピーの歴史
・モッピーの負債について
・レガシーコードとは
・レガシーがもたらす悲劇
・レガシーコードを生み出さないためには
・社内（モッピー）のコーディングルール
・PSR12の主な規則①～④
・チームで決めたコーディングルールや命名規則①～④

2011年にパソコン版およびスマートフォン版サービスを提供してから12年。これまでに生まれたレガシーコードの要因を列挙し、なぜ負債となったかを説明。現状の対応策、この先レガシーコードを最小限に抑えるための対策として、開発プロセスをざっくり4つの工程に分けて、「実装」と「レビュー」の工程を深掘りして説明。「モッピー」グループ内で実践しているコーディングルールを紹介しました。

なかでも新人エンジニアの話として、「新人は先輩エンジニアのコードをマネして書くことがほとんどなので、そのコードがすでにレガシーコードだった場合は“負の連鎖”につながり、技術力低下の原因になる」という。。。このお話は、非エンジニアの広報でもとても強く印象に残りました。前途有望な新人エンジニアさんが悲劇に見舞われないよう、コーディングルールをつくってきちんと守る、ということは本当に大切なことなんですね。

～今回はハウリング防止のため別室で1人待機しているSさん。（今回）喋る人は、「孤独との闘い」になるので、余計に緊張するんだそうです～

19:25～　第2部「複数システム保守におけるレガシー化対策とコーディングルール」

Yさん　／サービスエンジニアリング部　インフラグループ　リーダー　／使用言語：PHP/jQuery/Vue.js/Go

～左上から時計まわりに「現在抱えている問題」、「PHPサポート終了問題」、「複数システムを1人で保守する上でのコーディングルール」、「レガシー化問題にどう対応するか？」～

「複数システム保守におけるレガシー化対策とコーディングルール」概略

・現在抱えている問題
・PHPサポート終了問題
・レガシー化問題にどう対応するか？
・複数システムを1人で保守する上でのコーディングルール
・コーディングルール①～④
・コーディングルールの適用状況
・誰に対してコーディングルールを作るか？
・「なぜ書いたか？」をコメントに書く

BtoC向けサービスのシステム開発とは違い、インフラチームでは、社内イントラネットのシステム開発、保守、運用を担当しています。現在、「社内ユーザー管理」や「目標管理システム」など10個近くにのぼる社内システムを一手に引き受けているYさん。5年前には最新だったPHPのコードも度重なるバージョンアップを経て、いまではレガシー化に。今回は、そうしたサポート終了問題も踏まえ、「複数システムを1人で保守する上でのコーディングルール」を設けることで将来的なシステムの健全化を図る、具体的な対策をお話していただきました。

～Yさんが待機する別室で、本番直前に動作確認をするYさんとSさん～

19:45～　質疑応答～クロージング

2人のスピーカーの発表が終わったところで、質疑応答の時間に。勉強会を通してYoutubeのコメント欄から質問を募集していましたが、最小規模のため（苦笑）社内からの質問を2つ、それぞれスピーカーのお二方に答えていただきました。

質問①：「PSRなど、コーディング規約を適用するための何かツールを使っていますか？」
質問②：「チーム開発を進めるなかでコーディングルールを設けるにあたって、メンバーと議論していますか？」

最後に人事のSさんから、現在、セレスで募集中のエンジニア職について、事業部ごとの使用言語や待遇など説明させていただきました。今回の勉強会で、少しでもご興味をお持ちいただけましたら、ぜひぜひご応募ください。お待ちしております！

>>エンジニア募集内容の詳細はこちらをご覧ください！

>>セレスには気軽に話が聞ける「カジュアル面談」もあります！
選考ではなくて「もうちょっと話を聞いてみたいな」とか「ついでに会社の内装も実際に見てみたいな」という方でも、少しでも気になったり、ご興味をお持ちいただいた方にお気軽にご応募いただけます。ぜひご利用ください！

次回「第2回勉強会」ではこんなことやります！

▼タイトル
【勉強会｜第2回】デザイナー主催「セレスで活用しているデザイン術」オンライン公開！

▼開催日時
2023年3月16日（木）19:00-20:00（参加費無料）

▼概要
Webサービスを自社開発しているセレスでは、若手のエンジニアやデザイナーが活躍し、10個以上のWebアプリケーションサービスを開発、運営しています。扱うサービスや商材も多岐にわたり、日々、サービス向上に努めています。今回は、現場で活躍するデザイナーとフロントエンジニアがスピーカーとして登壇し、プレゼンでも使える資料作成術や、アトミックデザインの解説など、デザイナーとエンジニアの両面から意識したデザイン術をテーマに余すところなくお話していきます。

デザイナーやエンジニアによるデザイン「ならでは話」や「あるある」もあり、勉強会の最後には、質疑応答の時間も設けています。普段、デザイン制作で分からないことや素朴な疑問など、プロに質問できるまたとないチャンスですので、この機会を最大限にご活用ください！

※「アトミックデザイン」とは：原子（最小単位のパーツ）単位でUIデザインを作成する手法

▼参加方法
Youtubeライブ（限定公開）にて実施予定。URLを発行次第、ページを更新させていただきます。
先着順（40名）となりますので、お早めにお申し込みください！

参加リンク：（ https://www.youtube.com/watch?v=ArHRf9J7U3k ）

>>お申し込み先：「コンパス」からは、こちら！

>>お申し込み先：「テックプレイ」からは、こちら！

▼こんな方におすすめ！
・新卒Webデザイナー
・実務経験2～3年の中堅Webデザイナー
・初めて勉強会に参加します！という方
・Webデザイナー、フロントエンドの方
・資料作成に携わる方、デザイン力を習得して仕事に活かしたい方
・当社の採用選考に興味がある方
・学生さんも大歓迎！

【おまけ】“アクシデント”ありのライブ感満載の勉強会！その舞台裏の様子をご紹介します♪

～ライブ配信が終了しホッと一息の皆さんと、猛省するYさんで記念撮影。皆さん、お疲れ様でした！！～

第1回目の勉強会ということで、24階のカフェテリアでは、これまで数々の勉強会を開催してきたベテランエンジニアのKさんがそばで見守るなか、ファシリテーターを務めるYさんとOさんが入念な事前打ち合わせを重ねていました。

今回は、YさんがOBS StudioとZoom画面との切り替え操作とファシリテーターの一人二役を担うということで、特にスピーカー設定には細心の注意を払っていたのですが、なんと、極度の緊張状態が続いたせいか、スピーカー設定の「OFF」に気づかず、本番が開始されてから1分半にわたって“ミュート”状態に。。。

ライブ配信ならではのアクシデントを展開し、楽しい勉強会になりました（笑）そのときの様子を広報の心の声も交えてお送りします！

――開始10秒前

Yさん：大丈夫です、オープニングのあれなんで。じゃあ、入りますよ。いいですか？こわい、こわい。

Oさん： 大丈夫ですよ（笑）

Yさん：行きますよ～。あはははは（笑）（なぜか、急に笑い出すYさん。。。謎のテンションに必死で笑いをこらえる広報）

――本番開始！

（ここから先は、映像のみの無音でお送りしています）

Yさん：（笑）はい。始まりました（笑）こんにちは！

Oさん：こんにちは！

（中略）※リハーサル通り順調（？）に1分半ほど経過

Kさん：（見守り隊のKさんがおもむろに）音入ってない気がする（笑）

Yさん・Oさん：（声の方向に顔を向ける2人）…

Yさん：え？…やばい、やっちまった。。

Oさん：いったん？

Yさん：いったん、、（スピーカーをON！）あの、音が入ってなかったということで。。

Kさん：ははははは（ひたすら、Kさんの甲高い笑い声が響きわたる24階カフェテリア）

Oさん：（ニコニコ顔で）ライブ感、満載の！（満載の？？）

Yさん：音が入ってなかったっちゅうことで、もう一度最初から、行きましょう。皆さん、こんにちは。

Kさん：ははははは（ひたすら、Kさんの甲高い笑い声が響きわたる24階カフェテリアPart2）

Oさん：（元気よく）こんにちは！

Yさん：これより株式会社セレスが行う勉強会ですね、「レガシーから見る、守るべきコーディングのルール」を開始したいと思います。ちょっと（笑）音が入ってなかったんで、もう1回最初からやってます。

Oさん：（迷いのない笑顔で）はい！

Yさん：私のほうが司会を務めます、エンジニアのYです。

Oさん：僕が人事を担当させていただいてます、Oと申します。領域としては、エンジニアなどの採用をやらせていただいておりまして、いつもYさんに怒られながらやっているような形になります。はい。（めっちゃ笑顔～）

Yさん：ハイ、怒ってないですけどね。

Oさん：（安定の笑顔で）は～い。

Yさん：怒ってないですよ。

Oさん：（ゆるぎない笑顔で）は～い。

Yさん：（笑）ということでですね、本日はですね、レガシーコードを題材にして、2人のエンジニアの方にスピーチしてもらおうということで。レガシーコードってご存じですか？

Oさん：レガシーコード？聞いたことはあるんですが、あんまりはっきりとは分からないですね。

Yさん：まあ、そうですよね。

Yさん・Oさん：（笑）（謎の笑い）

（順調に勉強会本編へと続く）

第1回目の勉強会の様子はいかがでしたか！第2回目はデザイナー向けの内容になっておりますので、ご興味がありましたらぜひ、ご応募ください！！

皆さんのご参加をお待ちしております！

セレスでは現在、事業拡大につき、一緒に働くエンジニアとWebデザイナーを募集しております。少しでもご興味をおもちいただけましたら、ぜひ下記よりご応募ください！お待ちしております！！

>>エンジニアの新卒採用と中途採用の募集ページはこちらから！

>>セレスには気軽に話が聞ける「カジュアル面談」もあります！

選考ではなくて「もうちょっと話を聞いてみたいな」とか「ついでに会社の内装も実際に見てみたいな」という方でも、少しでも気になったり、ご興味をおもちいただいた方にお気軽にご応募いただけます。ぜひご利用ください！

※当ストーリーは、スペースを「Ceres's post」から「#knowledge」にお引越ししました。（2023/08/16）