はてなブックマーク

Rollup から esbuild に乗り換えた null です。 [Web フロントエンド] esbuild が爆速すぎて webpack / Rollup にはもう戻れない https://www.kabuku.co.jp/developers/ultrafast-tsx-build-tool-esbuild Webpack や Rollup の遅さにイライラしている方はたくさんいらっしゃると思います。かといってモジュールバンドラーの乗り換えなんてそう簡単にできるものでもありません。まして esbuild には機能 x がないじゃないですか、上記記事によればプラグインシステムもないし… 時代は変わりました。上記記事はすっかり古くなってしまいました。当時（v0.5.3）未実装だったいくつかの重要な機能が現在（v0.8.29）では利用可能になっています。 特筆すべきは CSS ローダーとプ

はじめに こんにちは。JavaScriptの本を書いたりしているあんどうです。 JavaScript、流行ってますよね。より正確にはNode.js流行ってますよね。ぶっちゃけハンズオンなんとかもNode.jsの方がだいぶ・・・ゲフンゲフン。まぁハンズオンNode.jsはマジ名著なのでそのことは置いておくとして、そのNode.jsについて正直なところみなさんはどう思ってますでしょうか？ 私はRails文化圏出身なので、開発に必要とわかりきっているツールを事前にわざわざあれやこれやと検証して設定してみたいなのが面倒くさくてしょうがないです。なんか思いついてキーボードに手を置いたらノータイムで機能の実装を開始したい。 しかもすぐ新しい同じようなツールが出てきて数年で主要ツール総取っ替え上等。ポジティブに捉えれば万物流転とか諸行無常とか人生のあれこれの現れかもしれないけど、正直回し車の中のハムスタ

※ 2021/09/15 時点の話です。議論が活発なので、これからどう流れるか分かりません。この記事ではたくさんのリンクを貼っていますが、議論の焦点を理解するにあたって最も重要なリンクはこれです。 TC39 Pipeline Operator – Hack vs F# https://benlesh.com/posts/tc39-pipeline-proposal-hack-vs-f-sharp/ 2 つの仕様案 TC39 の Pipe operator （以前は Pipeline operator と呼ばれていました、 Wikipedia によれば Pipe operator を日本語で「パイプライン演算子」と呼ぶようです）のプロポーザルには少なくとも 2 つの異なる仕様案「F# pipe」と「Hack pipe」があります。以前はこれらを組み合わせた「Smart mix」案もありました

はじめに がんばって書いた書籍が低評価で少々しょんぼりしているあんどうです。まぁ、つい力が入りすぎて袋小路に思い切り突っ込んだ結果抜けられなくなることってあるよね。あるある。そんなわけで今日はできるだけ力を入れずテンション低めにサクッと行きます。 で、GoのWASM。大道の真ん中をまっすぐに歩まれているみなさんはWASMするときはRustかいっそC/C++をemscriptenでってことになると思いますが、私はしょせん路傍の石の下で低評価が目に入らないように丸まっているダンゴムシ。せっかくだからオレはこのGoでWASMを選ぶぜって感じなんですが、ぶっちゃけあれ、めんどくさいすよね。 あ、ちなみに今回の話は「このめんどくささをまるっと解決！」みたいな気持ちのいい話ではなくて、ただただ「めんどくさいよね」っていうだけの話です。あーめんどくさい。 Rustの場合 まず比較のためにRustの例をあ

インラインスタイルと Tailwind CSS と Tailwind CSS 入力補助ライブラリと Tailwind CSS in JS この記事では Tailwind CSS 自体の紹介はしません。公式ページを参照してください。 https://tailwindcss.com/ Tailwind CSS とインラインスタイル Tailwind CSS 関連の記事を目にする機会が増えました。私もプロダクトに導入してしばらく使っていますが、 CSS in JS だと 10 行だったスタイルが 1 行にまとまり、コードの見通しが非常に良くなりました。多くの方には受け入れられている印象ですが、中には「なにそれインラインスタイルと同じじゃんダメじゃん」みたいな反応も見られます。まずはこれに反論しておきたいです。 インラインスタイルの問題点 そもそもインラインスタイルにはどんな問題があるでしょう？

