zackey推し

プログラミングとか色々書いてきます

【登壇・LT】builderscon tokyo 2018(2日目)でまだ見ぬ登壇者やLT希望者の背中押してきた(押せたかな・・・?)

絶対登壇させるマン・・・

をスライド内で登場させた者です。
みなさんにインパクトを与えられたようで、
大変満足です。

改めまして、builderscon tokyo 2018へ参加された

  • スタッフのみなさん
  • 参加者のみなさん
  • 登壇・LTされたみなさん

本当にお疲れ様でした。自分はbuilderscon初参加でしたが、
あんな暖かい・エモい雰囲気と感じた大人数のカンファレスは初めてです。

スタッフのみなさんは当然、
参加者のみなさんもリスナーとして盛り上げていただいていたからこそ、
あのようなカンファレンスだったんだな・・・と感じたのが正直な感想です!

さて、ではリスナーとして参加したセッションとLT発表した際の感想書いてきますね。

その前に・・・

buildersconって?

概要

こちらが公式サイトです。

builderscon.io

サイトにカンファの目的が記載されていますが、
ざっくりと概要だけ触れておきます。

  • 「知らなかった、を聞く」をテーマとした技術者の祭典
  • 言語や技術の縛りなく、技術者達にワクワクさせるような体験をシェアする

Call For Proposals(通称:cfp)

この仕組み、いいなと感じましたのでシェアします。

builderscon tokyo 2018 - Call For Proposals

cfpは、自分で自分の登壇・発表する内容(概要)を記載し、
SNS等のシェアや評価内容によって登壇有無が決まる仕組みです。

そのため、
自分のような名前が知られていないようなエンジニアでも登壇の機会を与えてもらえる
という点が非常に良いと思います!

おもひで(写真)

※2018/09/17追記

スタッフさん、ありがさんきゅーです!!

photos.google.com

感想

では感想をば。。。
(実は直前までLT準備してたのでリスナーとして参加したのは2セッションのみです。。。)

【セッション】全てのエンジニアに知ってもらいたいOSの中身について

ariakiさんの発表です。
以下サイトに概要・スライドも載っています。

builderscon.io

以下の点が良いと感じましたので、1つずつ落とし込んで話していきます。

導入

昨今、Webアプリもクラウド・コンテナ上でデプロイすることが多く(FaaSのこともあり)、
あまりサーバOSをインストール&意識したことがあるか、
というような問いかけから始まりました。

確かに最近OS意識してないという共感を得た後、
OSの仕組みについての話にシフトしていくあたり、
リスナーの興味を引くのがうまいなぁ・・・と感じました。

システムコールについての説明

と、普段自分たちが書いているプログラムから、
どのような流れでOSの制御までにたどり着くのかというのが、
実際のソース+図解で解説いただき、すっと頭の中にイメージが沸きました。

スライドのデザイン

毎回思うんだが、ariakiさんのデザイン良い。
もちろん図解は当然なんだが、以下(スライドの最後あたり)とか、
素材どこから入手しているんだろう・・・ということがすごくきになる・・・。

今度教えてもらいましょう!

全体的に

OSの仕組みを読み解きたい!という気持ちになりました。
ただ、やはりスキルチェンジ中の身としては、
Rails周り以外の勉強時間はあまり割けないので、
またの機会に・・・orz

【セッション】HHVM/Hackで得る問題解決力

ex_takezawaさんの発表です。

builderscon.io

実は・・・このセッションまでの間、
まだLTの準備をしていて、ほとんどリスナーとして、
参加できていませんでした。

さて本題にはいりましょう。

まずは HHVM/Hack ってなんぞや?ってところから・・・

HHVM/Hackとは

こちらの記事が参考になると思われ。

www.infiniteloop.co.jp

ざっくり概要記載すると以下になります。

セッションを経て

自分はPHPerでないのですが、
HackがPHPに静的型付けしたものと聞いてこのセッションに参加しました。

※ C#という静的言語が好きで興味が湧いたのです。

お話は以下のような内容でした。

  • HackってもうPHPじゃない
  • でもPHPerの知識と技術を利用できる強力な言語
  • Hackのドキュメントはまだ発展途上
  • よってHackのソースを読むということができるようになる(強いられる)

静的言語であるC#が好きな自分にとっては、
PHPに興味が湧くようなセッションでした!

