見出し画像

【エンジニアの学び】技術研究の一環で「オセロゲーム」を作ってみた話

ソルトワークスでは不定期に社内勉強会「IN THE SALT」を開催しており、部署や職種に限らず“みんなで学ぶ”機会があるのですが、じつは個人レベルでも勉強や研究をしているメンバーがたくさんいます。

今回は、プログラマーいとうせいこうの技術研究「React学習」について、本人の声を交えながらご紹介します。
(※いとうせいこう=社内ニックネームです)



突然社内に流れてきた「オセロゲーム」

ある日、社内で使っているチャットslackの #自由掲示板 にこんな投稿がされました。

早速社内ネットワークのリンク先にアクセスしてみると、誰がみてもそれでしかないオセロの盤が…!手順や対戦相手、コンピュータの強さが選べて、自分が置きたいところをクリックすれば自動でゲームが展開されるというもの。

ちょっと試しに…とクリックしてみると、サクサクとゲームが進んでいき、つい最後までやりたくなってしまいます。
突然の社内公認ゲーム投下に、社内は静かに大盛り上がりでした(笑)

作ったってどういうこと…?これまでとは何か違う技術で使ったの??
非エンジニアの広報担当にはわからないことだらけだったので、オセロゲームを手がけたフロントエンドエンジニアのいとうせいこうにインタビューしてみました。

フロントエンドエンジニア いとうせいこう Itoseiko
WEB会社を4社経験ののち2013年に入社。WEBサイトのコーディング、JavaScriptでのインタラクティブ部分、たまにiOSアプリのコーディングを担当。趣味はゲームで、特にパズルゲームやスマホゲームが好き。


勉強のきっかけ

───なぜオセロゲームを作ることになったのですか?

せいこう:目的はオセロを作ることではなく、Reactという技術を学ぶことでした。フロントエンド用の言語やフレームワークって今でこそたくさんあるんですが、少し前だとReactは必須と言われていました。以前から興味はあったもののソルトワークスではReactを使う場面がなく、それどころかじつは、フロントエンド側ではフレームワークも使っていなかったんですよね。

最近のエンジニアチームは「今までソルトでやってなかったことをどんどんやっていこう」という方針で各々が興味のあることを学んでいるのですが、自分は技術単体でも流行っていたReactをやってみようと思いました。

上司の藤竜さんが「せっかく学ぶなら何か作ってみたら?」とアドバイスしてくれたこともあり、大好きなゲームを作ることにしました。


───新しいことを学びながら好きなものを作れるとは楽しそうですね。Reactやフレームワークを使う環境になかったというのはどういうことですか?

せいこう:ソルトのサービス開発では、フレームワークを使うことなくコーディングしていました。言ってしまえば個々のルールでコードを書いていっているということです。何が問題かというと、例えば違う人が後から修正をしようと思っても、最初に作った人のルールによって書かれていたら修正するのに手間がかかってしまう。

一部のサービスではソルト独自のフレームワークを使っていたりもするのですが、そうなるとソルトに入社してまずそのフレームワークを理解する必要があり、手間も時間も余計にかかってしまいます。やはり世の中に出ているフレームワークやライブラリを活用するほうがメリットは大きいです。

【Reactとは?】
ReactはWebサイトやWebアプリのUI構築のためのJavaScriptライブラリ。下記のような特徴がある。
⚫︎小さな部品状態のプログラムを組み合わせて複雑なUIを組むことができる
⚫︎ページ内で動かしたい部分を最小限に動かせる技術なので処理速度が速い


※ライブラリは、開発時によく使われるコードを集めたもののこと。システム開発の際に大枠のテンプレートとして用いられるフレームワークとよく似ているが、ライブラリは必要な機能を部分的に使うことができ、プログラマーが持つ自由度が高い。


「オセロゲーム」を作ってみて

───React学習の中で難しかった点を教えてください。

せいこう:Reactについては社内に熟知している人はいないので、インターネットで自分で調べて理解を深めていきました。学ぶと決めてそこから2ヶ月ほどでオセロゲームは完成しましたが、手を動かす前にReactの仕組みを理解する学習段階から大変でした。

実際に手を動かす部分でいうと、React開発の際にはTypeScript(JavaScriptに機能を追加して強化した言語)を使用して最終的にJavaScriptに落とし込むのですが、その過程で「どの変数が何の型なのかを定義する」ことが一番難しかったです。
ただ、TypeScriptは以前社内のサービス開発の中で使ったことがあり、全く0からのスタートでなかったので多少のやりやすさはありましたね。