こんにちは、 Elm Elm – A delightful language for reliable webapps https://elm-lang.org/ はじめに · An Introduction to Elm （Elm 公式ガイド日本語訳） https://guide.elm-lang.jp/ Elm は関数型の小さな言語仕様を持つ altJS です。 Redux が影響を強く受けた ことでも有名ですね。 “No Runtime Exceptions” は魅力的ですし、何より興味深いのは The Elm Architecture です。 Redux にはあまりセンスを感じられなかったのですが、 The Elm Architecture はとても良さげに見えました。 Elm が持つ 代数的データ型 と パターンマッチ、状態の不変性、 レコードの部分更新式 などとうまく馴染み、簡

はじめに こんにちは。お弁当盛りつけ係のあんどうです。 📢 Calling all #threejs devs: Let's make a mega thread of performance/efficiency tips & tricks for three.js! Big or small, name something that has helped you boost rendering perf, load times, memory management, etc. Textures, materials, loaders, shaders, geometries, you name it. — Jack Rugile (@jackrugile) 2018年2月21日 先月のことですが、ウェブ／ゲーム開発者のJack RugileさんのTwitterでの「Three.jsに

Node.js Advent Calendar 2019の21日目の記事です。 2019/12/25追記 もともと「Top-level awaitによるESモジュールの非同期化とDual Package Hazard」というタイトルにしていましたが、表現に勇み足な部分があり、ご指摘をいただいたので、少し修正しました。 「TLAによってNode.jsのESMが非同期になった」という表現はおそらく正確ではありません。ESMに関する2017年のNode.jsのドキュメントでは、特に理由は触れずに「ESMのロードは非同期で、それはブラウザの挙動と合致する」と記述されています。ここでいう「ブラウザの挙動」とは、WHATWG Loaderで定められた仕様を指すと考えられます。ECMAScriptの仕様としては、少なくとも2019まではESMが非同期であるとの記述はなさそうなので、ブラウザの仕様に合わせ

ソフトウェアエンジニアの尾崎です、最近は新規事業を立ち上げるべく色々やっています。この度、弊社2名（私とあんどう）が翻訳したGraphQLの入門書『初めてのGraphQL』がO’Reilly Japanから出版されます。（2019年11月13日（水）発売予定です。）今回はこの書籍について紹介します。 表紙の鳥はタカ目タカ科のボネリークマタカです GraphQLとは GraphQLは公式ドキュメントに “A query language for your API” とある通りAPIのためのクエリ言語です。GraphQLは2015年にFacebookによってOSSとして公開されました。2017年にGitHubの公開APIがGraphQLに移行されたことを契機に採用事例が増えてきています。 GraphQLのAPIはこれまでのAPIとはパラダイムが大きく異なります。現在主流のWeb APIはRoy

はじめに 最近よくクリーンアーキテクチャが話題になってて、関心が高まってる感じしますよね！ ということでカブク社内でも書籍『クリーンアーキテクチャ』の輪読会が開催されました！ この記事は null 個人の考察です。 クリーンアーキテクチャとは 書籍を読んでみた結果、次のブログ記事がすべてだと言っていいと思いました。 クリーンアーキテクチャ(The Clean Architecture翻訳) | blog.tai2.net https://blog.tai2.net/the_clean_architecture.html 上記ブログ記事に比べて書籍に含まれる文字数は膨大ですが、膨大なのは前提知識（プログラミングパラダイムとか設計原則とか）と歴史と補足（と著者のカタルシス）です。 以下の私の記述は基本的に上記ブログ記事に対する考察と取っていただいても差し支えありません（ただし引用文は書籍からの

