はてなブックマーク

はじめに こんにちは、システムエンジニアの蛸井です。 最近は React のパフォーマンスチューニングにハマっており、どのようなコードを書くのが最適なのか気になったため色々と調べてきました。 今回の記事では、パフォーマンスチューニングの中でも React Hooks の useCallback に絞って、適切な使い方・使い時について詳しく解説します。 useCallback とは React Hooks の useCallback について解説します。 公式ドキュメントには以下のように記載されています。 https://ja.reactjs.org/docs/hooks-reference.html#usecallback メモ化されたコールバックを返します。 インラインのコールバックとそれが依存している値の配列を渡してください。useCallback はそのコールバックをメモ化したものを

この記事は 2021/09/16 (木) に行われた WESEEK Tech Conference の内容をまとめたものです。 発表前半部分の 「OpenID Connect に対応した認証基盤を構築した話」 を掲載しております。 既存RailsアプリをSSO化して、本番環境で活用した話【WESEEK Tech Conf #12】 目次 インターネットマルチフィード様紹介 インターネットマルチフィード(株)とは？ MF社では、JPNAP と transix というサービスを提供しております。 JPNAP は IX(Internet eXchange) のサービスで、様々な事業者様にご利用いただいております。 transix は NTT 東・西日本が提供しているフレッツ光の IPv6 IPoE 接続を事業者様向けに提供しているサービスです。 各サービスの詳細な内容については、こちらをご覧くだ

こんにちは、エンジニアのYoheiです。 早速ですが、皆さんはテストコードを書いたことはありますか？ テストを書くとなると腰が重くなってしまう方もいるかもしれませんが、実はテストを書くと良いことがたくさんあるんです。 テストについてよくわからない方、これからテストを書き始めるという方はぜひ読んでみてください！ 前半は、テストの概要について説明します。 後半は、Javascriptの テスティングフレームワークである Jest を使って実際のコードを例に説明していきます。 まずはテストの概要について簡単に見ていきましょう。 テストとは ※学校でやるテストではありません。 ここでのテストとは、プログラムのテストです。 プログラムのテストとは、実装したプログラムが意図した通りに動いているかを検証するために行うものです。 テストの種類 テストには主に３つの種類が存在し、以下のように分類できます。

