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が画面に表示されるのはリンクをクリックしてから約何秒後になるでしょうか?また色は黒色でしょうか?それとも赤色でしょうか?
続きを読む

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


開発チームの井川です。


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

続きを読む

DockerでJenkins2を試してみる(2)

こんにちは。開発チームの大原です。

前回の記事では、

  • CIサーバにDockerをインストールする
  • CIサーバにDocker Composeをインストールする
  • Jenkins2のDockerコンテナを起動する

を行い、DockerでJenkins2を起動するところまで解説しました。

今回は、

  • Jenkinsの環境設定をする
  • Jenkinsfileを書く
  • Jenkinsのジョブを設定する
  • ジョブを実行する

という作業で、Jenkinsを設定しジョブを実行する流れについて解説していきます。

また、新しいUIであるBlue Oceanについても触れたいと思います。

続きを読む

DockerでJenkins2を試してみる(1)

こんにちは。開発チームの大原です。

開発していると、開発中のものを自分以外の人に触って確認してもらいたいときがあります。その場合に、ソースをビルドして確認用のサーバにデプロイするのを毎回手動でやるのは面倒なので自動化しようと思いました。今回、DockerとJenkins2を使って自動化をしてみたので、サンプルも交えて紹介していきたいと思います。

記事が長くなるので全2回に記事を分けていきます。各記事の目次は下記のとおりです。

  • DockerでJenkins2を試してみる(1) (今回の記事)

    • 前提
      • なぜDockerなのか
      • なぜJenkins2なのか
    • システムの概要
      • 環境
    • DockerでJenkins2を起動する
      • CIサーバにDockerをインストールする
      • CIサーバにDocker Composeをインストールする
      • Jenkins2のDockerコンテナを起動する
  • DockerでJenkins2を試してみる(2) (次回の記事)

    • Jenkinsを設定しジョブを実行する
      • Jenkinsの環境設定をする
      • Jenkinsfileを書く
      • Jenkinsのジョブを設定する
      • ジョブを実行する
    • Blue OceanのUIでジョブを実行する

ちなみに、弊社の開発に関する自動化のブログ記事がいくつかありますので、これらも是非読んでみてください。

続きを読む

WindowsのVagrantでUbuntu環境を構築する

こんにちは、開発チームの大原です。

プログラムの開発環境として、Linuxの仮想マシンをローカルPC内に構築することがあります。

仮想化ソフトウエアとしてVirtualBoxが、そのVirtualBoxを使いやすくするツールとしてVagrantがよく使用されています。

これから、WindowsにおけるVagrantの基本的な使い方を紹介します。

続きを読む
記事検索