肝心なのは「実行力！」第5回社内勉強会開催レポート

こんばんは！

今週は台風の到来もあり大変でしたが今日は一転して快晴！34℃もありました(;´･ω･)

暑さに負けないようみなさんも気を付けてくださいね！

そして今日は金曜日！世間は明日からお盆休みですね🎐

弊社は15日まで夏季休暇をいただき、16日から通常営業いたします。

休暇中いただいた応募やメッセージなどは対応が遅れますが、ご了承いただけますと幸いですm(_ _)m

さてさて、先日もう定番化している勉強会が開催されました！今回で5回目！

今回の勉強会は発表者3名、テーマはこちらです！

・ギタリストランキングから教訓を得る　(高野)

・webの技術と身近なもの　(土井内)

・BEMについて　(藤原)

下の2つはエンジニアの2人らしいテーマだと思いますけど、一番上、、ギタリスト？

ちょっと気になるので発表内容も簡単にご紹介していきますね！

ギタリストランキングから教訓を得る

タイトルだけを見るとどんな教訓が得られるんだ、と思いますよね。

名言とか言ってそうなギタリストならともかく、ギタリストのランキングを見て何が得られるんだと。

まず、ギタリストランキングとは歴史上最も偉大な100人のギタリストをランキング化したもので、もちろんその技術や、世間に与えた影響なども審査基準となっていて、著名なギタリストや音楽関係者も審査に参加しています。

その中で高野さんが注目するギタリストをピックアップして紹介してくれました。

トム・モレロ（Rage Against The Machine）※ギタリストランキング：26位

スクラッチ奏法やわざとノイズを出す奏法など、以前ではあり得なかった音を表現した。

ちなみにハーバード大学を首席で卒業している。

エディ・ヴァンヘイレン（Van Halen）※ギタリストランキング：8位

「ライトハンド奏法」を世に拡めた。また、弦を弾くのではなく、押す形でピアノのように演奏した。

ギターを担当していた兄がドラムに変更になり、仕方なく始めたことがギタリストになったきっかけ。

ジミ・ヘンドリックス ※ギタリストランキング：1位！

ブルースロックの第一人者。ギターを燃やしたり、歯ギターなどのパフォーマンスでも有名。

「音楽でしか世の中は変わらない」と言い切ってしまうほどの熱量を持っていた。

共通点

そんなたくさんの人々を魅了する彼らに共通するものは何か。

彼らは発明者ではありませんが、それを広めた人物でした。

アイディアを考えた人よりも、実行し、拡散した人が評価されていたのです。

それはギタリストではなくビジネスの世界でも同じ。

ということで、彼らから得られる教訓は「実行力が大事！」ということ。

webの技術と身近なもの

今回は「日常にて使われているIT技術の紹介」ではなく「IT技術とそれ以外の部分の思想の共通性」を探るということで、「疎結合」について紹介してもらいました！

「疎結合」とは？

システムの構築要素間の結びつきや互いの依存関係、関連関係などが弱く、各々の独立性が高いこと。

逆に要素間の結びつきが強く独立性が低い状態のことは「密結合」という。

インターフェースが決まっている（最低限のルール）

普段の生活の中で例を挙げると家電製品とコンセントの関係も疎結合です。

どの家電製品でもコンセントは同じだと問題なく、電力を受け取る側と電力を渡す側はお互いの働きの内容を詳しく知らなくても成り立ちます。

エンジニア向きの一つの例として、プログラミングで例を挙げると、

商品の計算をするための処理があるとします。

消費税の計算を扱う部分を全て「生の数字」で計算をすれば、変更が発生した時後で全ての生の数字の部分を変える必要が出てくるなど、大変なコストがかかる、、、

エンジニアをやっていれば当たり前ですが、この一つの解として使えるのが「変数を使って値を管理する」というもの！

変数自体は当たり前のように使われるものですが、実はこれも一つの疎結合です。

一つの変数に使用したい値を入れておくことで(今回でいうと消費税)、何度その値を格納した変数をプログラムの中で使用していようと、変更するところは変数に数字を入れる部分のみ！

これが疎結合というもので、それぞれの結びつきが弱く独立性が高いので中身の変更に強い状態になっています！

