Webフロントエンド

こんにちは、SREグループの 水口 です。 スタディプラスのエンジニアが配信するポッドキャスト「Studyplus Engineering Podcast」の新しいエピソードを公開しました。 「Studyplus Engineering Podcast」は、主にStudyplusのエンジニアが、業務で関わった技術的なことや気になっている技術などについて雑談をするPodcastです。 今回は2023年12月にリリースされたStudyplus Web版についてお話ししました。よろしければ聞いてみてください。 25: Studyplus Web版をFlutter Webでリプレイスしました！ Stu…

こんにちは。 最近は、Playwrightを使ってE2Eテストを積極的に書いているので、実装している中で詰まったことや備忘録的なことをあれこれ書いています。 今回は、Webアプリを作る際に権限が異なるアカウントごとにそれぞれテストしたいことがありました。実行するときにアカウントを手動で切り替えたりするのは手間ですし、せっかく自動化しているのに部分的にアナログな操作が加わるのはあまり嬉しくありません。 権限が異なるアカウントをテストシナリオごとに切り替えられたらユーザーが申請して管理者が承認するようなアカウントを横断したテストもできるようになりますね。 Playwrightでどのように実現できる…

こんにちは。 最近、Playwrightを使ってE2Eテストを書き始めたので実装していく中で困ったことや気づきなどを備忘録としてあれこれ書き残しています。 前提 Playwrightの公式サイトに従って用意したプロジェクトを使って試しています。 Installation | Playwright 去年のアドベントカレンダーでも少し触れていたので、もう少し細かい手順で知りたい方はこちらもご覧ください。 Playwrightを使ってE2EテストやUI操作の自動化をやってみよう(環境構築編) - とことんDevOps | 日本仮想化技術のDevOps技術情報メディア 実際にテストを書いてみようと思い…

こんにちは。 最近、Playwrightを使ってE2Eテストを書き始めたので実装していく中で困ったことやつまずいたことを備忘録としてあれこれ書いていきます。 E2Eテストを実行する環境を開発環境や検証環境のような本番以外の環境で実行することを想定しているのですが、これらの環境は基本的に外部アクセス可能ではあるが、Basic認証などでアクセス制限を加えていることがあります。 プログラ上で頑張って処理を書くこともできると思いますが、Playwrightの設定で簡単にBasic認証を通す方法があったので書いてみました。 前提 Playwrightの公式サイトに従って用意したプロジェクトを使って試して…

こんにちは。 最近、雪が降ったり春らしい暖かさになったり、また雪予報が出てたりと、気温と天気の変化が大きくて体調管理が難しい日々が続いていますね。 新年に立てた目標を改めて見返しながら、進捗の悪さに焦りつつも、「来年度から」という都合がいいマイルストーンに甘えて少し余裕ができたつもりになっている今日この頃です。 ここしばらくは社内向けに勤怠システムの内製化をしながら手触り感を持ってあれこれ検証や観察を続けています。 アプリ開発もある程度落ち着いてきて、そろそろ本格的に運用フェーズに移行する段階に差し掛かってきました。 運用フェーズに移行するにあたり、脆弱性管理にも力を入れていきたいと考えていた…

こんにちは。 アドベントカレンダー24日目です。 今年はフロントエンドまわりであれこれ開発することが多かったので、振り返りを兼ねてこれからフロントエンド開発を始める方向けに入門編としてお送りしています。 最終日の25日には何かアプリケーションができていることが目標です。 ↓最初から読み始めたい方はこちらか↓ devops-blog.virtualtech.jp おさらい Visual Studio Codeを使ったReactの開発環境の構築(第1回) CSSフレームワークの1つであるtailwindcssを使ったUI開発(第2回) コンポーネント化(第3回) フォーマッター(第4回) Lint…

こんにちは。 アドベントカレンダー23日目です。終盤に差し掛かってきました。 今年はフロントエンドまわりであれこれ開発することが多かったので、振り返りを兼ねてこれからフロントエンド開発を始める方向けに入門編としてお送りしています。 最終日の25日には何かアプリケーションができていることが目標です。 ↓最初から読み始めたい方はこちらか↓ devops-blog.virtualtech.jp おさらい Visual Studio Codeを使ったReactの開発環境の構築(第1回) CSSフレームワークの1つであるtailwindcssを使ったUI開発(第2回) コンポーネント化(第3回) フォー…

はじめに iOS エンジニアをしています Jane（仮称）です。 2024/08/22〜24 に早稲田大学理工学部西早稲田キャンパスで開催された iOSDC に初めて参加させて頂きました。 iOSDC Japan 2024 は iOS 関連技術をコアのテーマとしたソフトウェア技術者のためのカンファレンスです。 22日(木)はオンライン参加、23日(金)はオフラインで参加しました（24日(土)は欠席）。 前提として 私の経歴として、Web フロントエンド開発を約 5年間経験したのち、iOS 開発に約 1年間従事しています。 1年経った今でも Swift よりも JavaScript で記述したコ…

Microsoft Azureの強みが分からん、みたいな話をしばしば見かけるので、普段仕事ではAWSにロックインされているAzureにわかとしての認識をまとめておく。 まず、Azureはクラウドサービス単体で評価するものではない。自分はまあまあAzure推しだけれと、.NETと最適化されたIDEを採用しないならAzureではなく他のクラウドプロバイダを選択する。AzureはMicrosoftが抱える巨大なエコシステムの一部であり、単体では真価を発揮しない。 Azure ADでIDを管理し、Visual StudioでC#のアプリケーションを開発して、Azureで運用する。全てをMicrosof…

