ここ2年ほど、すっかりフロントエンド開発者になっている藤田です。以前、Reactフロントエンドの状態管理ライブラリRecoilについて記事を書きました。 Recoilで快適フロントエンド開発 Recoil Syncでさらに快適フロントエンド開発 その後どうなったかというと、実はRecoilからJotaiに乗り換えていて、半年ほど経ちましたので、Jotaiについて書きたいと思います。 サイトの一行目から「Recoilにインスパイアされた」と言ってるとおり、Recoilの良いところを受け継ぎ、不便なところを無くしたような状態管理ライブラリです。 Jotaiの基本 基本はRecoilとほとんど同じで、React.useStateを便利にしたような感覚で非常に簡単に使えます。3ステップで見てみましょう。 1. Providerで囲む アプリケーション全体を<Provider>で囲みます。 impo

はじめに こんにちは、ヌーラボの池です。ビジネスチャットツール Typetalk の開発をしています。 さて、先日 Typetalk はフロントフレームワークを AngularJS から Angular バージョン2 以降(以下、Angular2系という) に完全移行しました。移行作業は数年にわたる長期プロジェクトとなりましたが無事完了させることができました。今回はこのような長期間の移行作業にかかったリソースや、プロジェクトの進める上で行ったこと、得られたことについて紹介したいと思います。具体的に行った移行作業については別記事にまとめていますのでそちらをご参照ください。 AngularJS を Angular に移行する際に必要だった作業 アサイン時の状況 まず、私が移行作業にアサインされた時の状態からお話しします。AngularJS の移行作業は私がアサインされる2年ほど前に開始されてい

発表資料について 当時の発表資料とNuCon Mini 2022 Springで登壇した際の動画のリンクを埋め込んでおきますので、もしよろしければ御覧ください。 発表資料 「チームでサービスの運用をうまく支えていくための取り組み ~SREと共に~」 ちなみにこちらの動画では発表前にジョジョネタを盛り込んでいます。もしジョジョが好きな方がいましたら何部のセリフが使われているか当ててみてください。答えは当記事の最後にあります。 過去のGit Teamの体制と課題 Git Team誕生前 BacklogのSRE課にBacklogのGit機能の開発するメンバー1名を包含していました。メンバーはアプリケーションの開発・保守をメインで担当し、BacklogのGit機能に関連するサーバーの保守（kernel updateなど）はWebOperationが担当するという作業分担をしていました。 WebOp

こんにちは。ヌーラボAppsチームのsuzukiです。 皆さんはセキュリティキーを持ってますか？ ヌーラボアカウントのログインでは2段階認証やパスワードレス認証でセキュリティキーを利用することができます。 セキュリティキーを使うとヌーラボだけでなくGoogle、Microsoft アカウント、GitHubなど様々なサービスに安全にログインすることができます。 ここでは セキュリティキーってなに？ どんな製品があるの？ どんな光り方するの？(認証するときにピカピカ光るんです！) について話したいと思います。 セキュリティキーのことがよくわからないという方の参考になればと思います。 セキュリティキーって何？ 多要素認証のためのデバイスです。 2段階認証でパスワードと組み合わせて使ったり、パスワードレス認証といったパスワードを使わない認証に利用することができます。 ヌーラボだけでなくGoogle

みなさんこんにちは。Backlog課のGitチームに所属するテリーです。今回は僕たちが日々運用するECS Fargate上のアプリケーションのデプロイ方法とそれをどう改善してきたかについてまとめました。デプロイについて迷っている方や日々の業務の改善が好きな人に読んでもらえたらと思います。 Git機能におけるデプロイ ECS上で動くアプリケーション BacklogのGitはEC2上で動くアプリケーションとECS Fargate上で動くアプリケーションで構成されています。 アーキテクチャの外観は上記のようなになっています。Gitのアーキテクチャについて過去に詳しく説明したブログを発表していますので詳しくはこちらを参照ください。 僕たちは上記のアーキテクチャ中の4つのアプリケーションをECS Fargate上で運用しています。また、内部的な話になりますがBacklogには内部構造として複数の本番

