Vite+Vitest+Ladleで快適フロントエンド開発 | 株式会社ヌーラボ(Nulab inc.)
SPAにするとNext.jsの嬉しさが半減しますが、/pages/以下のディレクトリ構造がそのままエンドポイントのパスに対応する、ディレクトリベースのルーティングをとても気に入っていたので、ほぼルーティングだけのためにNext.jsを使い続けていました。 今年（2023年）の春頃、高機能なNext.jsをルーティングのためだけに使いつづけるのはやはり違う気がする、と調べていて「ViteとReact Routerを使えば簡単にディレクトリベースのルーティングできるよ」という記事を見つけたのが、実はViteを知った最初でした。流行に鈍感…これが老化か…。 Simplifying Routing in React with Vite and File-based Routing Viteにはimport.meta.glob()という機能があり、トランスパイル時にディレクトリ以下のファイルを列挙し
Jotaiで快適フロントエンド開発 | 株式会社ヌーラボ(Nulab inc.)
ここ2年ほど、すっかりフロントエンド開発者になっている藤田です。以前、Reactフロントエンドの状態管理ライブラリRecoilについて記事を書きました。 Recoilで快適フロントエンド開発 Recoil Syncでさらに快適フロントエンド開発 その後どうなったかというと、実はRecoilからJotaiに乗り換えていて、半年ほど経ちましたので、Jotaiについて書きたいと思います。 サイトの一行目から「Recoilにインスパイアされた」と言ってるとおり、Recoilの良いところを受け継ぎ、不便なところを無くしたような状態管理ライブラリです。 Jotaiの基本 基本はRecoilとほとんど同じで、React.useStateを便利にしたような感覚で非常に簡単に使えます。3ステップで見てみましょう。 1. Providerで囲む アプリケーション全体を<Provider>で囲みます。 impo
いろんなセキュリティキーの紹介と光り方を見てみる | 株式会社ヌーラボ(Nulab inc.)
こんにちは。ヌーラボAppsチームのsuzukiです。 皆さんはセキュリティキーを持ってますか？ ヌーラボアカウントのログインでは2段階認証やパスワードレス認証でセキュリティキーを利用することができます。 セキュリティキーを使うとヌーラボだけでなくGoogle、Microsoft アカウント、GitHubなど様々なサービスに安全にログインすることができます。 ここでは セキュリティキーってなに？ どんな製品があるの？ どんな光り方するの？(認証するときにピカピカ光るんです！) について話したいと思います。 セキュリティキーのことがよくわからないという方の参考になればと思います。 セキュリティキーって何？ 多要素認証のためのデバイスです。 2段階認証でパスワードと組み合わせて使ったり、パスワードレス認証といったパスワードを使わない認証に利用することができます。 ヌーラボだけでなくGoogle
プルリクを起点に検証環境が自動で構築されるようにしたら すぐにレビューできるようになったのでみんなハッピーになれた話
こんにちは。CacooチームのYAMLエンジニアの木村（@cohhei）です。「readiness」は「ready」の名詞形で「レディネス」と読むことをわりと最近知りました。今回はプルリクエスト向けに検証環境が構築される仕組みを作ったので紹介します。 忙しい人のためのざっくりとした説明 プルリクエストが作られたら自動で検証環境が構築される仕組みをつくりました。 環境まるごと作るわけではなく、フロントエンドJavaScript配信用のPodだけに対応しています。 レビュアーやテスターはクエリパラメーターが追加されたURLにアクセスするだけでその検証環境にアクセスできます。 プルリクエストをマージする前にそのバージョンを非エンジニアでも試すことができます。 プルリクエストごとに環境が作られるので、複数の開発プロジェクトが同時に走っているときに便利です。 コミットしてプルリクエストを作るだけです
運用中のPostgreSQLのスキーマを無停止で安全に変更する | 株式会社ヌーラボ(Nulab inc.)
初めに こんにちは。ビジネスチャットサービスTypetalkを開発・運用している吉田です。Typetalkではデータの永続化ストレージとしてPostgreSQLを利用しています。扱うデータ量は多く、チャットというサービスの性質上書込み頻度はとても高いです。PostgreSQLを使い日々開発を進めていると、追加する機能によってはスキーマを変更する必要があります。メンテナンスを計画・告知してサービスを止めてしまえば、時間はかかるかもしれませんがスキーマの変更はそう難しくありません。しかしTypetalkはユーザーが日々の業務を進めるために利用しており、サービスが止まるとコミュニケーションが取れなくなります。業務を円滑に進めるためのビジネスチャットツールですので、極力サービスは止めたくありません（最後の計画メンテナンスは2019年6月30日で1年以上前となっています。）。本記事では以下の3つのケ
Go言語 で Gitサーバー を書いてみた。 | 株式会社ヌーラボ(Nulab inc.)
Backlogチームのnabe_です。もっぱら仕事はJavaとScala、最近の趣味は Go言語 です。今回、 Go言語 で nulab/go-git-http-xfer という Git ライブラリ を書いたので紹介させていただきます。 役割 動機 仕組み 使い方 試用 まとめ 役割 このライブラリを使うと、GitのリモートリポジトリへHTTPでアクセスするためのサーバーを作ることができます。HTTPアクセス自体は、BacklogやGithub等のGitをホスティングしているサービスであれば概ねサポートしているので、普段あまり気にすることはないかと思いますが、独自にGitを運用している場合、リモートリポジトリの前に clone、push、fetch 等で発生するHTTP通信を捌く仕組みを、なにかしら用意しなければなりません。 動機 私自身まだまだGoのニュービーなのですが、兎に角手を動か
Rust + Yew = WebAssembly でかんばんライクなタスク管理アプリを作ってみました。 | 株式会社ヌーラボ(Nulab inc.)
Rust + Yew = WebAssembly でかんばんライクなタスク管理アプリを作ってみました。 YewはRustで書かれたフロントエンド向けのフレームワークです。 書かれたコードはWebAssemblyに変換されて、ブラウザ上で実行することができます。プロジェクトのREADMEに「ElmとReactに影響を受けた」と書かれているように、JSX風のHTMLを書けるようなマクロが用意されていて、Rustのコード内にHTMLっぽく表現でビューを書くことができます。 また、Elmアーキテクチャのように、モデルとビューがあり、メッセージによって状態の更新がされるようになっています。 というわけで、以前、このブログでsakiが書いた「Vue.js でかんばんライクなタスク管理アプリを作ってみました。」という記事を参考に、見ためがほとんど同じようなかんばんライクなタスク管理アプリ (タスクボード
Gitリポジトリ上でAWSアクセスキーを大公開しないためにAnsible Vaultをフル活用する | 株式会社ヌーラボ(Nulab inc.)
こんにちは。Backlog のSite Reliability Engineering (SRE) を担当している吉澤です。 AWS アクセスキーを含むコードを GitHub の公開リポジトリにプッシュしてしまい、そのアクセスキーがビットコインの採掘に使われて AWS から高額請求が来た！という話をたまに目にします。今年の2月に検証された方（GitHub に AWS キーペアを上げると抜かれるってほんと？？？試してみよー！)によると、git push から13分で不正利用開始されたらしいです。怖いですね……。 Backlog のソースコードは Backlog の提供する Git リポジトリで管理しています。Backlog の Git にはリポジトリの公開機能はないので、AWS アクセスキーをプッシュしたからといって即座に悪用される可能性は低いです。とはいえ、漏洩時の影響が大きいため、AWS
3倍どころか10倍速い！ Jenkins のビルドを高速化して、シャアを超えた男 | 株式会社ヌーラボ(Nulab inc.)
実はガンダムを見たことがないので、時々社内のガンダムトークについていけないことがあります、中村です。今日は、 Jenkins のビルドを高速化し、リリースまでの時間を大幅に短縮した、改善策をご紹介します。全体で2~3倍程度、一部処理では何と10倍以上もビルドを高速化できました。 改善策1 : push 型デプロイから pull 型デプロイへ 改善策2 : テストケースを自動分割して、よりアグレッシブに並列実行 全体のリリース時間に対する改善結果 ビルド時間の可視化 改善策1 : push 型デプロイから pull 型デプロイへ まずはデプロイ時の方式を、push型デプロイからpull型デプロイに変更した改善策を説明します。ここで、push型デプロイは中央サーバからデプロイ用ファイルを転送する方式で、pull 型デプロイは各サーバがファイルを取得する方式とします。 各フェーズの構成は、下図の
目指すのはぶっちぎりの速さ! なぜ HTML5 版CacooはSVGを採用するのか | 株式会社ヌーラボ(Nulab inc.)
こんにちは！ Cacoo チームの中原です。現在CacooチームはFlashで作られている図の編集画面(以下エディタと表現します)を* HTML5 で置き換える開発を進めています。このブログでは、 HTML5 版 Cacoo で図形の描画に使用される、SVGを選択した理由と経緯について説明したいと思います。 （*置き換える理由については「Good-Bye Flash ~ CacooはHTML5で生まれ変わります」をご覧ください） どの技術を使って図形を描く?重視したのは「パフォーマンス」 図形の描画にどんな技術を使うか。いくつか候補を上げました。 2D Canvas 3D Canvas (WebGL) SVG (これ以外に、Unityという意見もありましたが今回はWeb標準技術を使うことを前提にしました。) さて、どれを使おう。私たちがどの技術を選択するのか、基準を決める必要があります。そ
Docker で「速くてウマイ」な CI 環境を構築するための 5 つの Tips | 株式会社ヌーラボ(Nulab inc.)
Docker 社のユースケースでもあげられているように、CI/CD で Docker を使うというのは、プロダクションシステム以外で Docker の特性を活用できる良い場所だと考えています。ヌーラボではBacklog でのプルリクエストの提供以降、CI のジョブの実行のために Docker を利用しています。ここではその運用から学んだ５つの Tips を紹介したいと思います。 ヌーラボの CI 環境の全体図 これがヌーラボの CI 環境の全体図です。 CI には Jenkins を利用しており、Jenkins のジョブのトリガーとなるのは左側の Backlog や Typetalk です。実際には Jenkins Backlog Plugin や Jenkins Typetalk Plugin を利用してジョブを処理しています。これらのプラグインの詳細については本ブログ末に参照先をのせて
Electronアプリをプロダクトとして「正しく」リリースするために必要な3つのこと | 株式会社ヌーラボ(Nulab inc.)
Typetalkデスクトップアプリ 先日、弊社チャットサービスTypetalkのデスクトップアプリをリリースしました。おそらくTypetalk.appのパッケージを覗いてElectronの痕跡を見つけ出した方もいらっしゃると思いますが、その通りElectronをベースに実装しています。 ElectronはHTML、JavaScript、CSSなどWebの技術を使用してデスクトップアプリを開発できます。GitHub社のAtomエディタをはじめとして、今では非常に多くのアプリがElectronベースで公開されており、実装方法についても既に多くの記事が書かれています。 ただし、正式にアプリを公開する場合には、コードサイニングなどを行うなど、考慮が必要なポイントがいくつかあります。そこで本記事では正式にElectronアプリをWindows/Mac向けにリリースするにあたって必要だった3つのことを
ガントチャート上でドラッグ＆ドロップでタスクの並び替えられるようにしてほしい – Customer Feedback for Backlog
ベトナムにおけるBacklog活用のリアル ベトナムにおけるBacklog活用のリアル backlog Backlog の Amazon EKS クラスターを Blue-Green アップデートするためにやっていること Backlog の Amazon EKS クラスターを Blue-Green アップデートするためにやっていること backlog 2023年最も素晴らしいプロジェクトを表彰！Good Project Awardを開催しました 2023年最も素晴らしいプロジェクトを表彰！Good Project Awardを開催しました backlog Backlog開発者が夫婦の不和をなくす家庭管理アプリを作ってみた話 Backlog開発者が夫婦の不和をなくす家庭管理アプリを作ってみた話 backlog 創業からもうすぐ80年の老舗企業！ミートボールでおなじみの石井食品様で、プロジェクト
Cacoo - Web上で図の作成とリアルタイムコラボレーション
Online diagramming tool for collaborating on wireframes, flowcharts, and more
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