あと、リスナーの方は歴戦のPHPerが多かったらしく、
PHPならではの苦労話になるたび、
スピーカーとリスナーのやりとりが発生していたのが、
セッションの良い雰囲気を醸し出していたと思います。

【LT】「登壇やLTを始めてみたい」方の 背中を押してみたい

んで自分のLTです。

speakerdeck.com

cfp~採択までの経緯

最初はLTするつもりなかったんです。
その・・・buildersconってTwitterの言葉借りると、
激つよエンジニアさんが登壇するイメージですし、
自分なんかが登壇・LTもNGじゃないか?
という認識でした。

ただ、このようなやりとりがありまして・・・

それで、それじゃダメ元でcfpしてみるかってなって、
申し込んだら採択していただいて・・・って感じでした。

今回のLTも周りの方に背中を押していただいたおかげで出られた感じです。

LTの内容と感想

登壇したいけどいまいち踏み切れない・・・
という気持ちは自分も体験したことなので、
そういった方の気持ち(背中)を後押ししたいという考えで、
このスライドと発表を決めました。

ただ、buildersconは有償のカンファレンスというのもあってか、
おそらく登壇されたことがある方が多かったのでしょう。

  • 「登壇やってみたいけど未経験な人手を上げて〜」
  • 「・・・」

という感じでした。。。

※ 当日は自分もテンパってたので、
  もしかしたら挙手していただいた方をスルーしてしまったかも・・・
  そうだったら、大変申し訳なかったですm(._.)m

でも、Twitterの反応を見ていると、
背中を押してあげようとされている方も散見できたので、
伝えたいことは伝わったかな・・・と感じました。

本スライドに共感していただいた方は、
登壇経験者の方は背中を押してあげる、
未経験者の方は背中を押される、

を実践していただけるとありがたいです!

