クライアントサイド(ES Module)でMicro Frontends

2021年、あけましておめでとうございます。本年も宜しくおねがいします。最近、体重が増えてしまったため、有酸素運動を頑張っています。 本記事は、昨年の冬あたりから検証していた クライアントサイド統合でのMicro Frontendsについて話そうと思います。検…

2020年の振り返り。結婚と継続力

2020年も、もう残りわずかになりました。今年の振り返りをはじめてブログに残そうと思います。 技術 UseCotlin 2020年3月より、自前で作ったツール Cotlin で技術キャッチアップをはじめました。このツールは、Twitterに投稿された技術資料(ex.speakerdeck,s…

コロナ禍におけるエンジニアのためのCloud IDE

2020年3月頃からコロナが流行りだし、もう12月になります。働き方が大きく変わり、リモートワークが当たり前の時代となりました。 エンジニアの働き方も同様に変わりました。そこで、今回はCloud IDEというものを紹介しようと思います。 リモートワークとDaa…

TypescriptでArchUnitしてみた

ArchUnitをというものを最近知りました。依存関係のテストができるそうです。さっそく試してみたいと思いますので、その備忘録として残しておきます。 ArchUnit TypescriptでもArchUnitしたい 試してみた 最後に ArchUnit www.archunit.org ArchUnit is a fr…

Cloudflare Workers (Edge Workers) で Micro Frontends

今回、またMicro Frontendsの構築を試みようと思います。構築パターンの内、サーバーサイド統合パターン、特にエッジサイド統合を試しました。 その内容を紹介します。サンプルコードは、下記に残しています。 github.com Edge Side Include (ESI)って? Edg…

20代後半エンジニアである私がこれから学ぶべきこと

Web

PexelsのAkil Mazumderによる写真 私は、現在26歳のWebエンジニアです。これまでの技術に対する学び方と、これからの技術に対する学び方について、少し考えたいと思っています。 これまでの20代前半 新卒入社した当時の私は、業務上、PHP + MySQL on AWS の…

技術におけるアンテナの張り方 (巨人の肩に乗れ!)

Photo by JESHOOTS.COM on Unsplash エンジニアは、普段様々なところから技術をキャッチアップすると思います。それは、SNSであったり、ブログであったり、動画であったりです。 そこで、私の技術をキャッチアップするためのアンテナの張り方について、紹介…

Micro Frontends を調べたすべて

Photo by Dil on Unsplash Micro Frontendsに関わる記事を100件以上読みました(参考記事に記載しています)。そこから得たMicro Frontendsについてこの投稿に記録します。 また、調査メモについて、次のリポジトリに残しています。 github.com 発端 実績企業 …

Zalando tailor で Micro Frontends with ( LitElement & etcetera)

Photo by Kenny Luo on Unsplash Zalando社が開発したTailorを使って、サンプルWebアプリをMicro Frontendsで構築してみました。Tailorはサーバーサイドで統合するアーキテクチャです。クライアントサイドは、Web Componentsで作られているLit Elementを使っ…

Ara-Framework で Micro Frontends with SSR

Photo by Artem Sapegin on Unsplash みなさん、こんにちは。silverbirder です。 私の最近の興味として、Micro Frontends があります。 silverbirder180.hatenablog.com 今、Ara-Frameworkというフレームワークを使った Micro Frontends のアプローチ方法を…

Apache Beam + Kotlin 開発 実践入門

Photo by tian kuan on Unsplash どうも、こんにちは。Re:ゼロ2期 始まりましたね、 @silver_birder です。 最近、仕事の関係上、Apache Beam + Kotlin を使うことになりました。それらの技術が一切知らなかったので、この記事に学んだことを書いていきます✍…

Webアプリのテスト観点を調べてまとめてみた (25選)

最近、Property Based Test という言葉を知りました。 他にどういうテストの種類があるのか気になったので、調べてみました。 本記事は、テストの種類を列挙します。 ※ 使用する技術は、私の都合上、node.jsで選んでいます。 テスト観点一覧 Cache Test Code…

ZoomのMeetingを自動生成するGASライブラリ zoom-meeting-creator を作った

みなさん、Zoom使っていますか? ZoomのMeetingを自動生成するGASライブラリを公開しましたので、 そのきっかけと使い方について紹介しようと思います。 きっかけ 作ったもの きっかけ 社のSlackで次のqiitaの記事を知りました。 qiita.com GASからZoomのMee…

アカウント画像一括更新ツールを作ったので、紹介と学びについて

GoogleやGithubなど、様々なサービスのプロフィール情報(画像, etc)を一括更新するツール、puppeteer-account-manager を開発しました。 開発の目的や、開発から得た知見を紹介します。 リポジトリは、こちらです。 github.com なんで作ったの? それ、Grava…

Micro Frontends を学んだすべて

Micro FrontendsというWebフロントエンドアーキテクチャがあります。 このアーキテクチャを知るために、書籍を読み、簡単なサンプルWebアプリを開発しました。 そこから学んだことをすべて議事録として残したいと思います。 モノリシックな Webアプリケーシ…

TwitterにあるLinkを収集するツール Cotlin で、世界中のプレゼンテーション資料を知ろう

Twitterに投稿されているLinkを収集するツール Cotlin を作りました。 Collect links in tweet から、Cotlinという名前にしました。Androidのアレに似ています。 github.com www.npmjs.com 動機 技術スタック 困ったこと 良かったこと 最後に 動機 私は、con…

Mac で バ美肉 りたい! (Zoom + Gachikoe + 3Tene or Reality)

きっかけ 構成 音声 Voice Changer: Gachikoe 仮想マイク 動画 Application for VTuber Desktop: 3tene Asserts Mobile: Reality 仮想カメラ 使い方 (Zoom) 終わりに 参考リンク 追記 きっかけ みなさん、リモートワーク(テレワーク)してますか? Hangouts…

Google Apps Script で FetchAllとRedirctURL の組み合わせは悪い

Google Apps Script (以下、GAS)で、困ったことがあったので備忘録として残しておこうと思います。 やろうとしたこと 取り組んでみたこと 追記 (20200228) 困ったこと 最後に 教訓 やろうとしたこと 特定ハッシュタグにおける、ツイートに書いてあるリンクを…

GMailをGCalendarに登録するサービス rMinc を作ってみた

rMinc ターゲットユーザー GMailとGCalendarを使っている人 メールを開くって面倒じゃないですか? 例えば、次のようなメールを受信していたとします。 アマゾンで商品を購入した際、お届け予定日が記載されたメール 映画館(TOHOシネマ)でネット予約した際、…

1コマ漫画検索サービスTiqav2 (Algolia + Cloudinary + Google Cloud Vision API) 作ってみた

画像で会話って楽しい Tiqav2 Tiqavとは? Tiqav2とは? 2つの機能 画像とテキストを保存 画像を検索&表示 SaaSは個人開発には最適 終わりに その他 画像で会話って楽しい 皆さん、チャットツールでコミュニケーションするとき、絵文字や画像って使ってます…

Google Apps Script でも テスト がしたい! (Clasp + Typescript + Jest)

Google Apps Script + Typescript + Jest Google Apps Script(以下,GAS)でライブラリを公開しました。ライブラリを開発する際、テストのフィードバックサイクルを短くするため、Clasp + Typescript + Jest という技術スタックを選択しました。 その開発体験…

エンジニアのためのスマートホーム化

IoT

Banner vector created by macrovector - www.freepik.com エンジニアの皆さん、IoT使っていますか? スマートホームに欠かせないIoT商品を使うことで、生活体験はより良くなります。 この記事では、ご自宅をスマートホーム化するためのIoT商品をリストアッ…

GDG DevFest Tokyo 2019に参加したら、Webの未来にワクワクした

GDG DevFest Tokyo 2019というイベントに参加してきました。 最近はプライベートの都合上、中々時間が取れていませんでした。 しかし今回、会社の都合上、良い感じに時間を確保できたため、こちらのイベントに参加してきました。 大阪→東京 でわざわざ新幹線…

技術書典7で初執筆した経験をすべて公開

技術書典7で初執筆しました。 記事の目的 執筆でどういったことをしたのかの備忘録 執筆を考えている人の助けになりたい 実際に販売する本は↓のものです。 techbookfest.org 記事の目的 きっかけ 何をするのか 1. 文章作成 1.1. 書籍化ツール 1.2. 他ツール …

技術書典7 で「はじめてのWeb Components入門」を初出版します!

はじめてのWeb Components入門 表紙 この度、初めて書籍を出版することになりました! 「はじめてのWeb Components入門」本を技術書典7で販売します。 技術書典7って? あなたは誰? どんな本? 「実際にWeb Componentsを作成 」について紹介 コラムネタ 目…

Cloud Native Days Tokyo 2019 -2019年7月22-23日参加レポート

cloud native days tokyo 2019 今回、東京が開催されましたCloud Native Days Tokyo 2019に2日間とも参加してきましたので、報告しようと思います。 セッション毎の報告というより、全体を通した感想を話そうかなと思います。 CNCFの利用率 CloudNativeとは…

【増枠】Frontend de KANPAI! #7 - Going on 令和 - 2019年7月19日参加レポート

今回はDeNAさん主催のFrontendのイベントに参加してきましたので、 報告しようと思います。 frokan.connpass.com twitter.com frontend de kanpai frontend de kanpai tech board firebaseの勢いがすごい。あとnowも多少人気で、now信者の私とっては嬉しい …

AWS Summit Osaka 2019 2019年6月27日参加レポート

大阪のグランフロント大阪で開かれました「AWS Summit Osaka 2019」に参加してきましたので、 私の中で良かった3つのセッションを紹介したいなと思います。 aws.amazon.com AWS Summit Osaka 2019 もらったもの hastagはこちら twitter.com 私のメモはこち…

【増枠】Mix Leap Study #45 - Google I/O、WWDCまとめて報告会! 2019年6月15日参加レポート

今回は、ヤフー株式会社主催の下記セミナーに参加してきました。 Google/Appleどちらも大好きで、けど海外カンファレンスにいけなかった私にとって、今回の報告会は新鮮な内容ばかりでした。 その内容を記事に書こうと思います。 yahoo-osaka.connpass.com h…

【大阪・梅田】Kubernetes Meetup Tokyo #19 大阪サテライト- 2019年5月31日参加レポート

kubernetes osaka Satellite k8sjp-osaka.connpass.com 大阪からKubernetes Meetup Tokyoに参加できるとのことで、こちらに参加してきました。 Kubernetesの生みの親である3人の内の1人のJoe Bedaから、Kubernetesの歴史の経緯について教えて頂きました。 そ…