Tresエンジニア男子による勉強会初開催しました！[後編]

華金ですがこんばんは！

今回はTresエンジニア男子による勉強会初開催しました！[前編]の続編です。

前編では、勉強会自体の方向性や趣旨などにとどめていたので、

後編では、前回の勉強会の中で2人が発表した個々の部分に

少しだけ踏み込んだ内容を、、発表者本人にまとめてもらいました✨

ちょっと長くなってしまったのですが、この記事でTresのエンジニア個々人が

普段何に注力していてどのような技術に興味があって、

それをどのようにアウトプットしているのかの一端がほんの少しでも伝えられれば幸いです！

エンジニア勉強会発表テーマのおさらい

どうも！

美佑さんに変わって、Tresエンジニアチームの土井内です！！！

まず個々の発表内容に入り込む前に、それぞれの発表に使われた目次を見てみますと。。。

▶「SPAのススメ　〜React/Angularを通して〜」(土井内)

①今回伝えたいこと(GOAL)・今回伝えないこと

②なぜ今SPAなのか(何が嬉しいのか)

③どのような場面で使えるのか

④実現する方法

⑤少し進んだ話

▶「SVGってどうよ？」(藤原)

①SVGとは？

②ラスターとベクターの違い

③これつかうと何が便利なの？

④でも万能ではありません

⑤SVGを使ったサイト紹介

上記のようになっています！

見てもらえるとわかるように、どちらの発表も

「それって何が嬉しいの？」

「どのような場面で使われるものなの？」

という内容になっていますよね！！

もちろん技術の勉強会なので、技術的なこと、実装方法にも触れますが、

概念的なことにもしっかり触れているように見えるかと思います！

こういう所からも、

Tresのエンジニアメンバーが大切にしている価値観や文化が見て取れるのではと思います。

技術は結局、何かを実現するための単なる方法論ではありますが、

その方法論の選択の仕方一つで、その後の拡張性やあらゆるコスト、

ユーザーエクスペリエンスが決まってしまうものでもあります。

エンジニアの経験がある人なら、その選択ミスで

「実装した時間と同じかそれ以上の時間が修正にかかってしまった」

という経験がある人もいるのではないかと思います。

うん。恐ろしい。できればあってほしくない。

だからこそエンジニアは

「その技術を何のために使うのか」

「いくつかある選択肢の中で何故それを選ぶのか」

という視点は少なからず持っておくべきだと考えます。

(もちろん「どうしてもこの技術が使いたい！」という熱量は大切にしたいと思っています)

また、それを周囲のメンバーに説明出来てしかるべきだというのがTresのエンジニアの考え方です。

これは、

「プログラミング・システム実装に限らず、ビジネス開発、企画から運営までを担えるようになりたい！

また、どこまでもユーザーのことを考えたものを作りたい！」

ということを目標にしているエンジニアが集まるTresで、皆が自然に持っている考え方でもあります。

これらのように、エンジニアは自身が扱う技術に責任を持ち、

「そうじゃない人」いわゆるプロダクトを使う人はもちろん

実装には関わらないディレクション担当、その技術で作るプロダクトにお金を投資する

自社全体も考えた上で技術にあたるということを徹底しています。

(というより、そうなれるように皆が日々研鑽中ですw)

なので今回の発表も自ずとそういう部分を漏らさずに発表されているように見えます！！

では、前置きが長くなりましたが、、、

ここから個々の発表テーマに関して少しだけかいつまんでお伝えします！

主には２つの発表に関して、それぞれ下記の観点でお伝えします！！

●発表方向性・発表全体で伝えたかったこと

●発表の一部

SPA(シングルページアプリケーション)のススメ〜React/Angularを通して〜(土井内)

＜発表方向性・発表全体で伝えたかったこと＞

「SPA」ということで、「シングルページアプリケーション」を指しています！

ユニクロなど製造小売とかの業務形態のことではありません！全く別物です！(言いたかっただけ)

SPA自体はずっと前からある技術ですし、

今のような新しい技術要素の中で大きくWeb界隈で流行り始めたのは

AppleショックやHTML5の正式勧告という流れの中で

RIAから移行し始めた2014年頃からになるのです。。。

それなら何故今この内容なのか、というところなのですが、、、

結論から言うと、今のWeb業界の流れの中でSPAのその思想や使われる技術要素から、

近年のフロントエンドエンジニアが意識すべきこと、開発時に組み入れるべきところを

あますところなく伝えられると考えたからです！！

あまりWeb系の経験が深くないメンバーや、どちらかというと業務システム関連の

Javaをゴリゴリ書いてきた人たちがいたことからも、

今回伝えようとしたのはあくまでSPAの全体感「SPAとは、なんとなくこういう感じ」

みたいなことに重きを置いたわけではありますが。

その思想を伝えるのは恐らく、古き良き技術達がその時代の技術の中で

やろうとしていたことからの流れも感じられるようにもなります。

また、ユーザーが利用する端末のモバイル化への動きや、

Web技術をモバイルで使えるようにする(PWAなど)動きが高まっていることを考えても、

SPAというのはエンジニアチームが本格的に発足した

今の社内に伝える最初のテーマとして最適だと考えました！！

＜発表内容の一部＞

ここからは発表内容の中で一部だけ抜粋します。

▶SPAにおけるフロントエンドの役割

SPAに関連する技術を使用することで、クライアントとサーバーの役割も下記のように変わってきます。

●SPAでのサーバーの役割

・リクエストに対してのrouterの振り分けやUI変更に関する処理を持たない

・状態(ユーザーの状態含む)を持たない

・リソースの提供のみ

また、このことでクライアントでは下記のようなことが必要になってきます！

●SPAでのクライアントの役割