はじめに こんにちは。カブクで虚無を担当しているあんどうです。日増しに夏めいて来た今日このごろ、皆さん如何お過ごしでしょうか。私はこの湿気がもう駄目なので週末に北海道に飛ぶ予定でしたが、どうやら台風が来ているようです。困る。 さて、先日参加したW3C Workshop on Web Gamesの「WebAssembly: status, Web IDL bindings, and roadmap」というセッションで、WebAssemblyから直接DOMを触れるようにしようという提案があることを知りました。なかなかアグレッシブな提案に衝撃を受けると共に、そう言えば「WebAssemblyの仕様策定プロセス何も知らんな」とか「今はどんな提案があるんだろう」とかいろいろ疑問が浮かんだのでざっと調べてみました。 なお、ここの内容はEmscripten & WebAssembly night !!

Conditional TypesやTuple関連の機能強化により、現在のTypeScript（v3.5.2）ではObject.assign()に正しい型をつけられることを知ったので、紹介します。結論から書くと次のとおりです。 type Assigned<T, U extends any[]> = { 0: T; 1: ((...t: U) => any) extends ((head: infer Head, ...tail: infer Tail) => any) ? Assigned<Omit<T, keyof Head> & Head, Tail> : never; }[U['length'] extends 0 ? 0 : 1]; type Assign = <T, U extends any[]>(target: T, ...source: U) => Assigned<T,

おはこんばんちわ、カブクの足立です。 前回から約半年、第6回目となるカブクエンジニア開発合宿に行ってきましたので、そのレポートをお送りいたします。 改善点: 合宿場所の変更 前回の場所変更による刺激増加に味をしめ、今回も新たな場所にチャレンジ。かねてより「一度はやってみたい」と話していたBBQ施設のある合宿所。メンバーがサクッと探してくれて感謝！ 野性味あふれる環境で刺激倍増です。 テーマとルール テーマとルールはずっと変わっていません。 テーマ ちょっと先の仕事に役に立つかもしれない何かにチャレンジする。 （個人にとって）新しい技術を楽しみましょう的な感じ。 ルール 1: 就業時間を守る ハッカソンみたく、深夜まで追い込んで何かを作り上げるということはしません。 限られた時間で最大の成果を目指します。これがいつものカブクのやり方です。 参加者同士の懇親も大事にしたい。残業無し！ 2: 発

はじめに はじめまして。 null です。最近の悩みは 2 歳半の息子が言うことを聞いてくださらないことです。 2 歳児もそうなのですが、 ソフトウェアフレームワークに振り回されてるって感じること、稀によくありませんか？？ ある程度の学習コストがかかるのは当然としても、冗長な書き方を要求されるわ、かゆいところに手が届かないわ、実データ投入したらパフォーマンス問題だらけだわ、バージョンアップしたら動かなくなるわで、あぁ私いま振り回されてるなぁ、みたいな。 「じゃあ使わなければいい」「じゃあ自分で作ればいい」という話ではなく、「必要以上には依存しない方が無難だよね」「フレームワークの外へ切り出せるところは切り出してみよう」という話をします。 続きを 3 行で 状態更新ロジックってフレームワーク非依存にできそうだよね でもフレームワークによって状態をイミュータブル（状態更新=状態オブジェクト生成

Kabuku Connect担当エンジニアの尾崎です。 今日は表題の通りエンジニア主導の求人票の更新フローを構築して、実際に求人票を更新したお話をします。 更新された求人票はこちらに掲載されています。 カブクでは積極的なエンジニア採用活動を継続しています。エンジニアメンバーも採用面接という形で採用活動に参画しています。私も半年ほど前から採用面接に携わっています。私は採用活動に比較的興味を持ったので、良い面接の方法やエンジニアの立場で採用の力になれることを考え続けています。 ある日connpassを眺めていると、エンジニア採用最前線というイベントがタイムラインに流れてきました。これは学べることがありそうだと考え私は即座に参加を申し込みました。イベントはエンジニア採用に詳しい4人の方々のパネルディスカッションが中心で、HRの方とエンジニアの方が半々程度で参加していました。この場で学んだことは多

