はじめにこんにちは、社会人学生 Advent Calendar 2023 の 19 日目を担当する watsuyo です。2023 年 3 月に産業技術大学院大学（AIIT）の情報アーキテクチャコースを卒業し、情報システム学修士（専門職）の学位を取得しました。そして、2023 年 9 月からはドイツのベルリンでフロントエンドエンジニアとして働いています。 AIIT の同期生や先輩方の中には、卒業後に海外でのキャリアを考えている方が一定数いました。今回はそういった方やこれから社会人大学院に進みたいと考えている方の参考になるように、私が AIIT での学びから得た知識と経験が、卒業後のキャリアにどのように影響を与えたのかを紹介したいと思います。 AIIT 在学中 (2021 年 4 月 ~ 2023 年 3 月)在学中はコロナ禍だったため、授業はすべてリモートで行われました。2 年次は、研究室

CloudflareのCDNについて解説しています。CDN（Content Delivery Network）は、Webアプリケーションのパフォーマンスと信頼性を向上させるために、遅延を減少させ、コンテンツを近くでキャッシュする手法です。CloudflareのCDNはAnycastルーティングを用い、Tiered Cache、Argo Smart Routing、Cache Reserveなどの技術を採用しており、パフォーマンス向上、コスト削減、セキュリティ強化を実現しています。 CDN Advent Calendar 2023 の 1 日目を担当する、watsuyo です。2023 年 9 月に、Classmethod Europe へ入社しました。 最近は、Cloudflare Workers や Next.js を使った開発で、 CDN や キャッシュについて考えることが多いです。別

CDN Edge Serverが静的コンテンツの高速配信とサーバー負荷の軽減にどのように貢献するかに焦点を当てた。CDN のキャッシング、画像最適化、ミニファイ化の技術を解説。 CDN Advent Calendar 2023 の 1 日目を担当する、watsuyoです。2023 年 9 月に、Classmethod Europe へ入社しました。 入社エントリでは、業務内容や技術領域に深く触れませんでした。入社以降は Cloudflare Workers KV や R2 を活用したメンテナンスモードの開発や、今後リリース予定のDevelopers.IOリニューアルプロジェクトでのフロントエンド開発に携わっています。 なぜ CDN Edge Server の役割をまとめてみたのか 以前から一言で言えば、Next.js を本格的に触るようになり、データキャッシュ機能や、App Router、

この記事では、Cloudflare Workers を使用してウェブサイトのメンテナンスモードを実現する方法を解説しています。また、作業中のユーザーにはオリジンサイトを、一般ユーザーにはメンテナンスページを表示させる方法を説明しています。 こんにちは。Classmethod Europe でフロントエンドエンジニアをしている watsuyo です。 ベルリンに来てから 1 ヶ月半が経過し、肌寒く、そして日照時間の短い冬の気配が感じられる季節になりました。 さて、ウェブサイトに大規模な変更を加える際、サイトの一時的な利用停止が必要な場面があります。Cloudflare で管理されているウェブサイトの場合、Waiting Room を使用することで、コードの編集を行わずに一時的なメンテナンスページを表示できます。 しかし、Cloudflare の契約プランによっては、Waiting Room

フロントエンドエンジニア watusyo の Classmethod Europe ジョインブログ。これまでのキャリアや経験を活かし、ベルリン移住という新たな挑戦。初海外生活に、ベルリンを選んだ背景や入社までの経緯も紹介しています。 こんにちは。watsuyo です。2023 年 9 月 1 日 より、日本からベルリンへ移住し、Classmethod Europe にジョインしました。 フロントエンドエンジニア歴が 3 年半、PjM(プロジェクトマネージャー)歴が 1 年で、足掛け 5 年ほど Web 業界にいることになりますが、海外拠点の会社に働く経験は初めてです。 これまで キャリアのほとんどは Vue.js や TypeScript を使ったフロントエンド開発の経験をし、プロダクトの機能開発や、約 4 年ほど運用されていたアプリケーションの "Vue 2.6 から 2.7 への マイ

