RACCOON TECH BLOG

株式会社ラクーンホールディングス 技術戦略部より、
tipsやノウハウなど技術的な話題を
発信いたします。

カテゴリ一覧

JavaScript

rel=”preload”を極めるために必要な2種類のプリロード機能

本稿はWebパフォーマンス Advent Calendar 2019の13日目に参加させていただきました。 フロントエンドのパフォーマンスチューニングのシリーズ記事で、今回は2種類のプリロード機能に焦点を当ててリソース読み込みの最適化について解説します。 はじめに まずはブラウザが持つ2種類のプリロード機能をおさらいしましょう。 1つ目はHTMLの仕様として定義されている <link

2019.12.12

超簡単！超軽量！LottieでWebアニメーションが捗る

今回ご紹介するのはWebアニメーションライブラリ「Lottie」です。 リッチなUXを実装したいけど、以下のようになかなか手が出せない方もいらっしゃるのではないでしょうか？ デザイナーにはJavaScriptの学習コストが高い エンジニアにはデザイナーの求めるような動作をなかなか表現できない デザイナーとエンジニアの得意分野を切り分けるために動画で表現しようとするとどうしても重くなる しか

2019.12.5

Vue.jsが採用しているMVVMパターンとは【目的を重点に解説】

弊社で開催した勉強会"速い"Webアプリケーションの作り方でLTを行いましたので、内容をまとめました。テーマはデザインパターンの一つMVVMパターンです。 MVVMパターン 速いウェブアプリケーションについて調べていくと、MVVMパターンというデザインパターンをよく見ます。 代表的なところだと、Vue.jsがMVVMパターンです。 MVVMパターンって何だろうと調べると、このような図で説明

2019.10.4

【Software Design誌コラボ企画】『“速い”Webアプリケーションの作り方』を開催しました！

弊社テクニカルディレクターの羽山が『Software Design』10月号の特集記事を執筆させていただいたご縁で、 技術評論社様にもご協力いただき開催となったこの企画。 多数の方にご参加いただき、無事開催することができました。 登壇者の皆様、技術評論社の中田さん、 忙しい中参加していただいた皆様、ありがとうございました！ 左から合同会社レッドボックスの小川さん、スパイスファクトリー株式会

2019.10.2

SVGにCSSやJSを組み込んでローディングアニメーションを作成する！

今回のネタは「SVG」です！ 皆さん、SVG使ってますか？？ SVG形式の画像って、拡大しても荒くならないとか、ロゴとかによく使われているとか、そういったイメージを持っている方が多いかもしれません。 良く使われているjpgやpngなどの画像形式との比較を簡単にまとめるとこんな感じになります。 特徴 SVG（ベクター画像） jpgやpng（ラスター画像） 長所

2019.9.30

Alexaのカスタムスキルを作成してみよう

今回は Alexa のカスタムスキルを作成してバイオリズムを読み上げてもらおうと思います。 Alexa においてスキルとは様々な命令（アラーム、音楽再生、ニュース読み上げ等）の事で、 独自にスキルを開発することが可能です。ユーザーが独自に開発したスキルをカスタムスキルと呼びます。 実機が無くても JavaScript の知識があればブラウザ上でとても簡単に開発からテストまでできます。 バイオリ

2019.9.26

Software Design 2019年10月号「“速い” Webアプリケーションの作り方［フロントエンド編］」に寄稿しました

本日発売のSoftware Design 2019年10月号に私の執筆した記事が掲載されました。 進化の激しいフロントエンドの分野で、パフォーマンスに焦点をあてた特集記事「“速い” Webアプリケーションの作り方［フロントエンド編］」の第2章を担当しています。 フロントエンドのきらびやかさからはあえて一歩離れ、DOM/CSSOMの構築やレンダリングブロックの観点から、ブラウザの動作の仕

2019.9.18

Vue.jsプラグイン「v-ajax-form」を作りました

Vue.js流行ってますね。 弊社でもフロントエンドにVue.jsを使ったサービスが、いくつかリリースされています。 Vue.jsが必要になるWebサービスの要件では、 非同期通信処理を行うフォームを実装する場面が多々あると思います。 非同期通信処理をするためだけに、inputタグの一つ一つにVue.jsのインスタンスと同期する設定を施し、 さらに通信のためのコードを書くのは面倒だと感じていま

2019.8.29

javascriptで1ヵ月前を計算するにはmoment.jsで！

moment.js を使用してこれまで手間の掛かっていた、日付の加算・減算・フォーマットの指定などを簡単に扱える事に感動しました！ Moment.jsの公式 最小のコードで理解しやすく一瞬で出来る日付計算 下記に2020/03/31 (閏年)から1か月前を取得するコードをmoment.jsで書きました。 コードがシンプルで一目で何をしたいのかが理解しやすいです！ 従来の方法で、実装すると結構大

2019.7.30

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

運営会社：株式会社ラクーンホールディングス(c)2000 RACCOON HOLDINGS, Inc