───オセロゲームならではの苦労はありましたか?

せいこう:対戦相手となるAIを強くするのはすごく苦労しました。

オセロゲームのプログラミング開発のパターンは、大きく分けて2つあります。解決手順を記述していくアルゴリズム型と、コンピューター同士で対戦させることで学習させていくディープラーニング型。今回はアルゴリズム型で、三段階のレベル(弱・中・強)を弱から作っていきました。

アルゴリズムを強化することでAIレベルを上げられるのですが、どうプログラミングすると強くなるのかということを探りながら進めるのがめちゃくちゃ難しくて…。ゲームのセオリー的に一番いい戦略は“相手が有利な手を打てないようにこちらが打つ”ことなのですが、それをプログラミングで指示するのが大変でした。

そもそものオセロについて理解を深める必要もありました。オセロってなんとなくみんなルールを知っているかと思いますが、一応基本戦術というかセオリーがあるんですよね。僕も知らなかったですが今回で結構詳しくなりましたよ(笑)

(戦術を丁寧に教えてくれるせいこうさん。指示通りに打っていくと見事AIに勝利できました!)


───逆に楽しかった面や嬉しかったことはありますか?

せいこう:…全部楽しかったですね!僕はゲーム好きなので今回は特に楽しみながら夢中になって作っていました。TypeScriptを使ったということもありますが、振り返るとエラーも出づらかったように感じます。

完成後はまずエンジニアチーム内で共有したのですが、反応も良くReactに興味を持ったメンバーも多かったので嬉しかったです。
全社周知した後も、「楽しかったよ〜」「休憩がてらやってるよ」など直接反応をもらうこともありました。ゲームとして知っている人も多いから、作るものとしてオセロを選んで正解だったなと思います。


今回の学びや技術を活かして

───今回習得した技術は普段の業務に活かせそうですか?

せいこう:そうですね、今回一応ゲームを作り上げることができて自信がついたので、Reactは通常業務でも積極的に取り入れていきたいです。

実際に少し前にリニューアルした「コンビニフォト!」のLPはReactを導入して開発を進めました。ほかにも、社内で部署を跨いで業務参加を募るシステム「ソルトクエスト」を開発した際も、Reactを使って作ったんですよ。

今後の新規サービスや社内システムの開発ではなるべくReactを活用していくつもりです。僕以外のフロントエンドエンジニアを集めて、ちょっとしたReact勉強会なんかもやったので、今後もみんなでスキルを磨いていけたらいいなと思っています。

(せいこうさん主催のReact勉強会)


───今後チャレンジしたいことや学びたい分野があれば教えてください。

せいこう:このオセロゲーム、じつはまだ未完成な部分がありまして…。
スタッフ同士で対戦できるようにしたいんです。コンピュータ相手もいいですが、やっぱりゲームは人間同士でやる方が楽しいですからね。

当初からスタッフ同士で対戦できるように開発したかったのですが、そのためにはリアルタイムの双方向通信を可能にするWebSocketという仕組みを使う必要がありました。未知のWebSocketの学習から始めないといけないので今回は後回しにしましたが、今後時間を見つけて勉強し、スタッフ同士の対戦ができるように改修したいですね。

せいこう:それと、ディープラーニングももっと極めたいです。膨大なデータをもとに自動的に特徴を導き出していくAI技術の一種ですね。
例えば「年賀家族」のユーザーデータから客層や使用している写真によって特徴を抽出し、ユーザーに合わせて自動でデザインをおすすめしてくれる、といった機能が実現できれば、お客さんにとってさらに使いやすいサービスになることが期待できます。

ソルトのエンジニアはみんな勉強熱心で、AI技術をはじめ新しいことをどんどん取り入れて業務に活かしていこうとしています。
僕は少し前まではAIを使うことにあまり前向きではなかったのですが、うまく活用しているチームメンバーを見ていて捉え方が変わりました。
AIが導き出す答えは全てが正しいとは限りませんが、付随したあらゆる情報を与えてくれるから視野が格段に広がります。

これからも、新しい技術やツールを足がかりにして、より良いものを自分の力で作れるプログラマーでいたいと思います。



なにか新しいスキルを身につけるにしても、自分が興味あることに着目したり、好きなものに関連づけて学習すると非常に意味のある学びにあるのだということを実感したインタビューでした!

今年に入り、自主的な学習機会やナレッジ共有の場が増えてきたソルトワークス。まずは各々が「面白そう」「楽しい!」と感じることを見つけ、そこからスキルアップを図ることが、良いサービス作りにも繋がっていくのかもしれませんね。