こんにちは。ヌーラボのCacooチームの木村です。テックブログを書く上で個人的に気をつけていることを紹介します。 「せっかく苦労して記事を書いたのに全然読んでもらえない」「本筋とは関係ないコメントが来て消耗してしまう」といった悩みはないでしょうか。それらはもしかしたら技術記事の書き方に原因があるかもしれません。 僕は普段進めている仕事に、ある程度の成果が出たら、そこで得た知見を会社のテックブログに記事としてまとめるようにしています。そのときには以下の3つのことを心がけています。 「なぜ」を徹底的に書く 読者の認知負荷を下げる 想定読者の知識レベル下げる そうすることで以下のような効果が期待でき、読者と著者だけでなく著者が所属する会社にとってもいい記事になると考えられます。 記事の内容が正確に読者に伝わる 読者にとって有益な情報を提供できる 著者（たち）の置かれている状況や抱えている課題が読

GraphQLクライアントライブラリ乗り換え遍歴 私達のプロジェクトではReactのフロントエンドとバックエンドの通信にGraphQLを使っています。 GraphQLは、たいていの場合はHTTP POSTリクエストで リクエストボディ：GraphQLクエリ（文字列）と引数（オブジェクト）からなるJSON レスポンスボディ：データJSON をやりとりするだけというだけのシンプルなプロトコルなので、全てfetch関数で頑張るストロングスタイルで行けないこともないですが、やっぱり専用のクライアントライブラリを利用したほうが楽です。 そのライブラリとして一番有名なApollo Clientから始まってRelay、Urqlと、3ヶ月くらいの間に2回も乗り換えてしまったので、反省の意味も込めて記事にしたいと思います。 GraphQLクライアントライブラリがいろいろあってどう違うんだろうと迷った方の助け

サービス開発部SRE課の@vvatanabeです。 2021年9月26日、OpenSSH 8.8がリリースされました。大きな変更として挙げられるのは、SHA-1ハッシュアルゴリズムを使用したRSA署名の廃止です。 本記事では、この変更がBacklogに与えた影響、その時現場で起こっていたこと、問題解決のプロセス、なにを教訓にしたのか等、順を追って解説します。 ※ 本記事はNuCon 2021で発表した内容をブログ化したものです。 問題の発覚 BacklogのGitへSSHでアクセスできない TypetalkのBacklog開発者のトピックで、以下のフィードバックが投稿されました。 「OpenSSH 8.8へアップデートすると、BacklogのGitへSSHアクセスできない」という内容でした。 問題の調査 Inside SSH protocol v2 深堀りしていく前に、SSHプロトコルの接

こんにちは。BacklogのGit機能の開発を行っているテリーです。 今回はGitチーム（後述する僕の所属するチーム）でAutifyによるリグレッションテストの自動化を進めてみて感じたメリットと工夫したところ、苦戦したところを紹介したいと思います。 スモールチームの規模感とテストの現状 BacklogのGitチーム 長らくBacklogは固定のチームが専任で固定の機能をみるような体制になく、アプリケーションエンジニアが比較的流動的にBacklog全体の機能を担当しており、なんとなく“この人”は“この機能”が得意というような体制でした。 ですが最近のチーム編成により固定のチームが固定の機能を開発するようなフィーチャーチームがいくつかできました。Gitチームはその中で生まれたBacklogのGitの機能についての開発責任を持つチームです。チームメンバーは3人で、そのメンバーでインフラからフロン

UXライティングの勉強会を開いてみたら、思ったより楽しくプロダクトを改善することができました。改善した内容の共有と勉強会のふりかえりを兼ねて、UXライティングの重要さとコラボレーションして学ぶことの楽しさをシェアしたいと思います🥳 この記事は勉強会に参加したNulab Appsエンジニア、Typetalk PdM、Cacooエンジニア、Cacooテクニカルサポート、カスタマーサポートのみなさんとの共同執筆です🙌 UXライティング / マイクロコピーとは 書籍「UXライティングの教科書 ユーザーの心をひきつけるマイクロコピーの書き方」から引用すると以下のように書いてありました。 ユーザーインターフェースに付与するちょっとした言葉や短文のこと。これはユーザーが起こす行動に直接影響を与える。 ・行動を起こす前にモチベーションを向上させる ・行動に伴って指示させる ・行動の後にフィードバックを

