はじめに こんにちは WESEEK でわりと何でもやっている haruhikonyan です。 みなさん TypeScript 書いてますか？ フロントエンドはもちろん Node でサーバサイドを書いてもよし、さらに型安全！ そんな型安全な TypeScript をより強固に使いこなすための User-Defined Type Guards の一つである is 演算子を使った自作型ガードの紹介をします。 型ガードとは まず最初に型ガードとは何かです。 概要は参考 URL を読んでいただければいいんですが、おそらく一番使うだろうなのは以下のようなものかと思います。 type NullableString = string | null const func = (nullableString: NullableString) => { if (nullableString === null)

こんにちは、WESEEK でエンジニアをしている宮沢です。普段はオープンソースな wiki である GROWI を開発しています。今回はそんな GROWI のビジュアルリグレッションテストで利用している Cypress で発生した XHR エラーの対処方法について解説していきます。 エラー内容 今回紹介するエラー内容は以下の赤丸で囲った部分となっています。スクリーンショットは実際の GROWI のログイン画面です。 実際にエラーが発生した Cypress のコードは以下のようになっています。具体的は、/login に遷移して、あらかじめ登録されているユーザーネームとパスワードを入力、 ログインボタンを押してログインをするという Cypress のカスタムコマンドです。 使う場合は cy.login(username, password) このような感じで書きます。 Cypress.Comm

こんにちは、GROWI.cloud の開発・運用を担当している WESEEK のエンジニアの伊勢です。 今回は、 GROWI.cloud の開発で困った問題が起きて、その問題を解消した時の話をご紹介します。 背景 GROWI.cloud は node.js を主な言語として開発しており、そのプロジェクトを役割に応じて「プロジェクトA」「プロジェクトB」... と分割しています この「プロジェクトA」「プロジェクトB」... が互いに通信することで、 GROWI.cloud のサービスは成り立っています また最近になって、開発環境は VSCode の devcontainer(, docker-compose) を利用することになりました 各プロジェクト単体での開発に限っては、他のプロジェクトとの連係に社内テスト環境を利用していたため、devcontainer 化の影響はありませんでした 開

作成したコネクタを一般にも公開する場合には、適切な認証方法を選択することが必要です。今回は 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

皆さんこんにちは！WESEEK ソフトウェアエンジニアの 増山 です。 今回はブラウザ上で実行される JavaScript の正規表現がテーマです。正規表現リテラルと RegExp クラスは何が違うのか、どんなメリットデメリットがあるのかについて解説します。また、ブラウザ上で実行する際の注意点についても説明します。 目次 はじめに JavaScript の実行環境は主にサーバーサイドで使われる Node.js だったり、ブラウザで使われる Chrome の v8 engine や Safari の JavaScriptCore などがあります。 ウェブアプリケーションを開発していると特にブラウザ環境の差異によって Chrome では動くけど Safari では動かない！なんて場面に遭遇することもあります。 正規表現も、ブラウザの影響を受ける要因の一つです。今回は、JavaScript の正

はじめに こんにちは、エンジニアの Yohei です。 みなさんは VSCode のショートカットは使っていますか？ コピーしたい単語がある時に、端から端までドラッグで範囲選択して、右クリックでオプションを開いて、コピーをクリックして、という丁寧な動作、 まさかやっていませんよね？ ドキッとした方やショートカットを使ったことがない人にはピッタリの記事です。 この記事はより多くのユーザーが楽する方法を知るきっかけを増やすことを目的として執筆しました。 覚えるととても便利なショートカットをいくつか記載しましたので、ぜひ使いこなして周りの人にも教えてあげて下さい。 ショートカット一覧

はじめに こんにちは、インターン生の手塚です。 今回はGROWIにおけるwebpackの設定について、調べてみたので記事にします。この記事はGROWIにおけるwebpackの設定に着目しているのでwebpackの基礎知識や、使い方の詳細は説明していません。webpackについてある程度の知識がある人に、プロジェクトへの活用例として参考にしてもらえればなと思っております。 webpackは設定が複雑で、そのため「webpack職人」と呼ばれる人たちが存在します。本当は、誰もが簡単に設定できるのが理想であり、Next.jsなどでは一部を自動的にやってくれたりもしています。ですが、まだwebpackがweb開発におけるモジュールバンドラーとして多く用いられているのは事実であり、webpackの知識は持っていて損はないでしょう。ということを先輩に言われたのでそういう思いで勉強しました。 そもそもw

UI flickering はイケてない WESEEK エンジニアの武井です。 みなさん、フロントエンドプログラミングやってますか？ 今回のネタは「UI flickering」。React の初回レンダリングやステートを更新した際、こんな感じの挙動してないでしょうか。 出典: https://stackoverflow.com/questions/55032136/react-ui-flickering-when-state-updated この一瞬今描画しているアイテム消えてパッと次のアイテムが出てくるまでの一瞬の間が見える現象、こちらが「UI flickering」です。 和製英語だと「UIフリッカー」とか言われる事もありますがあまり一般的ではなく、「カクつき」「チラつき」みたいな表現の方が馴染みがあるかもしれません。 UI flickering は、普通に React で Backe

はじめに(執筆の動機) GROWI.cloud は、弊社が主に開発し、 OSS として GitHub に公開されている GROWI を、 SaaS としてクラウド版提供するサービスです。 本サービスでは、サービス上で立ち上げる GROWI のバージョンを適切にコントロールするために npm で公開されている semver ライブラリを利用しています。 実装の際に調べてみたところ、https://devhints.io/semver など semver の概念のチートシートはありましたが、Node.js の semver ライブラリの日本語版で分かりやすいチートシートや参考記事が少ないなと感じたため、今後の誰かのためになるならと思い執筆しました。 ご参考になれば幸いです。 semverとは メジャー.マイナー.パッチ(-プレリリースprefix.ブレリリース番号) の3つ(プレリリースを入れ

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