タグマネージャのカスタムHTMLで外部JS読み込んだ場合の実行順番を調べてみた
Webエンジニアをやっていると Google Tag Manager に触れる機会ってありませんか？ マーケティング部門から広告タグの相談を受けた り、 タグマネージャから出る謎のJSエラーの調査 を依頼されたりと、今やWebシステムの構成要素としてなくてはならないものとなっています。 一方でエンジニアの管理を離れて自由奔放に運用されたタグマネージャは伏魔殿の様相を呈してくるので、できればお近づ
JavaScript
rel=”preload”を極めるために必要な2種類のプリロード機能
本稿はWebパフォーマンス Advent Calendar 2019の13日目に参加させていただきました。 フロントエンドのパフォーマンスチューニングのシリーズ記事で、今回は2種類のプリロード機能に焦点を当ててリソース読み込みの最適化について解説します。 はじめに まずはブラウザが持つ2種類のプリロード機能をおさらいしましょう。 1つ目はHTMLの仕様として定義されている <link
2019.12.12
SEOの過去・現在・未来、そして心得
ふと過去に執筆した記事を振り返ったのですが、フロントエンドのパフォーマンスの話・bashのプロセス置換・Androidアプリのパフォーマンス・DoS攻撃対策などなど、記事の方向性が毎回バラバラすぎて自分は何の専門なんだろう？と疑問に思えてきました。 まあそれは気にしないとして、今回もご多分に漏れず今までの記事とは全く異なる領域の話です。 話のベースはSEOについてですが、 心得 とか 考え方
【Software Design誌コラボ企画】『“速い”Webアプリケーションの作り方』を開催しました！
弊社テクニカルディレクターの羽山が『Software Design』10月号の特集記事を執筆させていただいたご縁で、 技術評論社様にもご協力いただき開催となったこの企画。 多数の方にご参加いただき、無事開催することができました。 登壇者の皆様、技術評論社の中田さん、 忙しい中参加していただいた皆様、ありがとうございました！ 左から合同会社レッドボックスの小川さん、スパイスファクトリー株式会
2019.10.2
Software Design 2019年10月号「“速い” Webアプリケーションの作り方［フロントエンド編］」に寄稿しました
本日発売のSoftware Design 2019年10月号に私の執筆した記事が掲載されました。 進化の激しいフロントエンドの分野で、パフォーマンスに焦点をあてた特集記事「“速い” Webアプリケーションの作り方［フロントエンド編］」の第2章を担当しています。 フロントエンドのきらびやかさからはあえて一歩離れ、DOM/CSSOMの構築やレンダリングブロックの観点から、ブラウザの動作の仕
2019.9.18
『はじめてのVue.jsハンズオン』を開催しました！
先日開催した『はじめてのVue.jsハンズオン』の開催レポートです。 14名の方にご参加いただき『はじめてのVue.jsハンズオン』勉強会を開催いたしました。 参加いただいた皆様、ありがとうございました。 今回残念ながら参加できなかった方も雰囲気だけでも感じていただけたらと思います！ 会場は弊社６Fのセミナールームです。当日は直前まで中国向けの越境ECセ
Vue.jsの勉強会開催のお知らせ
2019/7/10(水)にVue.js未経験者・初心者の方を対象としたVue.jsの勉強会を開くことになりました。 JavaScriptは知っているけど、Vue.jsは触ったことがないという方でも安心して参加していただくことができます。 ぜひ下記イベント詳細ページをご覧ください！ https://raccoon-holdings.connpass.com/event/134213/ また、ハンズオ
2019.6.10
VuePressの使い方！記事一覧と前後投稿リンク付きブログの作成方法
今回はVuePressを使って、記事一覧と前後投稿リンク付きのブログサイトを作成してみましょう。 VuePressはVue.jsが使えるなら学習コストが低く、カスタマイズしやすい静的サイトジェネレータです。 サイトの公開にはFirebase Hostingを利用します。 はじめに 静的サイトジェネレータとは サイトの共通部分（ヘッダーやサイドバーなど）を自動的に自分が作成したページと結合し
2018.9.26
Visual Studio CodeでSlackに投稿する拡張機能をDIY
前回、VS Codeの拡張機能を作成する記事を書かせて頂きました。 今回はVS Code拡張機能作成の第二弾で、VS Codeの拡張機能＋SlackのAPIを使ってメッセージ投稿用の拡張機能を作成したいと思います。VS Codeには既にいくつかSlackの拡張機能が存在していますが、SlackのAPIの事も学びたいと考え今回拡張機能をDIYしようと思いました。 ※Slackの詳しい事については下記
2018.7.18
Visual Studio CodeがRSSリーダになる？VS Codeの拡張機能を作れば作業が捗る
プログラムを開発する際に必要となるテキストエディターはSublime Text、Atom、VS Code など、 高性能・高機能を持つものが増えてきました。 今回はその内の1つVS Codeの拡張機能(extension)を使用してRssを取得する機能を作成してみたいと思います。 ※記事中盤あたりにRssの取得の具体的な方法を載せています。 またVS Codeの公式ページ・概要をリンクして置きま
2018.6.8
JSでmarkdownからカスタマイズしたHTMLを生成する
普段仕事をしていて、「めんどくさい」と思ったことはありませんか？ そんなときこそプログラミングの出番です。 「めんどくさい」＝単純作業であることが多く、簡単なコードを書くとサクッと解決できる可能性が高いです。 私はたった今、このブログの執筆がめんどうくさいです。 どのように面倒くさいかというと少々古めのCGMを使っているため、次のような問題が起きています。 問題点 まと
2018.5.16
フロントエンドのパフォーマンスを徹底解説！ブラウザの気持ちで理解するHTML/Javascript/CSSの話
今回はウェブシステムにおけるフロントエンドのパフォーマンスの話です。 皆様はウェブのパフォーマンスを気にしていますか？ おそらく大抵の方はSQLのチューニングやロジックの改良などをした経験があるのではないでしょうか？ しかしプログラムをチューニングしても、期待ほどはページ表示速度が改善しなかったことはありませんか？ 昨今のウェブサイトは大量のCSS/Javascriptファイルで構成されている