どうも。Cacooチームのフロントエンド開発者のテリーです。ここ一年くらい社内でアルゴリズム勉強会という部活を週一で行ってきたのでその紹介をしたいと思います。 競技プログラミングへの気持ちの高まり 最近なのかよく分からないですが私の観測している限りでは競技プログラミングが流行ってる気がします。私もその一人でめちゃくちゃ下手くそですが、時間が許す限りアルゴリズムの問題に取り組んだり、アルゴリズムを学んだりしています。 さて競技プログラミングと言われると皆さんどんな想像をされますか？難しそうとか実務に役に立たなそうとか思われるかもしれません。というより私自身そう思っていてあんまり勉強に乗り気ではありませんでした。 しかし実際プログラミングの問題を解く能力は実務にもかなり生かされます。お題の要求を満たすようなロジックを考え、効率化しそして実装する。実務はもう少し複雑だとは思いますが、似ている部分

TypetalkのSREの二橋です。今回は、Gossの紹介をしたいと思います。 TypetalkではサーバーのテストにServerspecを利用していました。機能的には申し分なかったのですが、サーバーの台数/環境/テストの項目が増えるにつれて、ツールの実行速度やメンテナンス性に改善が必要になりました。Gossに乗り換えることで問題が解消されました。 サーバーのテストとは？ サーバーのテストとは、サーバーの状態が意図したものになっているか検証するものです。例えば、以下のような項目を検証します。 意図したパッケージのバージョンがインストールされているか？ 意図したサーバーと通信できるか？ 意図したポートが待ち受けているか？ 意図したユーザー/グループが存在するか？ 意図したプロセスが動作しているか？ 意図したファイルに指定した記述が存在するか？ Serverspecで困っていたこと ①テスト実

ヌーラボでScalaを書くRubyistの谷本です。 数年ぶりに開発環境をWindowsにしたら、JRubyのバグっぽい振る舞いを見つけたので、原因を探してPRを送るまでの自分のやり方について書きます。(ちなみに、仕事では全くJRubyを使っていません。) 経緯 去年、2年間使っていたMacbook Proの調子が悪くなったで、PCの買い替えタイミングで数年ぶりに開発環境をWindowsにしました。 そこで、仕事ではJVM言語(Scala)を使っていることや数年前はJRubyを使っていたこと、インストールが簡単なことなどから、JRubyを使うことにしました。 しかし、いざ使ってみるとREPLモードであるirbで矢印キーを使ったカーソル移動や入力の履歴をさかのぼることができませんでした。macOSで使っていた時や数年前にWindowsで使っていた時は問題なく動いていた記憶があったので、Win

Cacooチームエンジニアの川端です。普段はCacooのエディター(編集画面)のフロントエンドの開発をしております。最近パパになったので娘の写真を親に共有するアプリを作ってみました。その際に、Web Componentsなる機能を使ってみました。JSフレームワーク群雄割拠の昨今、ライブラリを使わずWeb Componentsだけでどこまでできるのかご紹介したいと思います。 Web Componentsとは？ Web Componentsとは、HTMLの要素をカプセル化して再利用可能なパーツにするためのブラウザのAPI群です。ReactやVueやRiotでいうところのコンポーネントをライブラリを使うことなく素のJSだけで作ることができる技術になります。 Web Components | MDNによると次のように記されています。 Web Components は、オープンなウェブテクノロジーを

Backlogチームのnabe_です。もっぱら仕事はJavaとScala、最近の趣味は Go言語 です。今回、 Go言語 で nulab/go-git-http-xfer という Git ライブラリ を書いたので紹介させていただきます。 役割 動機 仕組み 使い方 試用 まとめ 役割 このライブラリを使うと、GitのリモートリポジトリへHTTPでアクセスするためのサーバーを作ることができます。HTTPアクセス自体は、BacklogやGithub等のGitをホスティングしているサービスであれば概ねサポートしているので、普段あまり気にすることはないかと思いますが、独自にGitを運用している場合、リモートリポジトリの前に clone、push、fetch  等で発生するHTTP通信を捌く仕組みを、なにかしら用意しなければなりません。 動機 私自身まだまだGoのニュービーなのですが、兎に角手を動か

