Tres Innovation

2018年01月17日

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

Pocket

 

 

 

こんばんは!今回はこちらのブログの続編です。

 

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

 

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

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

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

 

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

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

アウトプットしているのかの一端がほんの少しでも伝えられれば幸いです!

 

 

 

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

 

 

勉強会で発表するエンジニアと聞き入るエンジニア

 

 

どうも!

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

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

 

 

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

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

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

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

④実現する方法

⑤少し進んだ話

 

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

①SVGとは?

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

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

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

⑤SVGを使ったサイト紹介

 

 

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

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

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

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

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

 

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

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

こういう所からも、Tresのエンジニアメンバーが大切にしている

価値観や文化が見て取れるのではと思います。

 

 

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

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

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

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

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

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

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

 

だからこそエンジニアは

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

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

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

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

 

 

また、それを周囲のメンバーに説明出来てしかるべきだというのが

Tres Innovationのエンジニアの考え方です。

これは、

「プログラミング・システム実装に限らず、ビジネス開発、

企画から運営までを担えるようになりたい!

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

ということを目標にしているWEBエンジニアが集まるTresで、

皆が自然に持っている考え方でもあります。

 

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

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

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

お金を投資する会社全体も考えた上で

技術にあたるということを徹底しています。

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

 

 

なので今回の発表も自ずとそういう部分を

余すことなく発表されているように見えます!!

 

 

エンジニア勉強会にて

 

 

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

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

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

  • 発表方向性・発表全体で伝えたかったこと
  • 発表の一部

 

 

 

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

 

 

SPA(シングルページアプリケーション)のススメ

 

 

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

 

 

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

ユニクロなど製造小売とかの業務形態のことではありません!

全く別物です!(言いたかっただけ)

 

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

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

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

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

 

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

結論から言うと、今のWeb業界の流れの中でSPAのその思想や

使われる技術要素から、近年のフロントエンドエンジニアが意識すべきこと、

開発時に組み入れるべきところをあますところなく伝えられると考えたからです!!

 

 

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

Javaをゴリゴリ書いてきた人たちがいたことからも、今回伝えようとしたのは

あくまでSPAの全体感「SPAとは、なんとなくこういう感じ」

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

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

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

 

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

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

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

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

 

 

SPA(シングルページアプリケーション)のページとビュー

 

 

 

発表内容の一部

 

 

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

 

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

 

SPAに関連する技術を使用することで、クライアントとサーバーの役割も

下記のように変わってきます。

 

◦SPAでのサーバーの役割

  • リクエストに対してのrouterの振り分けやUI変更に関する処理を持たない
  • 状態(ユーザーの状態含む)を持たない
  • リソースの提供のみ

 

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

 

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

  • ルーティング処理(クライアント側にてページ遷移の制御を実装)が必要※historyの管理含む
  • ビジネスロジックと状態を持ち、ユーザー状態の管理を行う
  • AjaxやWebsokcketでのリソースの取得手段が必要

 

 

SPA(シングルページアプリケーション)におけるフロントエンドの役割

 

 

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

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

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

 

 

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

 

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

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

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

  • メモリリーク
  • ブラウザとサーバー双方でのセキュリティ
  • バンドルファイルや、コンパイルのタイミングなどのことも含めたパフォーマンスチューニング
  • 通信技術(コネクションとか、ストリームとか)
  • 多い技術要素から状況にあった技術選定
  • 開発ツールの選択やコンフィグ、コマンド操作によるコンパイルなど、SPAを実行するための環境構築
  • 早いフレームワークのバージョンアップへの対応
  • 過去の画面設計からUIコンポーネント設計への思想転換

 

 

こう見ていくと、

 

 

もはや過去のフロントエンドエンジニアが考えるべき領域を大きく超えている

 

 

もちろん「長くフロントエンドエンジニアだけど

以前からそんなこと当たり前にやっていたわ」

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

 

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

ただ、だからこそコントロール出来る部分が増える楽しさや

開発管理のし易さがあったり、考えなきゃいけないことが増えるというのは、