作成したコネクタを一般にも公開する場合には、適切な認証方法を選択することが必要です。今回は Codelab でも説明している NONE を利用します。 認証方法の詳細は こちら を参照してください。 getConfig() の定義 Looker Studio で作成したコネクタをデータソースとして追加する際に、コネクタに任意のパラメータを渡すようにできます。 このようなものです。 コードを下記に示します。 getAuthType() の後に続けて記載してください。 function getConfig(request) { var config = cc.getConfig(); config.newInfo() .setId('instructions') .setText('Enter the Redmine project ID to get a list of Issues for

はじめに 今回は、ブックマークレットを使って業務効率が少し上がったことについて話してみたいと思います。 ブックマークレットとは wikipedia では以下のように説明されています。 ブックマークレット (Bookmarklet) とは、ユーザーがウェブブラウザのブックマークなどから起動し、なんらかの処理を行う簡易的なプログラムのことである[注釈 1]。携帯電話のウェブブラウザで足りない機能を補ったり、ウェブアプリケーションの処理を起動する為に使われることが多い。 wikipedia - ブックマークレット 簡単に説明すると、ブラウザで開いているページに対して、任意の Javascript を実行できる機能です。ブックマークレットと似ているものとして、ブラウザの拡張機能があります。「hogehoge してくれる拡張機能が欲しいけどストアには存在しない。でも自分で拡張機能を作成するほどのもの

この投稿は、弊社が提供するWESEEK TECH通信の一環です。 WESEEK TECH通信とは、WESEEKのエンジニアがキャッチアップした技術に関する情報を、techブログを通じて定期的に発信していくものです。 はじめに こんにちは、システムエンジニアの かおり です。この記事では、TypeScriptで用いられる Enum型 とUnion型の基本的な使い方から、Enumを避けるべきと言われている理由、Union型を用いてEnumのように書く方法などを説明しています。 Enum (列挙型) とは? そもそも Enum とは何か、なんのために使うものなのでしょうか。 ここで説明している Enum とは総称であり、列挙型とも呼ばれます。以下の例は TypeScript のコードですが、他の言語でも存在する概念・実装であり、複数の定数を一つにまとめて定義したり管理したりすることができます。

この記事は、2021/9/2 に行われた WESEEK Tech Conference の内容をまとめたものです。 目次 はじめに この記事ではフォームの基礎について扱い, その後 React でのフォームの基礎, 実装をしてみてライブラリ (react-hook-form) を導入する話, react-hook-form の基礎と導入例について扱います 対象読者とこの記事で扱う内容 React のフォームの基礎を知りたい フォームってなんだろう Controlled or Uncontrolled とその基礎 react-hook-form について知りたい 基礎 Tips, GROWI.cloud での導入事例 そもそもフォームどういうもの ? ユーザとアプリケーションでの対話を表現しているもの。いろいろ種類がある。 一番単純なフォームから考えてみる 名前を入力したら Submit を

この投稿は、弊社が提供するWESEEK TECH通信の一環です。 WESEEK TECH通信とは、WESEEKのエンジニアがキャッチアップした技術に関する情報を、techブログを通じて定期的に発信していくものです。 関連記事 開発でのロックの重要性とORMのロック実現例〜楽観的ロックの利用例|フレームワーク O/R マッパー 開発でのロックの重要性とORMでのロックの実現例 |楽観的ロックの紹介 Ralisへ機能フラグ(Feature Flag)を追加し各フラグを制御する エラーの内容 Rails 6 で、任意の host 名を指定してアクセスをしようとしたとき、下記のようなエラーが表示されることがあります。 Blocked host: hogehoge-host.com To allow requests to hogehoge-host.com, add the following t

この投稿は、弊社が提供するWESEEK TECH通信の一環です。 WESEEK TECH通信とは、WESEEKのエンジニアがキャッチアップした技術に関する情報を、techブログを通じて定期的に発信していくものです。 はじめに 今回の記事では Rails の権限管理 gem である CanCanCan について、導入手順と機能の解説を行います。導入手順を飛ばして機能の解説を読みたい方はこちらを押してください。 CanCanCan とは CanCanCan とは、Ruby on Rails の権限管理 gem であり、特定のユーザーがアクセスできるリソースを制限します。 どういうことかと言うと、例えば admin, manager, read_only という3つの権限があったとして、それぞれは以下のことができるように設定を行うことができます。 admin という権限を持っているユーザーは管理

WESEEK の kouki です。GitHub 個人アカウントは kaishuu0123 で活動しています。 今回は SEROKU からの引用ではなく、オリジナル記事として「GROWI のユーザーズガイドをリニューアルした話」を書かせていただこうと思います。 ドキュメントサイトはこちらです: https://docs.growi.org リニューアルしようとしたモチベーション WESEEK では最近 GROWI.cloud をリリースいたしました。 社内wiki|ナレッジベース|情報共有ツールのGROWI.cloud GROWI.cloud リリース以前では、Geek な方たちが GROWI を触っているという状況で、Issue も上げてもらいつつ、ポジティブなご意見をいただいて、特定のクラスタで盛り上がりを見せていました。 しかし、今後 GROWI.cloud と共に GROWI のコ

「SEROKU フリーランス(以下、SEROKU)」の中の人をやっている kouki です。 今回は 社内 Kubernetes 実験環境をRancher 1.6から 2.0にアップデートして復活させた話 の中でお話しした「2.0で行ったトラブルシューティング」の「グローバル IP とプライベート IP 2つの足(NIC)を持つサーバを Kubernetes クラスタのネットワークに所属させることができない (Calico ネットワークが確立されない)」という件についてお話させていただきます。 経緯 経緯としては、 Rancher を利用した Kubernetes クラスタに対してインターネットからリーチャビリティを持たせるためにグローバル IP アドレスと社内通信用のプライベート IP 2つの足(NIC)を持つサーバをクラスタに参加させようとしました。 その際に、Kubernetes ク

SEROKU の開発を例に、弊社で使っているリモートデバッグとロガーの Tips をご紹介します。 当記事は 2018 年、と過去の記事ですが、現在でも応用可能な Tips になっています。 案件としても OSS 成果物としても、JavaScript を利用するシチュエーションは増え続けています。まだまだ枯れた言語とは言い難い状況で、使われるバージョンも ES5 から ES7 まで進化を続け、新しい文字列リテラルや async/awaitのような「イマドキの JavaScript の書き方」を紹介する記事は多い中、デバッグはこうあるべきという情報は比較的少ないように思います。 本記事では JavaScript による開発、特に node.js を使ったサーバーサイド開発環境および babel を使ったクライアントサイド開発環境で便利なロガーの Tips、そして Microsoft 提供の

こちらは 「SEROKUを支える技術〜プロジェクト管理編〜」からの転載です。 本記事では SEROKU の開発を例に WESEEK で行っているプロジェクト管理について紹介しています。 こんにちは！初めまして。WESEEKの haruhikonyan と申します。 SEROKUを支える技術と題して SEROKU で使われている技術をできる範囲で数回に分けて紹介をしていきたいと思います。 スクラムによるアジャイル開発 SEROKU開発だけではなく、WESEEKではすべてのプロジェクトをスクラムによるアジャイル開発で進めています。 アジャイルを採用している理由としては世界的に見ればデファクトスタンダードだということと、ウォーターフォールに比べるとプロジェクトの成功率が高い点にあります。 弊社ではアジャイルでの開発を5年以上も前から行ってきていて、その知見も十分に溜まっていることも理由の一つです