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.)
こんにちは、ヌーラボ Backlog課に所属するarata_nです。 日々プログラミングの仕事をしていく中で、「概念をとらえる」ということがとても重要だなーと感じていて、それを実際に取り組んでうまくいったことを紹介しようと思います。 概念をとらえる 唐突に「概念」と書き始めてしまいましたが、ここで自分の理解を説明させてください。 辞書をいくつか引いてみると、そのどれも物事のあらましや本質と出てきます。これをソフトウェアに当てはめてみるとどうなるでしょうか。一般的にはなんらかの解決したい問題があり、その解法そのものや解決に至るまでの手順を組み立てたのち具体的なコードとして記述します。先ほどの辞書的な意味から考えると、「解法や解決に至るまでの手順」が概念にあたるものでしょう。新規での開発であれば全体の設計の段階でこのようなことはよく考えられていると思います。 逆に既存のコードに新しい機能を追加
GraphQLライブラリをApollo→Relay→Urqlにハシゴした話 | 株式会社ヌーラボ(Nulab inc.)
GraphQLクライアントライブラリ乗り換え遍歴 私達のプロジェクトではReactのフロントエンドとバックエンドの通信にGraphQLを使っています。 GraphQLは、たいていの場合はHTTP POSTリクエストで リクエストボディ：GraphQLクエリ（文字列）と引数（オブジェクト）からなるJSON レスポンスボディ：データJSON をやりとりするだけというだけのシンプルなプロトコルなので、全てfetch関数で頑張るストロングスタイルで行けないこともないですが、やっぱり専用のクライアントライブラリを利用したほうが楽です。 そのライブラリとして一番有名なApollo Clientから始まってRelay、Urqlと、3ヶ月くらいの間に2回も乗り換えてしまったので、反省の意味も込めて記事にしたいと思います。 GraphQLクライアントライブラリがいろいろあってどう違うんだろうと迷った方の助け
Recoilで快適フロントエンド開発 | 株式会社ヌーラボ(Nulab inc.)
最近社内向けのツールを新規で開発していて、React + Next.js と合わせてRecoilとRelayを使うことにしたら大変素晴らしかったので、（すでに世の中に紹介記事がたくさんありますが）ご紹介します。 Recoilだけで結構な量になってしまったので、Relayについてはまた後日別の記事を書きます。 （追記：書きましたがRelay使わなくなったという記事になっちゃいました：GraphQLライブラリをApollo→Relay→Urqlにハシゴした話） Reactの提供元であるFacebook改めMetaが開発中の新しい状態管理ライブラリです。 アプリケーション内に複数のデータストアを持てる 非同期対応 React hooks前提 が特徴です。個人的に、Redux + middleware周りの全てをまるっと置き換えてくれると期待しています。 ※ 2021年11月現在、recoilはま
Recoil Syncでさらに快適フロントエンド開発 #ヌーラボ真夏のブログリレー | 株式会社ヌーラボ(Nulab inc.)
React界隈で大注目のRecoilについて、先日紹介記事を書いた藤田です。 Recoilで快適フロントエンド開発 Recoilに新しいパッケージRecoil Syncが加わったので、簡単にご紹介します。 軽くおさらい：コンポーネントの状態を管理する最もシンプルな方法=useState React hooksで最も基本的なuseStateは、コンポーネント中に閉じた状態を手軽に定義する方法でした。 const MyComponent: React.FC<{defaultName:string}> = ({defaultName}) => { const [name, setName] = React.useState(defaultName) : : このようなコードで、コンポーネント中で変更できる値”name”が使えて、初期値はコンポーネント引数のdefaultNameとなります。 Re
Cacooの次期エディターでWebpackのビルドを6倍早くした話-Wepackビルドパフォーマンス改善ガイド | 株式会社ヌーラボ(Nulab inc.)
こんにちは。みなさまがCacooで図の編集をするエディターを開発している、Cacooチームの国広です。Cacooチームでは、エディター部分のビルドに Webpack を使用しています。ビルド対象はTypeScript、JavaScript、PostCSS、Riot（のtagファイル）、画像等です。 そのままビルドするには少し我慢ならない程度に待たされるようになったので、Webpackの公式ドキュメントを見ながら少しだけビルドのパフォーマンスの改善を行いました。その結果、ビルドにかかる時間は当初のシンプルな構成に比べて6倍早くなりました。 対象読者 Webpackを使用している人 ビルドのパフォーマンスを改善したい人 Webpackのビルドパフォーマンス改善 ビルドとは何か 現在のCacooのエディターでは、いくつかのJavaScriptファイルをHTMLに読み込ませることでアプリを起動させ
真のパスワード強度を測定する5つのアルゴリズム | 株式会社ヌーラボ(Nulab inc.)
Webサービスでアカウントを登録する際、パスワードを入力する度にその安全度を表してくれる強度メーター。皆様もおそらく目にしたことがあるのではないでしょうか。GoogleやFacebook、Twitterのような大規模なサービスでも、サインアップ画面等に設置されています。 このUIの要素は、MSR(Microsoft Research)の論文によると類推されづらいパスワードを促してサービスの安全性を高めることに効果的だということが証明されています。 お客様自身の大事な情報を守る上でとても重要なパスワード。ヌーラボアカウントでも、類推されにくいより強度の高い設定を促すためにパスワード強度メーターを設置しました。 この記事では、パスワード強度メーターを設置するに当って得た知見をもとに、その裏側の仕組みをご紹介させていただきます。 パスワード強度ってなに ？ そもそもパスワード強度とはなんなのか。
Cacooの新UIを裏で支えるHeadless Chromeによる自動保存機能の実装 | 株式会社ヌーラボ(Nulab inc.)
こんにちは、Cacooチームの平山です。僕は対外的には技術のことをお話しする機会は最近はあまり無いのですが、今回はCacooのUIリニューアルに伴い追加された、内部的には「自動保存」と呼ばれる機能の技術的な仕組みについてお話しします。 皆さん（きっと）ご存知の通り、Cacooは2018年6月28日に全面的なユーザーインターフェースの刷新を行いました。これに伴い、以前は図の閲覧用と編集用に分かれていたページを、編集機能を持つ一つのエディタで担うという変更を実施しました。Google Docsをはじめとする、オンラインのドキュメントツールと同等のユーザー体験に倣うような変更とも言えます。 新しいユーザーインターフェースのエディター さて、以前からCacooを利用されている方はおそらくご存知かと思いますが、ダッシュボード（図の一覧表示）のサムネイルや、ブログ等に張り付けるための画像などは、図の編
【2017年版】「福岡市」はエンジニアにとって注目の街！？2017年に福岡に進出したIT企業12選（※12月30日追記） | 株式会社ヌーラボ(Nulab inc.)
【2017年版】「福岡市」はエンジニアにとって注目の街！？2017年に福岡に進出したIT企業12選（※12月30日追記） 年末のお忙しいところ、失礼します。ヌーラボでHRを担当しているAngelaです。 みなさんにとって、2017年は、どんな年でしたか？ 個人的には、ヌーラボの本社がある「福岡市」という都市にとっては、IT分野などで大きなイノベーションへの一歩を踏み出した年だったのではないかと思います。 日本一の人口増加率「福岡市」 現在、福岡市は日本で一番人口増加率が高い街なんです。 日本一の人口増加率！ 「福岡が選ばれている事実」をデータで検証してみた 2016年に出されたこの記事によると、 人口増加率 第1位：5.1% 人口増加数 政令指定都市第1位：74,767人増（1,463,743人→1,538,510人） ※調査期間は、平成22年10月〜平成27年10月 という驚きの数字。
Go言語を使ってみて、個人的に引っかかったところと対処法。 | 株式会社ヌーラボ(Nulab inc.)
こんにちは Backlog 開発チームの下川です。現在、Backlogは日本語版と英語版で分けていたドメインをbacklog.comに統合するプロジェクトを進めています。その一環で内部的に使用するAPIサーバーの実装に Go言語 を利用することになりました。過去に Go言語 を少しだけ使っていた筆者ですが、今回本格的に使ってみて引っかかった点とその対策を列挙してみました。 要約 開発は基本的にワークスペースの下でする インターフェイスをポインタ渡ししない 標準のerrorsパッケージが物足りなければgithub.com/pkg/errorsを使ってみる エラーの種類で分岐する方法はいろいろあるが、唯一の解はない for文の入力に飽きたらIDEのテンプレート機能を活用してみる 必ずワークスペースの下で開発するものなのか Goにはワークスペースというものがあります。ワークスペースはディレクトリ
リアルタイム共同編集可能なMarkdownエディタ「HackMD」をハックしてみた | 株式会社ヌーラボ(Nulab inc.)
家で野生のカビゴンが出てきて無事にGetできて、ここ最近で一番興奮した中村です、こんにちは。 今日は、リアルタイムでテキスト共同編集ができるMarkdownエディタ「HackMD」というOSSツールをhackしてみたので、そのhack方法についてご紹介します！ HackMDは、ヌーラボのリモートワークやミーティングでの議事録ツールとしても活用しており、導入の背景や他のツールとの使用比較についてもまとめました。 背景：オンラインでのリアルタイムコミュニケーションを円滑に ヌーラボは、国内だけでも福岡・東京・京都、さらに海外も含めるとニューヨーク・台湾・シンガポールなど、各地域に拠点があり、たくさんのスタッフがいます。拠点間でも、朝会など日常的にコミュニケーションが発生するので、face to faceじゃなくともオンラインでうまくコミュニケーションできる仕組みを必要としています。 今ヌーラボ
密着 24時！ MySQL 5.1 から Aurora への移行100日間 〜 Backlog 編 | 株式会社ヌーラボ(Nulab inc.)
Photo via Visual hunt Backlog の一部のスペースにて Amazon Aurora へと移行しました。ここでは、その経緯と実際に実施した作業を簡単にご紹介させていただきます。 移行の経緯 昨年末データベース障害が発生しユーザー様には多大なご迷惑をお掛けしてしまいました。 Backlog には Terraform をどう使っているかを紹介したブログ にあるように複数の運用環境があります。 その各々の環境の構築時期によって EC2 上で自前運用していた MySQL もあれば、RDS for MySQL もある、といった統一されていない状況でした。また EC2 上ではまだ MySQL 5.1 も稼働していました。 移行を検討するにあたり、優先したのは障害時の復旧が素早く出来ることと、少しでも運用の管理コストを下げることでした。Backlog のサーバは 100 台以上で
実践！ヌーラボサービスでの CloudFront の障害対策 | 株式会社ヌーラボ(Nulab inc.)
CDNが単一障害点にならないようにするために ヌーラボでは 2010 年 Cacoo の商用サービスの開始に合わせて AWS における運用を開始しました。当時、運用環境として AWS を採択する決め手の一つになったのが CloudFront でした。その後も着々とエッジロケーションは増え、独自ドメインのサポートなど魅力的な機能も提供され、今ではヌーラボの全サービスの静的ファイルの配信で利用している、無くてはならないサービスとなっています。 その魅力の反面、CloudFront の障害は、アプリケーションそのものに問題がなくても、以下のような表示が崩れた画面が表示されて、ユーザが全くサービスを使えなくなるという、その影響が非常に大きいものです。また障害の原因が DNS やネットワークの経路における問題といった、私たちが直接解決しにくい領域にあることもしばしばです。 ただ、どんな事情であれ、障
ガントチャート上でドラッグ＆ドロップでタスクの並び替えられるようにしてほしい – 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年の老舗企業！ミートボールでおなじみの石井食品様で、プロジェクト
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