BacklogチームのLeoです。ドイツ出身ですが、ゲーム、マンガ、時間通りの電車、日本語、納豆、カラオケが好きで日本に移住してきました。私はBacklogのGrowthチームですが、今日はプログラミング言語 Elm を使って Typetalk クライアントアプリを開発したお話をします。 さて、 Elm とは英語でニレ（楡）属の樹木の総称、ハルニレの通称です。そしてフロントエンド開発を楽しくするプログラミング言語でもあります。そんなプログラミング言語の Elm を使った開発、気になりませんか？ 目次 Elm言語 Elmは何が美味しい？ こんにちは世界樹 Hello WorldでElmの構文とElmアーキテクチャー入門 Elmは関数で出来ている ElmでHTMLを植える Elmアーキテクチャー降臨 世界樹から巣立つ Typetalkの世界へようこそ ElmでTypetalkクライエントを作る

私は母親であり、プログラマーです。家事育児のため残業は基本できません。 しかし母親業と並行しながら、あるプロジェクトにリーダーとして参加する機会を得ました。「 ママプログラマー 」の仕事の進め方と、プロジェクトのリリース日を厳守できた3つの理由、そして仕事をする母親としての意見を最後にまとめたいと思います。 ママプログラマーの仕事の進め方 1. 限られた時間を有効利用する 家の雑用は毎日細々とあり、夜 7 時に帰宅したかと思えば 気付くと 10 時を回っています。 残業をしないと最初に書きましたが、台所で Backlog や Typetalk を眺めてはいます。 家事をしているとパソコンを開くこと自体が億劫に感じます。スマホでさらっと確認できるのはとても便利です。 空いた時間で仕事の状況を把握しておくと、次の日の朝にチェックすることが少なくなり、すぐに集中して開発に取りかかれます。 2.

Backlog 開発チームの saki です。仕事は Scala と Java ですが、Ruby や JavaScript などのいわゆる動的型付け言語も好きです。最近はフロントエンドに興味がありプライベートで Vue.js を触っています。 Vue はプログレッシブフレームワークを謳っており、その名の通り最初は小さく導入でき、ソフトウェアの成長に合わせて他のライブラリを組み合わせることで規模の大きい開発にも利用できる柔軟さが気に入りました。ドキュメントも充実しており学びやすいと思います。どのライブラリも自分が一番と宣伝する中で、他のフレームワークとの比較 のページには誠意を感じました。 今回はそんな Vue を使って、かんばんライクなタスク管理アプリの簡単な作り方を紹介します。アウトラインは以下です。 基礎の作成 状態別にタスクを抽出する処理を作成 task-card コンポーネントの作

こんにちは Backlog 開発チームの下川です。現在、Backlogは日本語版と英語版で分けていたドメインをbacklog.comに統合するプロジェクトを進めています。その一環で内部的に使用するAPIサーバーの実装に Go言語 を利用することになりました。過去に Go言語 を少しだけ使っていた筆者ですが、今回本格的に使ってみて引っかかった点とその対策を列挙してみました。 要約 開発は基本的にワークスペースの下でする インターフェイスをポインタ渡ししない 標準のerrorsパッケージが物足りなければgithub.com/pkg/errorsを使ってみる エラーの種類で分岐する方法はいろいろあるが、唯一の解はない for文の入力に飽きたらIDEのテンプレート機能を活用してみる 必ずワークスペースの下で開発するものなのか Goにはワークスペースというものがあります。ワークスペースはディレクトリ

Go言語 ってぶっちゃけた話どう？Go言語開発者が本音を語った Geeks Who Drink in Tokyo をレポート！ 2017年6月23日にヌーラボ東京オフィスにて「 Geeks Who Drink in Tokyo–Go Go Golang Edition!」を開催しました！本イベントは、6月28日に福岡で開催された「 Geeks Who Drink in Fukuoka -Go Go Golang Edition!-」のロードショーイベントです。実際の開発でGoを使っている Go言語開発者 や、今後使いたい！という方が集まり、様々な視点でGo言語を使った開発に関するノウハウを共有しました。議論が白熱したイベント模様をお届けします。 全員で「Go Go Golang!」の掛け声と共に写真を撮りました！ 他言語と比較したGo言語の良し悪し及び学習について 最初に登壇したのは、日本