ざきの学習帳(旧 zackey推し )

日々の学びを書きます

【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時に発表させていただいた
「ゼロからはじめるアウトプット」という題名のスライドについて、
話していきたいと思います!

今回のスライド

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

概要

内容はざっくりと...

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

てな感じとなってます。

思い

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

自分はエンジニア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の作成

次回の学習

以下を予定しています。

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