どうもフロントエンドエンジニアのoreoです。 今回はWebブラウザのレンダリングの仕組みについてまとめたいと思います。あまり意識していなくても開発はできますが、知っていればパフォーマンスの改善やAccessibilityの向上に役立ちそうですね。 1 レンダリングとは？ 普段私たちは、WebブラウザにURLを指定することで、そのリソースをブラウザ画面に表示できます。この時の 「指定したリソースをブラウザ画面に表示すること」を「レンダリング」と言います。 Webブラウザは、下記のように多くの機能を搭載していますが、この中でRendering engineが、レンダリングを実行します。 参考：https://web.dev/howbrowserswork/ ちなみに、ブラウザごとのRendering engineは下記になります。 Rendering engine Browser 参考：ht

どうもフロントエンドエンジニアのoreoです。 この記事では代表的な型ガードの方法について整理したいと思います。 型ガードとは、ある値に対して特定の型かどうかチェックし、その結果に応じて処理を分けることを指します。ユーザー定義型ガードや型ガードの変数代入は、知っておくと差がつきますね。 1 typeof演算子 typeof演算子は、typeof 式 のような形で式を評価し、その評価結果に応じて以下表「結果」のような文字列を返します。式がnullの場合に、”object"を返すというイレギュラーな動きをするので、その点注意です。 参考：https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/typeof typeof演算子を使うと、ユニオン型に対して、型のチェックを行い、処理の分岐が可能です。例えば、下

どうも、株式会社iCAREのフロントエンドエンジニアoreoです。 先日、弊社フロントエンドエンジニアで、ミッションステートメントを作成しました。今回の記事では、具体的な作成手順を交えながら、チームと私が得た学びをご紹介させていただきます！ 1 はじめに iCAREでは、事業拡大に伴い開発部が急拡大しています。フロントエンドエンジニアでいうと、2021年4月からの1年間で、4人 → 10人と2.5倍になりました(※パートナさんを除いています)。 組織拡大に伴って、フロントエンドにおけるテスト体制構築など様々な仕組み作りが進められています。このように、長期的な目線で仕組みを考えなければならない状況下で、フロントエンドエンジニアとして何を大事にすべきか？という議論が始まり、最終的にミッションステートメントという形でまとめることとなりました。価値観を言語化することで、メンバーの方向性を合わせ、仕

このような課題を通じて、大量のデータを扱うコードや競技プログラミングなど、速度を考える必要があるコードにおいて数学の知識が重要であるということが少しわかるようになりました。 同様にテイラー展開や数列など、一見複雑そうな数式も繰り返し文(ループ処理)などのプログラミングにおける初歩の技術を使うことで書けます。講義では他に、数値積分をコードで表したりなどもしました。 アルゴリズムごとの速度の違いについて考えるようになった アルゴリズムの時間計算量の測定 アルゴリズム自体の解説は今回こちらの記事では行わず、外部ページか書籍をご参照いただけるとと思います。 講義で扱っていたサイト アルゴリズム自体は、基本情報の勉強や就活時のコーディング試験のために、サラッとだけはかじっていたのですが、時間計算量（＝アルゴリズムごとにソートにかかる時間）を計測する課題を通じて、速度の違いを実感することができました。

2021 年 4 月に産業技術大学院大学(以下 AIIT) 情報アーキテクチャコースに入学し、フルタイムのフロントエンドエンジニアとの 2 足のわらじを履いています。 既に 9 月も中旬で、あと 3 週間で 3Q の授業が始まるタイミングになってしまいましたが、個人ブログを Next.js + MDX で実装したタイミングで社会人大学院入学についてエントリを書くことにしました。 理由はわかりませんが今年に入って、社会人のエンジニアで大学や大学院の入試を受けている人が増えているような気がしています。 社会人でも通える大学や大学院がいくつかありますが、これから検討している方の参考になればいいと思います。 一番大きいのは、情報系の学位、修士を取得できる部分に大きなメリットを感じたからです。 経営学部出身で独学でエンジニア実務経験も 2 年が経つタイミングで、そろそろ体系的に学びたいぞ、と思いまし