1. TOP
  2. BLOG
  3. EVENT
  4. 『Quine』&『フロントエンド初心者が各種ツールについて調べてみた』&『SVGスプライトを使いこなそう』 // 第20回社内勉強会 #sa_study

『Quine』&『フロントエンド初心者が各種ツールについて調べてみた』&『SVGスプライトを使いこなそう』 // 第20回社内勉強会 #sa_study

2017.03.06


こんにちは。サーバーサイドエンジニアのなっちゃんです。好きな麻雀の役は純全帯三色です。
さて、今回の社内勉強会は3本立てでお送りいたします。(私も2番目に登壇してますよ!╭( ・ㅂ・)و )

Lightning Talks

  • 『役に立ちそうだけど、やっぱり役に立たなそうな技術Quine』 by 遠藤 勝也
  • 『フロントエンド初心者が各種ツールについて調べてみた』 by Kawakami Natsumi
  • 『SVGスプライトを使いこなそう』by 徳永 優子

まずは毎度おなじみ遠藤くんの発表です。

役に立ちそうだけど、やっぱり役に立たなそうな技術Quine

クワイン(英: Quine)は、コンピュータプログラムの一種で、自身のソースコードと完全に同じ文字列を出力するプログラムである。娯楽として、プログラマが任意のプログラミング言語での最短クワインを書くことがある。プログラムを出力するプログラムだと見れば、クワインのプログラミングはメタプログラミングの一種である。

Quine(Wikipedia)

自分自身を文字列として再構成し、その文字列を出力するプログラム…なんだかとっても哲学的ですね!

(実際にクワインという名称は、ウィラード・ヴァン・オーマン・クワインという哲学者に由来するそうです。)
とても難解ですが、パズル的な感覚で楽しめそうです。

因みに遠藤くんと私は同じ平成4年生まれチームなのですが、時折垣間見える彼のマニアックな探究心はとても素敵だと思います。

img_2825

余談


そんな遠藤くんから、勉強会後にこんなものを教えてもらいました。

openFramewrorks – addonを使う 2:reacTIVision + ofxTUIO でタンジブルなインタフェイスを作る

テーブルの上に箱のようなモノを配置することによって、演奏できちゃうそうです。見た目も音もかっこいい!
これ自体は2010年頃の技術なのだそうですが、たとえばこの箱を持ってお客様参加型DJとかやったら今流行の「参加型エンターテイメント」とかできちゃいそう…!

イノベーションは既存の物の組み合わせで起こるとは言ったものですが、もしかしたらこういうところに可能性があるのかもしれませんね!


続きまして、わたくしによる発表です。

フロントエンド初心者が各種ツールについて調べてみた

普段は主にサーバーサイド周りを担当している私ですが、最近は案件の都合でフロント周りに携わることが増えてきました。

因みに最近関わった案件で使用したツールはこちらになります。
「React.js + Redux.js + redux-saga + Cordova + ES6 + Babel + OnsenUI + Gulp + Webpack」

…羅列だけ見ると仰々しいですが、これらのほとんどはただのコンパイラーだったりビルドツールだったりするので、そこまで気負う必要はないのかな?と思います。(もちろんそれぞれ奥は深いですが) とはいえ、エラーを吐いた時、知識不足故に何由来か特定できない…という状況が多々あったため、ざっくりと、どのツールがどんなことをしているかくらいは知っておいたほうがいいのかなぁとおもい、今回の発表内容となりました。

img_2827

発表後


「ところでなっちゃんの発表、この記事思いだしたよね」

【翻訳】 2016年にJavaScriptを学んでどう感じたか

-Oh my god no, no one uses jQuery anymore. You should try learning React, it’s 2016.

おいおい冗談だろ。今どきjQueryなんて誰も使ってないよ。君はまずReactを学ぶべきだし、今は2016年だぜ。

(´・ω・`).;:…(´・ω…:.;::..(´・;::: .:.;: サラサラ..

無事死亡。 そりゃまぁ、確かにそこそこの規模のアプリケーションですと私もjQueryではなくReactを使うべきだと思いますが、例えばちょっとしたコーポレートサイトつくるなら十分だと思うんだよなぁ…そんなにダメかなぁjQuery…教えてエロいひと…


気を取り直して、つづいてはマークアップエンジニア、徳永さんによる発表です。

SVGスプライトを使いこなそう

とっても便利なSVG。
ベクターデータなので、Retina対応といった高解像度用の画像を用意する手間も省けますし、CSSで色を変えることができたりと、従来ならば画像を複数用意しなければならなかった箇所も、SVGを使えば画像ひとつで済みます!どんどん使っていきたいですね〜!

img_2829

改めて、社内勉強会のメリット・デメリットについて考える。


デメリット

アルカナ社内勉強会は基本的に、「Webの技術に関する話題」ならなんでもOK!というスタンスです。 殆どの勉強会やミーツアップ等では、同職や同じ技術に興味のある方々が集まると思いますが、このような社内勉強会だと当然、登壇者も参加者もバックグラウンドが異なってきます。 故に、どのような内容で、どのくらいのレベルの話をするか非常に悩ましいです…

メリット

バックグラウンドが異なる人達にとっては、普段だと「この情報は、きっと取るに足らない情報だ」と思いこんでいる情報も、有益な情報に成りうるということ。 実際に今回の勉強会後、「なっちゃんの発表、私にとって、とても役に立ったよ!」と、とても有り難いお言葉をいただきました(嬉)。゚(゚´Д`゚)゚。 ある程度スタンダードな技術になれば、専門外でも耳に入ってきますが、僅かな方向性の流れは、その中にいる方でないとキャッチアップしづらいです。 アプリケーション開発にあたり、それぞれの専門知識まではいかないにしても、ある程度の動向はしっておくべきだと思うので、これらはキャッチアップの分担作業にもなり、効率的だと感じました。 また、社内だと同じプロジェクトにアサインされた際、実際にそれらの技術が使用される可能性が高いので、こちらもメリットですね。

今回ブログを書いてみた所感


%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-11-10-19-56-43 素晴らしき元ネタ様:普段はNOと言える私ですが、厳正なる抽選結果には逆らえませんでした。 何故ならば厳正なら仕方がないからです。 おそらく多くのエンジニアが思うように、日本語よりプログラミングをかきたいと常日頃おもっていますが、普段日本語を書くことが少ないからこそ、こういう機会を大事にしていきたいとおもいます。 日本語書くスピードをあげていきたいです。 ありがとうございました!(*‘ω’ *)(所要時間4日)