あとこちらの勉強会で登壇を応援するような勉強会をやってますので、
機会があれば参加(ポチ- してくださいね!

engineers.connpass.com

宣伝(お世話になった資料)

最後に毎度(今回も)、スライド作成のために参考にさせていただいている資料系のリンクを貼っておきます。
もし興味が湧きましたら閲覧、スライド作成の際にご活用いただければと思います。

おわり

来年は登壇でcfpしよう。

【Mac】WindowsユーザーがやっておきたいMacの初期設定

はじめて業務でMacを使うこととなり、かなりテンションが上がっている状態なのです。
が、Windowsユーザーからすると、初期状態だと使いにくいということで、とりまやっておきたい初期設定を以下に書き出していきます。

※思いつき次第で随時更新予定です。

マウス・トラックパッド

スクロール

初期状態だと上下逆?に(下へスワイプすると上へ、上へスワイプすると下へ)スクロールしてしまうんですよね。
そのため、以下の設定を行うことをおすすめします。

www.haranomachi.com

キーボード

ライブ変換

Macはキーボード入力内容から自動予測&変換を行なってくれます。ただ、それが人によっては煩わしいという方もいらっしゃるのかなと。

※自分は使いこなすことができてない状態です><

ライブ変換は以下でオフできます。
sbapp.net

英字キーボード

「は?」ってなるかもですが、開発現場によっては英字キーボードを使うことも無きにしも非ず?ではないでしょうか。

初期状態ですと、大多数の方が日本語(かな)入力と半角英数字切り替えがしにくいという問題にぶち当たります。

この点を解消すべく、以下の対処を行いましょう。

www.ringo-bito.com

Vim

vimの設定いるん?エディタでええやん。」って方もいるかと思いますが、viよりか高機能ですし、さくっとファイル編集できるんで、割と重宝するかと。

※あと、Vim使いこなせるとなんとなく激つよエンジニアっぽ(ry

Vimを使うまでには以下の導入手順を踏む必要があります。

  • Command Line Tools for Xcodeのインストール
  • Homebrewのインストール
  • Vimのインストール
  • Vimの簡単な初期設定

インストール

必要な手順まとめてくれてました。大変ありがたいですしおす(ry

blog.otsukasatoshi.com

blog.otsukasatoshi.com

初期設定

vimの設定は~/.vimrcに記述します。
初期設定は以下記事を参考に必要なところだけピックアップすると良いかと。

qiita.com

あと、最後にsource ~/.vimrcで設定内容を再読み込みした方がよいかな・・・?

※再読み込みは賛否両論あるみたいなので、別途調べる必要あるかもです。。。

おわり

参考リンク集の記事になってしまった感がパナイです><
参考にされた方は、元記事のほうをブクマするなりいいね!してあげてくださいね!

自分も他の人に価値を提供できる記事を増やさんとあかんな。。。
(ハナホジ-)

【Rails】【備忘録】アセットパイプラインのこと

はじめに

Railsチュートリアルの5章を進めていく中で、
Railsに触れていないとアセットパイプラインあたりのこと忘れてしまいそうなので、
備忘録として概要をブログに記述します。

railstutorial.jp

備忘録

アセットディレクト

静的ファイルを目的別に分類するディレクトリ。
以下デフォルト3つ。

  • app/assets:アプリケーション用
  • lib/assets:ライブラリ用
  • vendor/assetsサードパーティ

主に画像、JavaScriptCSSのサブディレクトリが用意されている。

マニフェストファイル

アセット(※)ファイルを1つのファイルにまとめる指示を記述する。
実際に処理を実施するのは、「Sprockets」と呼ばれるgem。

※ JavaScriptCSSのみ

rails new 〜した際に作成される、 〜/app/assets/stylesheets/application.cssが該当する。

/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS and SCSS file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS/SCSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *
 *= require_tree .
 *= require_self
 */

上記のうち、以下の記述が記述内容に相当する。

  • *= require_tree .
  • *= require_self

プリプロセッサエンジン

マニフェストファイルを読み取って、
アセットファイルをくっつけてくれるやつ・・・
って解釈であっているかな・・・?

おわり(ざっくりとした解釈)

んん...とりあえず特徴まとめたけど、
簡単な一言二言ぐらいに凝縮して腹落ちさせておきたい。

なんで、とりあえず以下で覚えておくこととします。

  • アセットパイプラインはデプロイ(てか実行時)にJS,CSSを最適化してくれるやつ
  • 勝手にバンドル(最小化って言えばいいかな)もしてくれるやつ

詳しいことは以下読んだ方がRailsチュートリアルより腹落ちしますね。
(ありがたく星つけさせていただきました。)

rails.hatenadiary.jp

いわゆるこれが最近はやりのWebpackとかに置き換えられているのかな・・・?
このあたりはまだまだ調べないとあかんな・・・

以上です〜

【JavaScript】jQueryって遅い??不要??って疑問に対する自分なりの答え

はじめに

2017年12月頃から業務でWeb開発を始めてから、
セレクタ「$」らくやわ〜と、
なんとなく便利でjQueryを使ってきたけど、

という意見をTwitterやQiitaで拝見したのですが、
知識の疎い自分には「??」な感じでした。

そのため、今回は上記の意見についてちょっと調べて、
自分なりに腹落ちさせた答えを出してみました。

お願い

色々な記事を拝見し、自分なりに解釈した内容を記述しておりますので、
間違い等ありましたら、ご指摘いただけると助かります。
m(_ _)m

調査過程

この疑問を解消するためググったところ、以下のQiita記事がHITしました。

qiita.com

コメント欄を見ると、かなり議論されていますね。。。
自分なりにかなりざっくり概要をまとめてみると、

  • jQueryはブラウザ毎に仕様が異なる時代に、コードを統一かつ量を減らす目的で作られたよ
  • jQueryが遅いのは、append()でのDOM操作を都度行った際にブラウザレンダリングが発生するためだよ(と思われる)
    • 逆に要素をまとめてappend()してしまえば速度低下を抑えられるよ
  • コンポーネント(要素)ベースで操作可能なライブラリ(React,Vue.jsなど)台頭によりわざわざDOM(jQuery)での操作不要なんじゃない?

ブラウザレンダリング は、以下参照。

www.yoheim.net

要素に参照するタイミングでレンダリングが発生するっぽいですね・・・

あと、jQueryに関係なく、DOM操作を行うタイミングでレンダリングが発生するあたり、
Qiita記事内の「append()してしまえば速度低下を抑えられる」は納得できますね。

自分なりの答え

結果、以下のような答えとなりました。

jQueryは遅い??

  • 都度append()等でDOM操作を行う度、レンダリングもその都度発生するためだよ
    • append()の使用頻度を極力減らしたりして、DOM操作のタイミングを減らそうね

jQueryはもう不要??

  • IE8のようなブラウザも対象だったら使った方がよいね
    • 対象外であれば、使っても使わなくてもいいかもね

って感じですね。
かの爆速表示で有名なdev.toでも、jQuery使っているみたいだし、
(用途までは調べてないですが・・・)

dev.to/app/assets/javascripts at master · thepracticaldev/dev.to · GitHub

ほんとに使い方次第で速度が変わるんだろうな・・・

おわり

答えが出せて、概ねすっきりしました。
プライベートではデモの時みたいな時以外、
jQueryは極力使用せず(お世話にならず)、 コード書いてみようかなと思いますが、
実業務だったら、開発対象のブラウザにIE8を含められていたら、
コード量を鑑みてjQueryを採用・・・てな感じですかね。

あと、DOM操作を行う場合、レンダリングを考慮し、
極力DOM操作のタイミングを減らすような工夫をしていこうかな。

それにしてもブラウザレンダリング・・・

知らなかったのはエンジニアとしてまだまだだなと思いましたが、
まあ、今回知れたってことでよしとしようかな・・・

【登壇・LT】社内勉強会で「ゼロからはじめるアウトプット」をLTさせていただきました(2018/07/28)

本記事は社内勉強会のLT時に発表させていただいた
「ゼロからはじめるアウトプット」という題名のスライドについて、
話していきたいと思います!

今回のスライド

今回のスライドはこちらになります。

speakerdeck.com

概要

内容はざっくりと...

  • 以下がターゲット
    アウトプットに興味あるけど・・・
    • まだ実行できていない方
    • どう時間を割けばよいかわからない方
  • 過去(アウトプット前の自分)
  • 動機(アウトプットまでのきっかけ)
  • 方法(ネタの考え方や時間の使い方)
  • 結果(所感と副産物)

てな感じとなってます。

思い

このスライドは、まだアウトプット未経験の方に対して、
アウトプットする!という気持ちにさせたいが為につくりました。

自分はエンジニア9年目となりますが、
その約8年間はSEとして「調整やその場限りの知識や技術」でやりくりすることが多く、
世の中に出ているエンジニアさんと比べ、
汎用的な知識や技術の差を未だに感じています。

そのため、
「自分がアウトプットするなんておこがましい、無駄」という気持ちが強く、
結果、何も行動できない状態にありました。

しかし、JXUGのみなさんが開いてくださった、
過去、外部勉強会と懇親会に参加させていただき、

  • 勉強になった → 何かを返したい
  • 楽しそう!こういった活動に自分も入りたい!

という気持ちになり、現在のようにQiitaやポートフォリオ
あと、こんなポエムを書き始めた次第です。
(恥)

でもアウトプットし始めたことによるメリットが多いです。

  • アウトプットしたことにより・・・
    • 知識の定着化に繋がる
    • 誰かやコミュニティのためとなる
    • 登壇者の方とお話しやすくなる
    • 間違った知識は指摘してくださる
    • 勉強会やTwitterで知り合った方と繋がる
      • 知見が広がる(お互いにとってプラス)
    • アウトプットされた方へ感謝する気持ちができる
    • いいね!とかされると励みになる
  • なにより楽しい

なので、自分と同じような立場の方がこの記事をみてくださって、
「自分もアウトプットしよう!」気持ちになってくださった方がいらっしゃいましたら、

  1. 自分のナレッジの中であまり記事化されてないことを確認
  2. Qiitaやはてなブログ、noteでアウトプット

をしてみてください。

最初は記事書くのも(誰にでもわかる言葉に置き換えたりする為)大変かつ、
すぐに上記のようなメリットを感じられるか、
わかりませんが、
続けていれば絶対実を結びます!

おわり

初めてこんなポエム書きました・・・
(Qiitaに書こうとも思いましたが、あそこに書くにはふさわしくない内容だったので、ブログに書きました)

見返すと恥ずかしいですが、
自分と同じ立場の方がアウトプットし始めてくださると、
かなり嬉しいです!

さて、再来週は社外向けのLT(10分)です・・・
まだ何にするか決めかねてます(泣
まあ、でも10分なんで、伝えられることは限られてます!

自分が伝えたい+為になる知識や技術を
わかりやすい感じでスライド+デモという形でLTしようかな・・・

また、社外向けLTが終わりましたら、
スライドの公開および内容紹介の記事を書かせていただきます!
それでは!

【登壇・LT】フロントもくもく会#11 で「OpenLayersで始める地図の操作」をLTさせていただきました(2018/07/21)

恵比寿駅近辺のamuで行われた、
フロントもくもく会#11でLTさせていただきました!

html5ebisu.connpass.com

社内勉強会での登壇経験はあるのですが、
社外は初だったので、とても緊張しました…

フロントもくもく会って?

参加させていただいているフロントもくもく会について、
軽く説明させていただきます!

html5ebisu.connpass.com

上記コミュニティの方が、amuという施設を貸し切り状態にし、
土曜の10:00〜13:00に開催されている、もくもく会となります。

-未来を編む- amu(あむ) | 恵比寿 amuのメディアサイト

Wi-Fi環境を用意していただいてますし、 いい感じで太陽光が差し込んで、とても集中できる雰囲気でした!

また、機会あれば参加させていただここうかなと思います。

今回のスライド

今回発表したスライドは「OpenLayersで始める地図の操作」というものです。

speakerdeck.com

概要

内容はざっくりと…

  • OpenLayersとは地図表示用JSライブラリ
  • GoogleMapsの料金体系変更について軽く触れる
  • Google MapsOpenLayersの対比
  • codepenを用いた簡単なデモ

な感じです。

デモについて

最後の方のデモについてはスライドにURL貼り付けてありますが、
こちらからもアクセスできるようにしておきます!

See the Pen OpenLayers5-20180721LT-Demo by zucky (@zucky_zakizaki) on CodePen.

ただし、GoogleMapsを表示させるには、
ご自分が発行されたAPIKeyを指定する必要があります。
(以下の部分)

    <!-- {YOURKEY}へ自分のGoogleMapApiKeyを設定してください -->
    <script src="https://maps.googleapis.com/maps/api/js?key={YOURKEY}"></script>

APIKeyの取得方法については、以下の記事が参考になります。
ぜひ試してみてください!

nendeb.com

参考にさせていただいたスライド

今回は、Twitterで拡散されていた以下のスライドを参考に作らせていただきました。

speakerdeck.com

2018/07/14(土)に行われた、 以下Rails系のイベントで発表されたみたいです。

Rails Developers Meetup 2018 Day 3 Extreme|IT勉強会ならTECH PLAY[テックプレイ]

Keynoteのテーマ「Azusa」をベースとし、 色や吹き出しの使い方などをわかりやすくシンプルに書かれていて、
これは・・・と思い、参考にさせていただきました。
(感謝しかありません、感謝感謝・・・)

自分と同じく、デザインに自身がないかたには、
必ず参考になるスライドと思いますので、
機会あれば一読してみてください!

感想と締め

結論、LTやってみてよかったです!

LTをきっかけに、もくもく会用のSlackチャンネルにて、

  • OpenLayersって初めて知った!
  • 既出かもだけど、トイレ用地図とかいいよね
  • 軽く実装できるから、実案件でも使ったみたい

のような感想をいただいたり、議論があり、
自分が発表した内容を題材にアイディアを深堀できるのが、
アイディアソンっぽくて、非常に楽しめました!

発表のネタ考えたり、デモ環境作るのも大変だけど、
こういった話ができると新たなアイディアを思いついたり、
知見が広がるので、これからはもっと登壇やLTを増やしていきたい・・・
と思いました。

近々、社内で本スライドの再演+LTと、社外でのLTがあるので、
またスライド作ったら公開させていただきます!
それでは!

【Ruby】devise学習記録 (01)

gem deviseに関しての学習記録です。

といっても、本記事にはリポジトリと学んだポイントをまとめるだけです。
学習記録はリポジトリReadme.md参照ください。

目的

deviseって、使い勝手良いのですが、
やはり実践導入するには裏の仕組みも理解した方が良いと思い、
この記事を書き始めました。

ただ、しっかり理解して進めていきたいため、
細く長く継続的にdeviseを理解していきたいと思います。

リポジトリ

こちらです。

github.com

(この埋め込み、Qiitaでも使用したいですね。)

今回の学習

今回学習したところは「42fab5ee735cfcd381b75b87fabadf8f48dc165f」まで。
学習ポイントは以下です。

  • deviseの導入
  • User model / view / controllerの作成

次回の学習

以下を予定しています。

  • 日本語リソースの導入
  • ルーティング設定