こんにちは！セレス広報担当です。
今回は、セレスのエンジニアが主催する、無料勉強会の様子をお届けします！
全4回シリーズの第1回として2月28日（火）に開催しました。Youtubeの生配信だけに、アクシデント発生の“ライブ感”満載で、（特に舞台裏は）笑いありの楽しい勉強会となりました（笑）
次回、第2回に企画しているWebデザイナー向けのオンライン勉強会の告知もありますので、ぜひ最後までご覧ください！
全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個の社内システムを開発し、保守、運用を担当。
～左のモニターが「OBS Studio」の画面、右がZoom画面～
今回は、フリーソフト「OBS Studio」を使って、Youtubeの限定公開でライブ配信しました。24階のカフェテリアをメイン会場に、音声のハウリング防止のため、2名のスピーカーがそれぞれ別室から発表する形で、3拠点体制で行われました。
～絶賛リハーサル中！！原稿を読んでいるとは思えないほど、ものすごくナチュラルに話す2人～
Sさん ／サービスエンジニアリング部 システムグループ ポイント事業部 ／使用言語：PHP/JS
～左上から時計まわりに「モッピーの負債について」、「レガシーがもたらす悲劇」、「チームで決めたコーディングルールや命名規則③」、「「PSR12の主な規則④」～
「レガシーから見る、守るべきコーディングのルール」概略
・モッピーとは
・モッピーの歴史
・モッピーの負債について
・レガシーコードとは
・レガシーがもたらす悲劇
・レガシーコードを生み出さないためには
・社内（モッピー）のコーディングルール
・PSR12の主な規則①～④
・チームで決めたコーディングルールや命名規則①～④
2011年にパソコン版およびスマートフォン版サービスを提供してから12年。これまでに生まれたレガシーコードの要因を列挙し、なぜ負債となったかを説明。現状の対応策、この先レガシーコードを最小限に抑えるための対策として、開発プロセスをざっくり4つの工程に分けて、「実装」と「レビュー」の工程を深掘りして説明。「モッピー」グループ内で実践しているコーディングルールを紹介しました。
なかでも新人エンジニアの話として、「新人は先輩エンジニアのコードをマネして書くことがほとんどなので、そのコードがすでにレガシーコードだった場合は“負の連鎖”につながり、技術力低下の原因になる」という。。。このお話は、非エンジニアの広報でもとても強く印象に残りました。前途有望な新人エンジニアさんが悲劇に見舞われないよう、コーディングルールをつくってきちんと守る、ということは本当に大切なことなんですね。
～今回はハウリング防止のため別室で1人待機しているSさん。（今回）喋る人は、「孤独との闘い」になるので、余計に緊張するんだそうです～
Yさん ／サービスエンジニアリング部 インフラグループ リーダー ／使用言語：PHP/jQuery/Vue.js/Go
～左上から時計まわりに「現在抱えている問題」、「PHPサポート終了問題」、「複数システムを1人で保守する上でのコーディングルール」、「レガシー化問題にどう対応するか？」～
「複数システム保守におけるレガシー化対策とコーディングルール」概略
・現在抱えている問題
・PHPサポート終了問題
・レガシー化問題にどう対応するか？
・複数システムを1人で保守する上でのコーディングルール
・コーディングルール①～④
・コーディングルールの適用状況
・誰に対してコーディングルールを作るか？
・「なぜ書いたか？」をコメントに書く
BtoC向けサービスのシステム開発とは違い、インフラチームでは、社内イントラネットのシステム開発、保守、運用を担当しています。現在、「社内ユーザー管理」や「目標管理システム」など10個近くにのぼる社内システムを一手に引き受けているYさん。5年前には最新だったPHPのコードも度重なるバージョンアップを経て、いまではレガシー化に。今回は、そうしたサポート終了問題も踏まえ、「複数システムを1人で保守する上でのコーディングルール」を設けることで将来的なシステムの健全化を図る、具体的な対策をお話していただきました。
～Yさんが待機する別室で、本番直前に動作確認をするYさんとSさん～
2人のスピーカーの発表が終わったところで、質疑応答の時間に。勉強会を通してYoutubeのコメント欄から質問を募集していましたが、最小規模のため（苦笑）社内からの質問を2つ、それぞれスピーカーのお二方に答えていただきました。
質問①：「PSRなど、コーディング規約を適用するための何かツールを使っていますか？」
質問②：「チーム開発を進めるなかでコーディングルールを設けるにあたって、メンバーと議論していますか？」
最後に人事のSさんから、現在、セレスで募集中のエンジニア職について、事業部ごとの使用言語や待遇など説明させていただきました。今回の勉強会で、少しでもご興味をお持ちいただけましたら、ぜひぜひご応募ください。お待ちしております！
>>エンジニア募集内容の詳細はこちらをご覧ください！
>>セレスには気軽に話が聞ける「カジュアル面談」もあります！
選考ではなくて「もうちょっと話を聞いてみたいな」とか「ついでに会社の内装も実際に見てみたいな」という方でも、少しでも気になったり、ご興味をお持ちいただいた方にお気軽にご応募いただけます。ぜひご利用ください！
▼タイトル
【勉強会｜第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分半にわたって“ミュート”状態に。。。
ライブ配信ならではのアクシデントを展開し、楽しい勉強会になりました（笑）そのときの様子を広報の心の声も交えてお送りします！
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）
/assets/images/2063250/original/85485130-b4b6-4558-bac0-7440cbed44a0?1562125818)
/assets/images/2063250/original/85485130-b4b6-4558-bac0-7440cbed44a0?1562125818)
/assets/images/2063250/original/85485130-b4b6-4558-bac0-7440cbed44a0?1562125818)
/assets/images/5366508/original/85485130-b4b6-4558-bac0-7440cbed44a0?1596199650)