こんにちは！フロントエンドエンジニアの どじねこ です。 今回は少し前となりますが 2024年5月に社内で開催したLT会についてご紹介したいと思います。 よろしければ先日公開されました「iOS・Android 合同のLT大会を開催しました！」も合わせてご覧ください tech.mirrativ.stream

はじめに こんにちは、WEARフロントエンド部Webブロックの新です。普段はWEARのWebサイトのリプレイス開発を担当しています。リプレイスを進める中で、不具合やリプレイス前後での変化にいち早く気づくため、Lighthouse CIによる日々の記録を可視化し定期的に通知する仕組みを作りました。本記事ではその取り組みについて詳しくご紹介します。

こんにちは。金融ソリューション事業部の姫野です。 1. 今回実装する内容 1.1 実装内容のキーポイント 1.2 ユーザー体験の流れ 1.3 ガス代について 2. 利用サービス 2.1 thirdwebサービス 2.1.1 Connect 2.1.2 Engine 2.1.3 Drop（ERC1155） 2.1.4 React SDK 2.2 その他 3. 実装詳細 3.1 配布用のNFTコントラクトの作成 3.1.1 thirdwebへウォレットでログイン（or 新規作成） 3.1.2 コントラクトの作成、デプロイ 3.1.3 NFTの発行準備 3.2 トランザクションプロバイダの構築 3.…

2024年6月28日(金)・29日(土)、ファインディ株式会社は「開発生産性Conference 2024」を開催しました。本カンファレンスは、虎ノ門ヒルズフォーラムのオフライン会場にて実施され、一部のセッションはオンライン配信も行われました。 国内最大級のビジネスチャット「Chatwork」を展開する株式会社kubell（旧Chatwork株式会社 ※2024年7月1日より社名変更）では、技術負債を解消して開発生産性を高める取り組みを行っています。本カンファレンスでは、「モノリスから小さなシステムへ：Chatworkシステム移行の現在地と今後について」と題して、執行役員 兼 コミュニケーショ…

応募課題はこちらに記載されています。 公開にあたり内容は一部伏字にしています。 www.ipa.go.jp 選考のポイント 基本として、加点法で判断します。 自身の技術力ややってきたこと、発信してきたこと、何ができるかといったことなど、アピールしたい点を存分に記述してください。 多く書くことにより、「文章が長過ぎる・まとまりが無い・重複している・冗長」などとして減点するようなことはありません。失敗した経験や落選の結果を書くことや、「文章が洗練されていない」「誤字脱字がある」などによる減点もありません(文章や作文のテストではありません。内容を見ます)。アピールをいっぱい書いて、得をすることはあっ…

Webで新規サービスを立ち上げる際に、UIからインフラ周りまで一人で面倒を見られるエンジニアは、少人数のスタートアップでなくとも非常に頼れる存在です。どんな課題に直面しても技術力で乗り越える、そんなスキルフルなエンジニアに憧れる方も多いでしょう。 この記事では、フロントエンドのプログラミング（JavaScript周辺）からサーバーサイド、インフラ、さらに開発手法まで、Web開発で必要になるさまざまなレイヤーのフルスタックなスキルの現在地と、関連するUdemyの講座を紹介します。 株式会社ヘンリーでVPoEを務める松木雅幸（@songmu）さんの執筆です。 フルスタックエンジニアに必要なスキル …

この記事は、CYBOZU SUMMER BLOG FES '24 (Newcomer Stage) DAY 7 の記事です。 はじめに こんにちは！24 卒フロントエンドエンジニア職能としてサイボウズにジョインした daiki (@k1tikurisu) と saku (@sakupi01) です！ 今回は、私たちがサイボウズフロントエンドにジョインするまでの経緯やジョインしてからやってること・感じていることを対談してみました 🍮 この記事を通して、サイボウズのフロントエンド開発チームの雰囲気や、新卒エンジニアとしての成長の機会、kintone フロントエンド刷新プロジェクトの実態についてより…

React / Next.js / Remixに見られる、この頃のアーキテクチャの変化をキャッチアップすべく、横断的なトピックを紹介する本連載。第3回はここ数年で起きたNext.jsとRemixのルーティングの変化を見ながら、現在のルーティングアーキテクチャについて学んでいきます。 コンテンツ ・Next.jsとRemixそれぞれのルーティングの変化・Next.jsのルーティング・Remixのルーティング・Next.jsとRemixのルーティングに関する考え方の違い・マイグレーションのサポートが便利 Next.jsとRemixそれぞれのルーティングの変化 昔、Reactを使ったSPA（Sing…

こんにちは。ファンと共に時代を進める、Web3スタートアップのGaudiyでエンジニアをしているkodai（@r34b26）です。 Gaudiyでは、以前からフロントエンド(Next.js)とGateway(Node.js)の通信においてGraphQLを使用しています。 techblog.gaudiy.com その際に、GraphQLスキーマからコードを自動生成するツールとしてGraphQL-Codegenを活用してきましたが、開発者体験やユーザー体験においていくつかの課題を抱えていたため、今回、gql.tadaに移行しました。 この記事では、課題背景から実際の移行プロセスを紹介してみるので、…

この記事は、CYBOZU SUMMER BLOG FES '24 (Frontend Stage) DAY 15 の記事です。 こんにちは、フロントエンドエキスパートチームの @mugi_uno です。 DAY 4 の記事で nus3 がすでに一部紹介していますが、2024年7月2日にサイボウズ社内で実施された開発・運用に関わるメンバーの交流イベント "開運夏まつり 2024" に併せて、サイボウズでのWebフロントエンドの祭 "Cybozu Frontend Day 2024 Summer" を実施しました。 その中で、フロントエンドクイズ大会やライブコーディングバトルといった変わり種コンテ…