・ルーティング処理(クライアント側にてページ遷移の制御を実装)が必要

　※historyの管理含む

・ビジネスロジックと状態を持ち、ユーザー状態の管理を行う

・AjaxやWebsokcketでのリソースの取得手段が必要

これらを踏まえると、今までサーバーサイドが担保してきたことが

フロントに移ってきて、それをフロントエンドエンジニアがお世話をしないといけない

というケースも増えてしまうことになってくるわけです！

▶SPAを構築する上でフロントエンド担当者が意識しなければいけないこと

上記を踏まえた時に、フロントエンドの担当者がSPAを構築する上で

考えなきゃいけないこと(というより考えられると良いこと)は下記のようになってきます。

※「モダンなJavaScriptエンジニアができるようになると良いこと」ともいえるかも

・メモリリーク

・ブラウザとサーバー双方でのセキュリティ

・バンドルファイルや、コンパイルのタイミングなどのことも含めた

　パフォーマンスチューニング

・通信技術(コネクションとか、ストリームとか)

・多い技術要素から状況にあった技術選定

・開発ツールの選択やコンフィグ、コマンド操作によるコンパイルなど、

　SPAを実行するための環境構築

・早いフレームワークのバージョンアップへの対応

・過去の画面設計からUIコンポーネント設計への思想転換

こう見ていくと、

もちろん「長くフロントエンドエンジニアだけど以前からそんなこと当たり前にやっていたわ」

って方もいるとは思いますが。。。

ここだけ切り取ると単に責務が増えてツラくなるだけにも見えます。

ただ、だからこそコントロール出来る部分が増える楽しさや開発管理のし易さがあったり、

考えなきゃいけないことが増えるというのは、逆に言えば考えられるようになる部分、

触れられる部分が増えるということでもあるので、

技術が幅広く大好きなエンジニアからすると「ワクワクが止まらない」！！

発表の中では他にも、

・スピードというUXの重要性とビジネスの影響

・メリットだけではなく、SPAのデメリット

・コンポーネント指向から起きるイベント発生からのDOM更新パターンや依存関係の増加。

　そのことによるjQueryからReactやAngularという流れの話

などなど大きく大きく全体像を発表しましたが、土井内の発表に関してはこの辺で止めておきます！

では次の発表内容の紹介に進みますね！！

SVG(スケーラブル・ベクター・グラフィックス)ってどうよ？(藤原)

＜発表方向性・発表全体で伝えたかったこと＞

当たり前ですが、制作現場においては

普段あまり技術を触らない人がお客さんになることも多くあります！

そんな業務の中では予想していなかった要望があったり、

一度作ったものが細かい一部の変更で大きく変わる、なんてこともあるわけですね。

時には「この画像の色が少しあれなんで、、」なんていう要望もある、、(ガ、ガゾウの色！？！？)

また、先ほどのSPAの話にもありましたが作るものはモバイル化、

端末種類の増加にも対応する必要が出てきましたね。

そんな要望がある中で、ユーザーや開発者が

幸せになれる可能性のある技術の一つがSVGです！！

今回の発表では、たかさんが静的ページの構築も多いTresの制作現場にも

生かすことのできる、そんな優秀なSVGについて発表してくれました！！

＜発表内容の一部＞

▶これを使うと何が便利なのか

●１つのファイルでRetina対応

先ほどあったように、端末種類の増加などに伴い用意すべき画像の種類も増えました！

ですがPC用の画像、スマホ用の画像、ホバー時の画像などが必要なく、

SVG1つあれば対応出来るようになります！

(細かい理由は省いています)

また、HTTPリクエスト数の削減にも繋がり

結果としてページの表示スピードが上がることにもなり得ます。

この表示スピードというのはやはりUX的にも重要ですし、これがSEOの対策にも繋がり、、

つまり、ビジネス的な強みを作る要素になってくれるのです！！！

●css等で編集可能

画像自体がコードベースでサイズや色をCSSで調整出来ます！

ここに関しては今回SVGを知らなかったエンジニアからかなり良い反応がありましたw

物自体がXMLベースということもあり、画像がコードから編集可能なのです！！！

これが冒頭にもあったように、お客さんの要望や、仕様に柔軟に対応出来るということになります。

●アニメーションも行える

SVGはその特性からアニメーションとの相性が良く、Web技術であるCSS、

JavaScriptを使って動きをつけたりぼかしをつけたり、、なんてことも出来てしまうんですね！

ここでたかさんの発表の紹介は終えますが、ビジネス側の人も参加してくれている中での

このたかさんの発表の中で再認識出来たのは、当たり前ですがやはり

ユーザー側により近い人からすると「見た目」は非常に重要なものであるということです！

いくらエンジニアがお客さんからの変更の要望を叶えることで出るであろう

変わりばえの小ささ細かさを知っていたり、その変更からビジネスへのインパクトの大きさを

感じなかったとしても、ユーザーやビジネス側の人は異なる感じ方をすることもあるだろうし、

見た目でわかりやすく感じやすいということはそこから出る反応も大きいわけですね。

エンジニアがどういう選択を取るにしろ、その違いが確実にあるということを

認識出来ているだけで違うのだろうなという少し本質的なことも学ぶことが出来た、

非常に刺激的な発表でした！！！

僕も個人的にSVGを触り使えるようになって、

提供出来る選択肢の一つに入れられるようにしていきたいと思います！

はい！では、簡単ではありますが、

この辺で発表内容に関しての紹介を終えたいと思います！

土井内からは以上ですーーー！

如何でしょうか？次回は1月19日に開催し、エンジニア4名が登壇予定となっています！

インプット・アウトプットが出来る場ってとても大切だと思うので次回も楽しみです♬

いつかわたしも発表者側になれるように頑張りますね！！