疎結合が崩されると日常生活で困る

例えば、iPhoneのイヤホンジャックの形が変わったことにより、今まで使っていたイヤホンが使えなくなったり、アダプタが必要になったり。

充電器も、iPhoneとiPhoneのモバイルバッテリーでは違うのでそれぞれのコードが必要だったり、これだけでも疎結合でないモノは不便といった印象が強いですよね。

疎結合の思想が業務上で生かせること

・デザイナー（コーディング含む）とサーバーエンジニアの分業

・分業する際にデザイナーが知っておくと良い知識が3つ

　①何の処理？（get?post?）

　②URLの向きは？（もしくはファイル名）

　③渡すべき情報は？（ユーザー名、アドレスなど）

この3つの擦り合わせが行われていれば、他に変更があったりどんなものが作られようが自分の作業に集中できます。

まとめ

・何かを効率的にしたい場合や変更に強いものを作りたい時に疎結合という考え方を今後ひとつの材料にすると良い

・実は「技術で扱われている考え方や思想」は、身の回りのことにも共通点がある

・これらを活かせば「資料の管理の仕方」や「情報のストック」、「ビジネスの仕組み作り」にも転用できたりする

BEMについて

「BEM」とは？

・CSSの命名規則の一種

・Block（かたまり）Element（要素）Modifier（状態）の略

例えば複数人で作業していた場合に、CSSのクラス名が競合するといった状況をBEMを使うことで避けることができます。

Block

・BlockはBEM設計におけるパーツ単位

具体的な名前よりも抽象的な名前の方が、後々再利用できるパターンが多い。

例えば、bourbon-listよりもwhiskey-listの方がバーボンにもスコッチにも使うことができるリストになりっます。

しかし、競合を避けるためにあえて具体的な名前を付ける場合もあります。

Element

・ElementはBlockの中にのみ存在できる要素

・Elememtは1階層のみに留めるのが理想

例えば、whiskey-listのブロックに対して、Elementはwhiskey-list_textやElementはwhiskey-listphotoになります。

whiskey-listphotocaptionはNGなので、この場合はwhiskey-photoを定義してから、whiskey-photo_captionにします。

Modifier

・BlockやElementを状態に応じてカスタマイズする場合に使用する

BEMとは少し話が逸れますが、ボタンの色を緑にしたいからといって、button—greenと命名するのは避けた方が賢明です。

この場合はbutton—primaryやbutton—infoなどとします。

なぜなら、この方が急な変更要望にも柔軟に対応ができるから。

まとめ

BEMは業務の全てを解決するわけではなく、CSS設計における根本的な解決でもない。

ですが、BEMを知っておくことで少なくともデスマーチを回避する武器になります。

発表内容は以上です！

疎結合やBEMなどエンジニアなら普段から使っていけそうな情報はもちろん、

ギタリストのランキングなんて好きな人しか触れないようなことからも何かを得ようとする、

その学ぶ姿勢には感服しました！Tres Innovationのエンジニアは流石です✨

勉強会の後は毎回1名をターゲットに質問攻めする一問一答のコーナー！

今回はターゲットになった某さんの意向により内容は載せられませんが、

普段たくさん会話していても知らない面ってたくさんあるし、仕事に対する考え以外にも

土日の過ごし方だったり恋愛観などのプライベートも知ることが出来、大変興味深かったです😎

そして華金ならではのまったりした座談会。

今回は酒豪が少なかったため、しっぽりと飲みながら語らうまったりした会となりました( ◠‿◠ )

このような感じで第5回の勉強会は終了しました！

普段の業務をこなしながら題材を考え、資料を作成し、発表してくれるメンバーには

ほんとうに頭が上がらないです、、！いつも凄いなぁと思いながら聴講しています。

まだ5回ですが既にイベントとして定着し、大事なインプットとアウトプットの場となっています！

1番目の発表で肝心なのは実行力だと言われていましたが、実際に最近弊社で

ハッカソンを行っていたり、社内イベントが向上心の維持にも繋がっていると思います！

そんなTres Innovationでは新しいメンバーを募集しています！

底なしの向上心を持つ私たちと一緒に更なる高みを目指しませんか？

好きなことには一直線！そんなあなたをお待ちしています✨

.