フロントエンドエンジニアの今村です。任意のブラウザ上でJestで書いたテストを実行する方法を紹介します。 TL;DR Jestのテストランナーを任意のブラウザを対象に実行するのは難しい Jestのモックやアサーションの機能はブラウザ環境で実行可能 -> 「ブラウザ向けのテストランナー（たとえばKarma） + Jestのテストコード」の組み合わせならブラウザ上で実行できる Jestとは JavaScriptの世界で現在もっとも人気がありそうなテスティングフレームワークです。次のような特徴があります。 早い ブラウザ向けのコードのテストでもブラウザを起動せず、JSDOMというNode.js上に仮想的に用意したブラウザ環境を使う テストを並列に実行できる watchモードではコード変更時に関連するテストだけを実行する オールインワン テストランナー アサーション モック カバレッジ スナップシ

はじめに カブクで機械学習エンジニアをしている大串正矢です。今回は複数時系列データを1つの深層学習モデルで学習させる方法について書きます。 背景 複数時系列データは複数企業の株価の変動、各地域における気温変動、複数マシーンのログなど多岐に渡って観測できます。この時系列ごとにモデルを用意して管理するとなると学習、運用において多大なるコストがかかってしまいます。1つのモデルで複数の時系列を管理できれば運用が楽になるだけでなく、学習も1度で済むのでトライアンドエラーの工数も大幅に削減できます。 本記事ではそのために実現可能な2つの手法を紹介します。 Kerasで複数の時系列データを深層学習モデルで学習させる手法には2つあります。 複数入力型の深層学習モデル 個別入力型の深層学習モデルの組み合わせ 1の手法の利点はモデルがシンプルなので学習と予測が2の手法に比べ高速になります。 2の手法の利点は時

カブクでアルバイトをしている長瀬です。 今回は、degree と rad, EUR と JPYなど、ついつい間違ってしまいがちな概念を型レベルで区別するためのアプローチを紹介します。 tl; dr @fsubalさんの「TypeScript で幽霊型っぽいものをつくる」という記事で紹介されているやり方を使うとよい 一方で、PureScriptなどのプログラミング言語には、既存の型１つをラップして新しい型をつくるために newtype というキーワードがある TypeScriptは言語レベルではnewtypeをサポートしていないが、ライブラリとして newtype-tsがある。 newtype の本来の目的に加えて、その型で”正の値”, “0でない”などの条件をmonadicに表現することができる そのため内部表現に変換することになり、若干の実行時オーバーヘッドがある。必要でないなら@fsu

この記事はTensorFlow Advent Calendar 2018の23日目がぽっかり空いたので、ねじ込む予定が別の方が滑り込んでしまったので、作成した記事が宙に浮いてしまい、空いていた22日に今日が23日にもかかわらず押し込んだ記事です。 つまりTF Advent Calendar2018の22日目の記事です。 ビデオ判定が導入された昨今のスポーツ界では完全にアウトなやつですが、まぁいいよね。 おはこんばんちわ、カブク合宿ブログ担当¹の足立です。 先日、Google Developers ML Summitというイベントで「モバイル開発者の為のTensorFlow」という発表をさせていただきました。 発表資料 TensorFlowをエッジ環境で動作させるTensorFlow Lite（以下TF Lite）の仕組みとその実装方法が主な説明です。 TF Liteの

