1 of 22

さくらインターネットでは�こんなところで�JavaScriptを使っています

2 of 22

法林 浩之　@hourin

  • フリーランスエンジニア(?)
  • さくらインターネットに常駐 (10年目)
      • 自社イベントの運営
      • 技術コミュニティとの交流
      • さくらのナレッジ編集部
  • コミュニティ: 日本UNIXユーザ会など
  • くわしくは「法林浩之」で検索

3 of 22

さくらインターネット株式会社

  • サーバなどの計算資源を貸し出す事業者
  • 1996年創業 (今年で28周年)
  • 主な事業所：大阪(本社) New! /東京/福岡/石狩(DC)/沖縄

※2024年9月移転

※2023年9月オープン

4 of 22

Blooming Camp

  • 新しい大阪本社で　あり共創拠点
  • イベント会場あり
  • オープンコミュニケーションエリアは誰でも来場可能

Node-RED Conに会場提供(11/1開催)

5 of 22

さくらインターネットの事業

レンタルサーバ

さくらのレンタルサーバ

VPS・クラウド（仮想化基盤）

専用サーバ・データセンター

ハウジング

新規サービス

新しい社会のインフラを支えながら、最先端のサービスを構築

監視カメラのクラウド録画

GPUレンタル

衛星データ基盤

CDN

画像変換・動画配信

6 of 22

JavaScriptを使っているサービス

レンタルサーバ

さくらのレンタルサーバ

VPS・クラウド（仮想化基盤）

専用サーバ・データセンター

ハウジング

新規サービス

監視カメラのクラウド録画

GPUレンタル

衛星データ基盤

CDN

画像変換・動画配信

ほとんどのサービスでJSを利用

7 of 22

さくらのサービスとJavaScript

  • 当社サービスの大半はブラウザで閲覧/操作を行う
  • それらの画面にはJSのコードが含まれる
  • そのコードはさくらのエンジニアが実装
  • よってJSを書くエンジニアも社内に多数在籍
    • フロントエンド開発のグループあり
    • 他部署も含めて総勢10-20人ぐらい

8 of 22

JSをどのように使っているか

  • 社内でJSを書いているエンジニアに取材して資料を構成

9 of 22

サービスサイトにおける利用

  • JavaScriptをメインに、部分的にVue.jsやjQueryなどのライブラリを使って開発
  • モジュールバンドラーありきのモダンな開発というよりは、そのまま読み込んで使えるJavaScriptを書くという堅実なWebページの開発スタイル

https://www.sakura.ad.jp/

10 of 22

各サービスのコントロールパネル(WebUI)

  • サービスごとに独立して存在
  • 開発を始めた年代も異なる
  • よって使用している技術もサービスごとに異なる

​

11 of 22

さくらのレンタルサーバ

  • サービス提供開始から20年
  • 現在のコントロールパネルは2018年から提供
  • Reactを使用

12 of 22

さくらのVPS

  • サービス提供開始から15年
  • 現在のコントロールパネルは2021年から提供
  • Vue.jsを使用

13 of 22

さくらのクラウド

  • サービス提供開始から14年
  • 現在のコントロールパネルは2015年から提供
  • Vue.jsを使用
  • 一部独自のUIライブラリも使用 (Reactに置き換える計画あり)

14 of 22

さくらのクラウド(続)

  • バックエンドでも一部でJSを利用
  • Express.jsを使ってコントロールパネル専用のAPIを開発
  • フィードバック機能やアップロード機能などで利用

15 of 22

さくらのクラウド(続)

コンソール機能(ブラウザから仮想マシンにログインして操作する機能)ではWebSocketを使って仮想マシンとリアルタイムで通信できるように実装

16 of 22

さくらのクラウドにおける開発

  • JavaScriptのパッケージは依存関係が多く、バージョンアップで問題を起こし塩漬けになってしまった苦い経験から、自作も選択肢に含めつつライブラリの選定を慎重に行っている
  • botを使ってパッケージの自動更新を行い、毎日最新の状態でCIが実行されるような環境を構築
  • UIコンポーネントや汎用サブドメインをパッケージ化し、複数のプロジェクトで使えるようにしている
  • GitHub CopilotやChatGPTなど、AIの力も借りながら開発

17 of 22

その他のトピック

  • 一部の社内ツール(SlackBotなど)をJavaScriptで開発
  • 近年はTypeScriptも利用
    • 各サービスのコントロールパネルは基本的にTypeScriptで開発
    • バックエンドの開発でも利用

18 of 22

フロントエンド開発について

  • デザイナー&デザインエンジニア&フロントエンドエンジニアが協力し、デザインシステムを構築
  • ドメイン駆動設計(DDD)を実践し、ドメインモデリングを行いながら開発を進めている

19 of 22

フロントエンド開発について(続)

「ダーシノ フロントエンド」で検索

20 of 22

まとめ

  • さくらのサービス開発でもJSは多用
  • 自社開発なのでJSプログラマーも多数在籍
  • 新規サービスも歴史あるサービスも最近の手法を取り入れながら開発

​

21 of 22

JSで仕事をしたい人を募集中！

「さくらインターネット エンジニア採用」で検索

22 of 22

ありがとうございました

さくらインターネットはこれからも

技術コミュニティを応援していきます！