Raccoon Tech Blog [株式会社ラクーン 技術戦略部ブログ]

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

フロントエンドのパフォーマンスを徹底解説!ブラウザの気持ちで理解するHTML/Javascript/CSSの話

こんにちは、羽山です。
今回はウェブシステムにおけるフロントエンドのパフォーマンスの話です。

皆様はウェブのパフォーマンスって気にしてますか?
おそらく大抵の方はSQLのチューニングやロジックの改良で、起点となるHTMLの生成速度を改善した経験はあるのではないでしょうか?
しかし、いくらプログラムをチューニングしても、思ったよりもページ表示の体感速度は改善しなかったりという経験はありませんか?

昨今のウェブサイトは大量のCSS/Javascriptファイルで構成されているページが大半です。例えばHTMLを100~300msくらいで生成して転送できても、ブラウザ側でページ表示が完全に完了するのは4~5秒かかるということも珍しくありません。

「なんか遅いけど沢山いろいろ読み込んでるから仕方ないな・・・」って諦めないでください。ブラウザがどうやってHTMLを解釈して、CSS/Javascriptを読み込むのかを理解すればチューニングのポイントが見えてくるはずです。


例えば以下のシンプルなHTMLがあります。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link href="css/style.css?d=5000" rel="stylesheet">
<script type="text/javascript">
setTimeout(function() {document.body.innerHTML = "bar"}, 3000);
</script>
<title>Improve Web Performance</title>
</head>
<body>
foo
</body>
</html>

外部CSSの読み込みとインラインのJavascriptがあり、本文はfooのみですが転送速度に細工をしています。
HTMLはWebサーバから数msで転送されますが、CSSは転送に5秒かかるようにしています。(d=5000の指定で制御)
また、インラインのJavascriptコードは実行されてから3秒後に本文をbarに変更します。
style.cssは以下の内容で、body全体のフォントを赤色にするだけのものです。
/* style.css */
body { color: red; }

さて、リンクをクリックしてこのページを開いたとします。
fooまたはbarが画面に表示されるのはリンクをクリックしてから約何秒後になるでしょうか?また色は黒色でしょうか?それとも赤色でしょうか?
続きを読む

第9回LT大会

こんにちは、たむらです。

 先日第9回技術部LT大会を開催しました。今年度から1回の拘束時間を短くするために年3回の開催となっており、今回はその3回目となります。前回はライフハック系の「作った」トークが隆盛を極めましたが、果たして今回はどんなものが飛び出すでしょうか?
続きを読む

テックリード&スモールチーム体制の導入で開発効率が凄く上がった話

こんにちは、たむらです。
皆さんは”テックリード”という言葉を耳にしたことがありますか?主にアメリカのIT企業などで広まっている役割名なのですが、最近日本でもその名前が使われる会社が増えてきているようです。

テックリードの明確な定義がある訳ではありませんが、一般的に下記の様な役割を担っています。
  • 開発チームの生産性を最大化させる
  • 採用した技術や設計に責任を持つ
  • 品質面で責任を持つ・コードレビューの実施
ざっくり言うならば開発現場の責任者という感じでしょうか。ポイントは開発業務という部分にフォーカスした役割であり、いわゆるマネージメントにあたるような予算管理や人事考課といった業務は範囲外ということです。

 さて、ラクーンではテックリードという名称ではありませんが、まさに上記の役割を担うポジションがあります。以前「ここ数年で技術部で定着した制度2つ」という記事で書きましたが、ラクーンではユニットチームという少人数チームで開発を行っており、そのユニットチームにはユニットセンターという代表者がいます。そして、このユニットセンターがまさにテックリードの役割に近しいことを行っています
 ユニットセンター体制は運用を始めて既に5年近くが経っており、運用実績も十分あるので今一度この体制についてユニットセンターという切り口で説明してみようと思います。
続きを読む

Vue.jsで作るSPAデータ更新フォーム


開発チームの井川です。


今度とある案件にて、項目数がとても多いデータ更新画面を作ることになりました。
まだ未定ですが200項目くらいはあるかもしれません。
弊社のサービスの管理画面として社内で利用される予定です。
管理画面なのでデザイナーによるデザイン制作はなく、エンジニアがUIを担当します。
そこで、ユーザにとって使い勝手がよく、開発としても余計な画面遷移がなく、繰り返しのコードが少なくなりそうなSPA(Single Page Application)のデータ更新画面を作ろうと考えました。

続きを読む

新卒総合職へのIT研修

 こんにちは、たむらです。
今回は新卒総合職に対してのIT研修の取組みを紹介します。

 ラクーンは2018年1月現在で約120名程の従業員が在籍していますが、うち30名強が技術戦略部、15名程がデザイン戦略部で、残る従業員は営業やカスタマーサポートといったいわゆる総合職に就いています。自社WEBサービスを事業の基盤としている企業ですから、当然そういった総合職のメンバーもシステムに何かしかの形で携わることになりますが、全員がシステムに精通している訳ではありません。

 そこで技術戦略部では総合職のメンバー向けに、データ分析や調査をある程度自分でできる様になる為の「SQL研修」や、「Googleアナリティクス研修」などの勉強会を定期的に開催していました。そんな中、3年前から新たな取組みとして、新卒向けIT研修を行う様になりました。

続きを読む
記事検索