FrontendNagoya#8
2019年1月12 Frontend Nagoya #8 に参加してきました！今回は5名のLTと、Brandon Pittman （ブランドン・ピットマン）さんによるメインセッション「Part1 English for Developers」「Part2 Gridsome: Vueで静的サイトを作る」でした。私には Part2 は難しかったので Part1 についてはしっかりまとめておこうと思います。
まずはライトニングトークから始まりました。Twitter などのハッシュタグ「#frontend758」で探して見つかった一般公開されているスライドのみ、リンクをつけておきます。一覧はこちらです。
- 加藤 茂吉さん「vwの計算を自動化して、直感的に使う」
- kaaveさん「慚愧 〜 2018年、踏み抜いた地雷群」
- ナバロライさん「DockerでAngular開発」
- 石井将文さん「新人教育のための、右脳で理解する愉快なCSSセレクタ達」
- 宮内元さん「位置データのビジュアライズ事情」
LT感想
加藤 茂吉さん 「vwの計算を自動化して、直感的に使う」では、下記についてお話しいただきました。レスポンシブでよくある悩みでは、頷ける話もありました。今まであまりvwを使っていなかったのでこれからは "vw計算自動化" をとり入れていこうと思いました。
- vwとは何か？
- レスポンシブでよくある悩みはvwで解決できる
- vwを使う場合もデザインカンプの値をそのまま指定できるようにvwの計算をscssのfunctionで自動化しましょう
- font-sizeが10px以下にならないように注意しましょう
font-size のレスポンシブ化については、FRONTEND CONFERENCE 2018 で便利なツールやライブラリを紹介していただいているのでこちらもそろそろ活用していこうと思います。
ViewportScaler(ブラウザ版)：https://ixkaito.github.io/viewportscaler/
ViewportScaler(Scss版)：https://github.com/ixkaito/viewportscale
kaaveさん「慚愧 〜 2018年、踏み抜いた地雷群」では、iOS safari のプライベートモードでページを表示すると画面が真っ白になった話や、Nodev10バージョンアップ時に Node の依存性質でハマった話、vh指定するとiphone/ipadのタッチバー？も高さに含まれる?!、という話などなど。全体的に自分も気をつけようと思えるお話が多かったです。こういうハマったことについて共有していただけるのは大変ありがたいなと思います。
また、PostCSS についても少し聞く事ができました。次世代CSSと言われている PostCSS のメリットには、オートプリフェクサー、使う機能を絞れる、SCSSよりシンプルに使えるなどあるようです。ただ、ネストできるようになるかはまだわからないみたいです...。
ナバロライさん「DockerでAngular開発」では、ローカルでAngular開発をしようとした時にローカルが汚れないようにDockerを導入しましたという話でした。私は以下の言葉についての知識がなかったのでここにメモしておきます。
【Angular（アンギュラー）】 → Googleによって開発されているJavaScriptフレームワーク。サーバーと連携する機能もあるので、WEBアプリ開発では重宝されている。（参考元：侍エンジニア塾）
【Netlify（ネトリファイ）】 → 静的コンテンツをホスティングしてくれるWebサービス。GitHub・GitLab ・Bitbucketのリポジトリから自動的にデプロイを行える。（引用元：Qookie Tech）
石井将文さん「新人教育のための、右脳で理解する愉快なCSSセレクタ達」はスライドが見つかりませんでした。LT内容は、CSSでスタイルをつける時にidセレクタを使ったり、タグセレクタを単体指定するなどのCSS設計における基本的な暗黙のルール（←私はこう思っている）を新人に教える時の教え方についてお話ししていたでけました。LTの最後に次回予告をしていたので続きがきになることろです...。
宮内元さん「位置データのビジュアライズ事情」では、WEBで位置データの見せ方について、位置データを扱うJSライブラリ
の紹介、位置データの入手先についてお話しいただきました。国勢調査などのデータが位置情報付きでダウンロードできる e-stat という便利なサイトについては、YouTueで入手方法をあげてくれています（→ e-StatからShapeファイルをダウンロードする）。最近ではユーザーの手で地図を作っていく OpenstreetMap が作られました。今後は位置情報を利用したサービスがより増えていくかもしれません。
メインセッション 〜 English for Developers 〜
メインセッションは、Brandon Pittman （ブランドン・ピットマン）さんによる「Part1 English for Developers」と「Part2 Gridsome: Vueで静的サイトを作る」でした。Part2 はついていくのが難しかったので Part1 についてまとめていきますっ！
内容は、開発を進めていく中で、日本人からしたら同じような意味で捉えがちな微妙な英語について、なぜその単語が使われたかの経緯も含めて解説してくださいました！英語の授業を受けているようで楽しかったです！
※ 以下、あとでスライド共有していただけるというお話でしたが、スライドを見つけられていないので「あとでスライド見て復習しよう」と思ってメモをしていないところは抜けています...。
send / dispatch
- send → 送る（ただ送る時に使う）
- dispatch → 〇〇してきて（何かデータを送ってさらに処理をしてきて欲しい時に使う）
- fetch → そのデータを取ってきて
call / invoke
全く同じ意味。「呼び出す」という意味。
get / fetch
- get → すぐそこのものを取ってくる
- fetch → 遠くのものを取ってくる
pass / inject
- pass → 渡す（ただ渡す時に使う）
- inject → 上から下まで深いところまで入れること
destroy / delete
- destroy → 全部消す
- delete → 一つ消す
gitについて
- 【git】という言葉は、イギリス英語では「バカ」という意味になる。その経緯や詳細については Wiki に載っていました。git を使っている人はぜひ読んで見てください！
- 【stash】 隠す。
- 【daemon】 考えなくても勝手に何かをするもの。遺伝子とか細胞とかのことを示したりもする。
その他面白い単語
- 【YAGNI】直訳は「今は要らないけど後で必要になる。」という感じ。「You Aren't Going to Need it.」の略。不必要なコードに対して使う。
- 【code smell】 ダメなコード
- 【yak shaving】意味のないこと
- 【grok】「よくわかる」という意味。誰かに説明を受けた時初めは分からなかったけどしっかり理解できた時に「grok」と言う。
最後に
LTはLTと言いつつ一つほぼ15分ほどで、全てが濃いセッションになっていました。新たな発見がたくさんあった中に、疑問もたくさんでてきてついていけなかったところもありましたが勉強になる数時間となりました。
とりあえずは、docker と font-sizeの自動計算化 辺りが直ぐに仕事に取り入れられるところだと思うので明日から挑戦してみたいと思います。メインセッションでは、普段使っている git の意味が「バカ」だったのは衝撃でした。git の作成者である Linus Torvalds さんは大変謙虚な方だったのかもしれません。私は、英単語を覚えるのが大変に大変に苦手です（致命的かもしれない...）。しかし、なぜその英単語が使われているか？というところまで意識していくと理解が深まりより覚えやすくなるかなと思いました。これからは「この単語覚えずらいなぁ」と感じたら「なぜ？」まで調べる癖をつけて記憶を定着させていきたいです。
FrontendNagoyaは、発表者と聴衆の距離が近く、さらに「やりたい！」と声をあげれば発表できるいい意味で固すぎないイベントだと感じています（主催者の人柄が出てる？(*´ー｀*)）。名古屋を中心としたフロントエンドを嗜む人達が集まって、自分が皆んなに共有したいことを発表したり、交流したり、モクモクと勉強したりできる場が近くにあるのはとても素敵な事だなと思います。