逆に言えば考えられるようになる、触れられる部分が増えるということでもあり、

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

 

 

発表の中では他にも、

  • スピードというUXの重要性とビジネスの影響
  • メリットだけではなく、SPAのデメリット
  • コンポーネント指向から起きるイベント発生からのDOM更新パターンや依存関係の増加。
  • そのことによるjQueryからReactやAngularという流れの話

 

 

SPA(シングルページアプリケーションにおけるIO処理方法)

 

 

などなど大きく大きく全体像を発表しましたが、

土井内の発表に関してはこの辺で止めておきます!

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

 

 

 

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

 

 

SVG(スケーラブルベクターグラフィックス)とは

 

 

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

 

 

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

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

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

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

 

時には「この画像の色が少しあれなんで、、」

なんていう要望もある、、(ガ、ガゾウの色!?!?)

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

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

 

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

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

 

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

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

 

 

発表内容の一部

 

 

ラスター画像とベクター画像の違い

 

 

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

 

◦1つのファイルでRetina対応

 

先ほどあったように、端末種類の増加などに伴い

用意すべき画像の種類も増えました!

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

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

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

 

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

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

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

これがSEOの対策にも繋がり、、

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

 

 

◦css等で編集可能

 

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

ここに関しては今回SVGを知らなかったエンジニアから

かなり良い反応がありましたw

物自体がXMLベースということもあり、

画像がコードから編集可能なのです!!!

これが冒頭にもあったように、お客さんの要望や、

仕様に柔軟に対応出来るということになります。

 

 

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

 

SVGはその特性からアニメーションとの相性が良く、

Web技術であるCSS、JavaScriptを使って動きをつけたりぼかしをつけたり

なんてことも出来てしまうんですね!

 

 

ここでたかさんの発表の紹介は終えますが、ビジネス側の人も

参加してくれている中でのこのたかさんの発表の中で再認識出来たのは、

当たり前ですがやはりユーザー側により近い人からすると

「見た目」は非常に重要なものであるということです!

 

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

変わりばえの小ささ細かさを知っていたり、

その変更からビジネスへのインパクトの大きさを感じなかったとしても、

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

見た目でわかりやすく感じやすいということは

そこから出る反応も大きいわけですね。

 

エンジニアがどういう選択を取るにしろ、

その違いが確実にあるということを認識出来ているだけで

違うのだろうなという少し本質的なことも学ぶことが出来た、

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

 

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

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

 

 

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

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

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

 

 

拍手で勉強会を終えるエンジニアたち

 

 

如何でしょうか?

Tres全員に言えることですが、みんな本当に学習意欲があり

スキルアップすることを純粋に楽しんでいます✨

次回は明後日1月19日に開催し、エンジニア2名が登壇予定となっています!

ちなみにさらっと予告すると、

  • Watson Conversation (藤原)
  • 音楽が人体に与える影響についての調査と考察」 (笠)
    副題:趣味のお話(クラシック音楽とは?オススメする理由とは?)

 

このようなテーマとなっています!

藤原さんは先月に続き二度目の発表です!

笠さんの話はエンジニアでなくてもとても気になりますね!

今後日テレの 世界一受けたい授業 みたいになるといいな~♬(笑)

インプット・アウトプットが出来る場ってとても大切だと思うので

次回も楽しみです✨またレポートしますね!

いつかわたしも発表者側になれるように頑張ろう(*^▽^*)

 

 

 

Tresエンジニアチームからの求人情報

 

 

Tres InnovationではWebエンジニアを随時募集中です!

業務内容は自社の新サービスのインフラ整備や

パートナー企業様での開発・運用業務などなど多数。

言語は様々なのであなたの経験に沿って適した業務をご提案させて頂きます!

就職活動をされている方、転職を考えている方、高みを目指している方、、

気になった方は気軽にご連絡ください☺詳細は下記にて🌷

 

 

 

 

 

 

 

 

 

この記事を書いた人

I hope share!この記事をシェアする