タグ

ブックマーク / studist.tech (5)

  • IE のサポートを終了せずに IE のサポートを終了した話

    IE サポートとは一体… スタディスト 開発技術支援ユニットの笹木 (@s_sasaki_0529) です。 Microsoft による Internet Explorer (以下 IE) のサポート終了(2022/06)を 目前(執筆時点) とし、フロントエンドエンジニアの皆様はウッキウキの日々を過ごされていることでしょう。 今回は、弊社の主要プロダクトである Teachme Biz における「IE サポート終了」が何を指しているのかを明らかにし、その範囲内で開発体験を最大限良くするために行った仕組み作りについてお話します。 TL;DRTeachme Biz は IE の「サポートを終了」するが、ビルドターゲットから IE を除外する「提供終了」をするわけではないVue 3 を採用したいが、そのためには IE への「提供終了」が必須IE 用ブランチを切ってコードフリーズし、IE 用

    IE のサポートを終了せずに IE のサポートを終了した話
  • CircleCIとS3とGithub API を用いて、プルリクごとのドキュメントを共有しよう

    動的生成されたドキュメントをPRに添付した完成形はじめにこんにちは、株式会社スタディスト 開発部Webグループの笹木です。 今回は、circleci 上で生成したAPIドキュメント及び、静的ビルドしたStorybookAWS S3 にアップロード後、プルリクのコミットステータスにそのリンクを添付するという仕組みを導入してみました。 背景弊社が開発、運用しているTeachme Biz の開発では、APIドキュメントの作成にapi blueprint 及び aglio を用いており、HTMLファイルに出力して配布しています。 また、フロントエンドのコンポーネントカタログとして、Storybook を採用しており、こちらは各開発者が開発環境上で立ち上げて利用するというケースが多いです。 これまでの問題点上記のドキュメントを、従来は開発者が個々人でビルドし、フロントエンド開発に活用したり、それ

    CircleCIとS3とGithub API を用いて、プルリクごとのドキュメントを共有しよう
  • 社内ツール kyafuコマンド の紹介

    kyafu呼び出しに対する応答画像はSlack上でkyafu deployコマンドが叩かれている様子です。work1–10のどのインスタンスを利用するのかと検証したいブランチ名を指定しています。 構成を簡単に示すと以下のようになります。 簡易な構成図InfraやCI/CDについての知識がほとんどなかった私にとって、kyafuは魔法のコマンドでした。簡単に検証環境のデプロイや起動ができ、実行完了後に通知まで送ってくれるのでとても便利です。 ですが、当時のkyafu(というか検証環境の運用)には課題感もありました。それは、使用する環境の衝突が起きないように調整する必要があったことです。 大体どのチームがどの番号のインスタンスを使うのか、までは決まっていましたが、同一チーム内に検証したい機能が複数あった場合、検証用のインスタンス数に限りがあるため、待ちが発生することがありました。 Kuberne

    社内ツール kyafuコマンド の紹介
  • webpack 5 に移行しました

    スタディスト 開発部 技術支援ユニットの笹木 (@s_sasaki_0529) です。 今回は、弊社が開発・運用している TeachmeBiz でも使用している、webpack を 4系から5系にアップグレードし、開発体験を向上させたお話です。 webpackwebpack 4 -> 5 のアップグレードについては、既に多くの事例がありますが、移行の手順や発生する問題というのは、プロダクトの特性や現在の構成に大きく依存するところもあるため、スタディストではどうだったかを改めて紹介致します。 TL;DRwebpack 4.x から webpack 5.x へのアップグレードはすんなりできたビルドコストを 1/3 削減することができたDependabot から通知される脆弱性のほとんどに対応もできたTeachmeBiz の技術構成TeachmeBiz のフロントエンドは、主に以下の技術構成とな

    webpack 5 に移行しました
  • CircleCIの消費クレジットとRSpecの実行時間を半減させるために行った9の手順

    概要この記事はCircleCI Advent Calendar 2020の9日目の記事です。 スタディスト開発部の笹木です。今年に入ってからは開発基盤チームという位置づけで、開発環境の整備や、CI含むテスト自動化周りを担当しています。 記事では、RSpecのテスト実行時間を半減させ、CircleCIの消費クレジットを大幅削減した取り組みについてご紹介します。(消費クレジットについては後述します) 改善の結果が以下のグラフで、定点観測しているジョブの消費クレジットが、ピーク時の半分にまで落とせていることがわかります。もちろんテストコードを減らすといった末転倒なことはしていません。 RSpecジョブ実行時の、CircleCI消費クレジットを時系列で表したグラフ実施した取り組みは以下の通りです。 CircleCIの料金体系を知る問題を認識するCircleCIの利用状況を可視化するRSpecの

    CircleCIの消費クレジットとRSpecの実行時間を半減させるために行った9の手順
  • 1