フロントエンドエンジニアの今村です。 この記事はAngular Advent Calendar 2018 11日目の記事で、テーマは多言語対応です。 Angular Advent CalendarなのでAngularの話を中心に書きますが、手法としてはAngularに限らず、ひろく（TypeScriptで書かれた）Webフロントエンド全般の多言語対応に適用可能なものです。というのも、私は以前にも似たような記事をQiitaに投稿していて、その時はReactをやっていました。 この記事ではQiitaに投稿した方法を少し改良したやり方をご紹介しますが、TypeScriptの型に甘えて多言語対応を実現したいという気持ちは一貫しています。 TL;DR 辞書ファイルをTypeScriptで書きたいという思いのもと、Angularの標準のi18n機能やその他のライブラリに頼らずに実装した多言語対応を紹介

GASでCompute Engineの時間に応じた自動停止/起動ツールを作成する 〜GASで簡単に好きなGoogle APIを叩く方法〜 Compute Engineの自動起動と自動停止 カブクで机に物が多いランキングのトップ争いをしている大橋です。 普段は早く帰ったり、GAE/Go、GAE/Pythonでサーバサイドを書いたり、TypeScriptでAngularJSやAngular(+ngrx)を書いたり、Apache Beamのジョブを書いたり、ComposerのDAGを書いたり、Jenkinsおじさんしたり、JIRAの整理したり、スケジュール考えたり、早く帰ったりしてます。フルスタックエンジニアではありません。 GCPでCompute Engineを利用して、開発サーバなどを運用していると、特定時刻にインスタンスを停止、再開したいことがあります。 例えば定時退社後にはCIサーバを止

機械学習エンジニアインターン生の杉崎です。 今回は時系列データ予測に一次元畳み込み層を使用した際の出力の可視化の方法について書きたいと思います。 本記事の目的 深層学習における畳込み層は多くは画像等の２次元データに使われることが多いです。そして、ブラックボックスであるモデルに対して理由を明らかにするため、中間層の重みや出力を取り出し可視化する様々な手法が提案されています。(下図) 画像引用元 しかし、そんな中で一次元畳込み層(Conv1D)を用いたモデルでは可視化の事例があまり多くありません。そこで今回はConv1D層の出力の可視化の一例についてご紹介します。 目次 本記事の目的 画像などの２次元データに対する可視化手法は数多く提案されている。 しかし、１次元データに対する中間層の可視化は事例が少ない。 そこで、１次元データを入力とする１次元畳み込み層(Conv1D)を使用したモデルを用い

株式会社カブクで、機械学習エンジニアとしてインターンシップをしている堀内貴文（大学4年）です。 このKabukuDevBlogのテーマは、「隠れマルコフモデル」です。 時系列パターンの認識に用いられることが多く、具体的な使用例としては次のようなものがあります。 – 音声認識 – 自然言語処理（品詞推定） – バイオインフォマティクス（塩基配列の解析） – 株価の変動予測 近年ではRNN（Recurrent Neural Network）などの人工ニューラルネットワークの発展を受け、隠れマルコフモデルはこれらに置き代わりつつあります。けれども、出力結果の導出過程が明瞭化されているなど、古典的な手法としての利点もまだまだあります。 この記事では、「隠れマルコフモデル」について初めて勉強をする人が、「隠れマルコフモデル」が何であるかのイメージをつかむことを目標に、基本的な事項を記述します。 前半

初めまして！　カブクでアルバイトをしている長瀬です。普段はWebフロントエンド関連の業務をしています。 先日、Angular 4.3.6で動いていたアプリケーションを6.1.0へ移行した際に得られた知見を共有します。Angular/Angular CLI 6への移行に関する日本語記事は、すでに以下をはじめとするすばらしい記事が世に出ています（私も参考にさせていただきました）。 Angular CLI v1.7からv6.0へのマイグレーションについて (for v6.0.0-rc.2) lacoさんの記事 angular-cliの移行作業がまとまっている Angular6に移行メモ 5.2 -> 6.0の移行 ngx-bootstrapなど、外部パッケージ関連の移行作業についても触れられている この記事では、上記の記事で紹介されている内容（移行手順や移行により改善されたこと）に加えて、 –