一般的なWeb系エンジニアと差別化するための、少し尖ったWeb技術
自己紹介
エンジニア歴は2年2ヶ月。スタートアップにて、自社プロダクト開発を行っている28歳0ヶ月のエンジニアです。Web系が中心ですが、IoTプロダクト開発や顔認証を用いたサービス開発の経験があり、一般的なDBの設計 + Webアプリ開発を行うWeb系エンジニア（※個人の見解 / 以下略 "一般的なWeb系エンジニア"）と比べると少し変わった事に関わっていると自負しています。
【略歴】
○ 2021年03月 ~ ( 現在 ) スタートアップの創業メンバーエンジニア
○ 2019年02月 ~ 2021年02月 ロボットベンチャーエンジニア
○ 2018年04月 ~ 2018年09月 メガ損保（新卒）
○ 2013年04月 ~ 2018年03月 私立文系大学Twitterもやっています。よかったらフォローをお願いします。
この記事で紹介する事
一般的なWeb系エンジニアと差別化を図るための、Webで扱える少し尖った技術について紹介したいと思います。
Web系エンジニアが大量に増えている今の時代、他と差別化できる技術スタックを持っていることは、とても重要な資産になると思います。今回は筆者の観点から、Web系エンジニアでも比較的取り掛かり安いと感じた３つの技術について紹介したいと思います。
① WebGL ： Webで扱える３D技術関連のJavaScript API
② WebRTC ： Webで扱えるリアルタイム通信の仕様。JavaScript APIが提供されている。
③ OpenCV ： 画像処理ライブラリ。PythonやC++がメインだが、JavaScriptライブラリもある。上記3点について、Web系エンジニアならストレスなく受け入れられるJavaScriptのライブラリを紹介することで、少し尖った技術への関わり第一歩をご提案したいと思います。
センスや経験を持つ「できるエンジニア」と戦うための作戦
できるエンジニアは経験やセンスを元に、とんでもないスピードで新しい技術を習得していきます。それに対して、経験が浅く特別なセンスを持たないエンジニアが、努力だけで追いかけることは得策ではありません。戦うためには作戦が必要です。今回は筆者の考える、"センスや経験を持つ「できるエンジニア」と戦うための作戦"についてご紹介したいと思います。
Webにおける技術トレンドへの考え方と少し尖った技術
Web系の技術トレンドは、本当に波が激しいです。例えば、筆者がエンジニアになった2年前はRuby on Rails、少し前にはPHPといった形でした。その後、React.jsやVue.jsのJSフレームワークが流行ったと思ったら、昨今はNext.js、Nuxt.jsといった技術がトレンドです。これら新しい技術が出てくると、できるWeb系エンジニアが真っ先に習得し、広めていきます。そして少し遅れを取りながら、他のエンジニアが追従するといった歴史が繰り返されています。
また、その時トレンドの技術を習得する機会があるかは、所属している開発チームの事情によって大きく変わると思います。事情は様々だと思いますが、全員が技術トレンドを全力で追いかけることができる状況にいるわけではないということです。
その上で、Web系を専門分野としながら、今回ご紹介するような、少し尖った技術を身につけることができれば、他のエンジニアと大きく差別化できると考えています。特徴として、それら技術はライブラリレベルでのトレンドはあるものの、コアな考え方はどの時代も共通していることでし。また、Web系エンジニアでこれらの領域に関わったことがある人が少ないことも差別化できる大きな特徴の１つです。
Webで扱える少し尖った3つの技術
今回は、Webで扱える少し尖った3つの技術を紹介したと思います。これらの技術を本気で勉強しようとすると、アカデミックな世界に足を踏み入れることになるのでWeb系エンジニアとしてどのように関わり初めていくかということにフォーカスしてお伝えします。もし興味を持ったらさらに深掘りして学んで行く事をお勧めします。
① WebGL ： Webで扱える３D技術関連のJavaScript API
WebGL（ウェブジーエル、Web Graphics Libraryの略称）は、互換性のある任意のウェブブラウザ上で、プラグインを使用せずにインタラクティブな2次元および3次元のコンピュータグラフィックをレンダリングするためのJavaScript APIである。（引用：Wikipedia）
関連領域：Google Glassなどに使われるXR領域と大きく関わる3D技術
② WebRTC ： Webで扱えるリアルタイム通信の仕様。JavaScript APIが提供されている。
WebRTC（英語: Web Real-Time Communication）は、ウェブブラウザやモバイルアプリケーションにシンプルなAPI経由でリアルタイム通信（英語: real-time communication; RTC）を提供する自由かつオープンソースのプロジェクトである。（引用：Wikipedia）
関連領域：ZoomやYouTube Liveなど動画配信技術に関わるリアルタイム通信
③ OpenCV ： 画像処理ライブラリ。PythonやC++がメインだが、JavaScriptライブラリもある。
OpenCV（オープンシーヴィ、英: Open Source Computer Vision Library）とはインテルが開発・公開したオープンソースのコンピュータビジョン向けライブラリ。（引用：Wikipedia）
関連領域：画像処理、画像解析を用いた機械学習分野
① WebGL
WebGLは Webで扱える３D技術関連のJavaScript APIです。
そして、WebGLを学ぶため、OpenGLについて少し触れておきます。OpenGLは、グラフィックスレンダリングのためのライブラリです。
OpenGL（オープンジーエル、英: Open Graphics Library）は、クロノス・グループ (英: Khronos Group) が策定している、グラフィックスハードウェア向けの2次元/3次元コンピュータグラフィックスライブラリである。SGI社内で自社のCGワークステーション向けにクローズドに策定されたAPI仕様が改良されて公開され、後に大きなシェアを持つに至った。現在は多様な描画デバイスを包括するグラフィックスAPIのオープン標準規格として策定が行なわれている。（引用：Wikipedia）
そして、このOpenGLをWebで扱えるようにしたのがWebGLです。具体的にはJavaScript APIとして提供され、canvas要素上でGPUを動かしてCGレンダリングを行います。
WebGL（ウェブジーエル、Web Graphics Libraryの略称）は、互換性のある任意のウェブブラウザ上で、プラグインを使用せずにインタラクティブな2次元および3次元のコンピュータグラフィックをレンダリングするためのJavaScript APIである。WebGLはウェブ標準に完全に統合されているため、ウェブページのcanvas要素上でGPUアクセラレータを使用した物理シミュレーション、画像処理、画像効果などを表現できる。WebGLの要素は、外側のHTMLと組み合わせたり、ページやページの背景の他のパーツと合成して使用できる。（引用：Wikipeda）
そして、この仕組みを学ぶために筆者がおすすめするのがThree.jsというJavaScriptライブラリです。公式ページに、サンプルが多く用意されており、それぞれGit Hub上にソースコードが公開されています。
安定のオライリーからも書籍が出版されています。
「初めてのThree.js（オライリー）」
個人的には、公式ページがかなり充実しているので、そこである程度学にことをお勧めします。その上で、書籍を購入し、さらに興味を持ったら、より専門的なCGの勉強に取り組むといった流れをお勧めします。専門的なCGの勉強となると、数学を用いた空間表現になります。プログラミングとは異なった概念の世界です、取り掛かると挫折する可能性がかなり高いです。実際に、筆者はこの失敗をしました。
② WebRTC
WebRTCは、Webで扱えるリアルタイム通信の仕様のことです。
そして、WebRTCを学ぶためにはP2P通信について理解する必要があります。P2P通信とは、サーバーを経由せず、コンピューター同士で通信を行う技術です。
Peer to Peer（ピア・トゥ・ピア または ピア・ツー・ピア）とは、複数のコンピューター間で通信を行う際のアーキテクチャのひとつで、対等の者（Peer、ピア）同士が通信をすることを特徴とする通信方式、通信モデル、あるいは通信技術の一分野を指す。P2Pと略記することが多く、以下本項目においてもP2Pとする。（引用：Wikipedia）
対照的な通信技術としては、クライアント-サーバー型の通信となります。サーバーに対してクライアントから、HTTPリクエストを投げ、サーバーからクライアントへHTTPレスポンスを返すというおなじみのHTTP通信もその1つです。
そして、このP2P通信をWebで実現できるようにしたのがWebRTCとなります。今回は、このWebRTCを学ぶためにおすすめのSDKを紹介します。NTT コミュニケーションが開発しているSkyWayというサービスです。
SkyWayは、WebRTCをサービス開発に落とし込むためのSDKを提供してくれています。具体的には、WebRTCを使うために必要となる「シグナリングサーバー / STUNサーバー / TURNサーバー / SFUサーバー」の４つのサーバーを用意してくれています。これらに対してブラウザJavaScriptからアクセスすることで、WebRTC用の特別なサーバー構築なしでリアルタイム音声通話、テレビ通話機能を実装することができます。
SkyWayは、学習やプロトタイピングレベルまでは無料で使用することができます。サンプルコードも用意されており、実際に動くWebアプリサンプルなので、まずは手元で動かしてみることをお勧めします。サービスとして展開する際は有料プランがありますが、ここでの説明は割愛します。
③OpenCV
OpenCVは世界中で使われている画像処理のライブラリです。メインはPythonやC++で提供されていますが、JavaScriptのライブラリもあるので、今回はそちらをご紹介します。PythonやC++に比べるとJavaScriptのライブラリは情報が極端に少なくなりますが、今回は技術に触れることが目的なのでそのことは度外視とします。
公式イントロダクションでは、JavaScriptライブラリ取得のため、GitHubからソースコードを落とし、Pythonを使ってビルドする手順が紹介されています。まずは、動かしてみたいという方は、以下のURLでOpenCV.jsの読み込みができるので是非使ってみてください。（実際のサービス開発では使用しないでください）
<script src="https://docs.opencv.org/4.1.1/opencv.js" type="text/javascript"></script>Webアプリ開発をしていると、画像処理が必要なケースはそこまで多くはないでしょう。実際、筆者が画像処理について初めて触れたのは顔認証アプリケーション開発をした時でした。具体的には、顔識別の推論エンジンに対して顔画像を渡す処理の際に、画像内で顔検出した箇所をクロップし、2値化、必要解像度まで縮小といった内容の処理をしました。
今回はJavaScriptで画像処理を動かす紹介ですが、普段何気なく使っているJPEGやPNGの画像をグレースケール化したり、サイズ変化したりとさんプリを動かしているだけでも楽しめるかと思います。興味を持った方はPythonなどのOpenCVに触れてみるとさらに理解が深まり、AI系の開発へ興味へと繋がるかもしれません。
さいごに
以上が、今回ご紹介したWebで扱える少し尖った技術です。Web系エンジニアだからこそ、他のエンジニアが普段触れる重要性についてお伝えさせていただきました。
今回ご紹介したのは、ほんの一部です。「幅広い視野の中で興味がある技術を探し、触れることで、他のWeb系エンジニアと差別化する作戦」に興味を持っていただけたら幸いです。
この記事が気に入ったらサポートをしてみませんか？