はじめに現代のWebアプリケーションにおいて、ユーザが写真や動画などのファイルをアップロードする機能は、しばしば求められます。 本記事では、ファイルアップロードを実現するための一手段として、「署名付きURL」を利用した方式を取り上げ、その設計について詳しく解説します。 今回は、Amazon Web Services（AWS）を利用する前提のもと、このアプローチを探求していきます。 前半部分は署名付きURLをそもそもよく知らない方向けの導入部となっていますので、要点だけ抑えたい方は設計上のポイントから読まれることをお勧めします。 ファイルアップロードの実現方式パターン署名付きURLの話をする前に、ファイルアップロード機能をWeb APIとして実現する方式について、いくつか代表的なものを紹介します。 Pattern 1. multipart/form-datamultipart/form-da

先日（2024年6月19日）、技術評論社さまから「［入門］Webフロントエンド E2E テスト ──PlaywrightによるWebアプリの自動テストから良いテストの書き方まで」をフューチャーの有志と共に出版いたしました。 本書はエンジニア選書と言われるシリーズの1つとなります。 既にご購入いただいた方、誠にありがとうございます。 購入を検討されている方、詳しくはこちらをご覧ください。 https://gihyo.jp/book/2024/978-4-297-14220-9 書籍の概要E2Eテストをこれから導入しようとしている方を主な対象とし、必要なノウハウを詰め込んだ書籍となっています。本書では、E2Eテストを学ぶ際の実装手段（ツール）として、近年人気が急上昇しているPlaywrightを中心に据えました。 章の構成は次のようになっています。 第1章 Playwrightハンズオン第2章

本記事は「珠玉のアドベントカレンダー記事をリバイバル公開します」企画のために、以前Qiitaに投稿した記事を一部ブラッシュアップしたものになります。 はじめに本記事は フューチャー Advent Calendar 2018 の13日目の記事として書かれました。私は弊社に入ってから競技プログラミングなるものを知り、実際に初めてみて約1年が経ちました。競プロって何？ 競プロって聞いたことはあるけれどなんだかよくわからない…という方に、競技プログラミングの面白みを少しでも伝えられたらと思い、記事を書きました。 競技プログラミングって何？決められた条件のもとで与えられた問題、課題をプログラミングを用いて解決し、その過程や結果を競うものを競技プログラミングといいます1。 コンテストの種類競技プログラミングといっても様々な分野のコンテストが開催されており、大きく以下の5つの分類のコンテストがあります。

本記事は「珠玉のアドベントカレンダー記事をリバイバル公開します」企画のために、以前Qiitaに投稿した記事をブラッシュアップし、フューチャー技術ブログに転載したものになります。Qiita側の元記事もアップデートしています。 はじめにpackage.json の dependencies をメンテナンスするにはどこから手を付ければいいか、を解説します。 Node.js を使っている人にはおなじみ package.json。 package.json の中で一番よく更新されるのが dependencies（個人の感想、次点で scripts）。 そして、依存パッケージが着々とバージョンアップしていくにも関わらず放置されてしまって後々問題になりがちなのも dependencies 。 「npm install で追加したっきり。パッケージのアップデートなんて考えたことなかった」という人や「Git

この記事はQiitaのアドベントカレンダー記事のリバイバル公開です。 はじめに新人研修推進チームの永井です。 この記事はフューチャーAdvent Calendar 2022の9日目に書かれたQiitaアドベントカレンダーのリバイバル記事です。 このアドカレ記事を書いた2022年は、いままでの流通小売の事業部からHealthCare Innovation Group（HIG）へ転籍したり、初のチームリーダーを担ったりと6年目にして変化の多い1年でした。 いままではメンバーとして目の前のタスクやソースコードに集中していればよかったですし、それに甘んずる形でリーダーになることを避けてきたのが正直なところです。半数以上が自分より若いメンバーという中で、チームやプロジェクトをより良い状態にするにはどうしたらいいのか、を模索する1年でもありました。 本記事は、ベストプラクティス、というよりも自分自身の

Gitのブランチ戦略にはいくつかあります。 Gitフロー GitHubフロー GitLabフロー チームの戦略を考えるときにどれかを参考にしつつカスタマイズするときにいろいろ不都合が生じてしてきて複雑になってしまうことってありますよね？ 社内でブランチの管理の議論をする中で、ブランチの役割を明確にした上で、どのブランチがどのような役割を持っているのかを明確にした方が混乱が少なくなるのではないか？ というのを考えていました。 特に、プロジェクトごとに同じ名前でも役割が違うなー、というのとかもあり、ブランチ名＝役割ではなく、ブランチの上位概念として役割を考えて、それを実際のブランチとの対応づけを行う必要があるのではないかな、と。 CI/CDと組み合わされることで、releaseブランチ==ステージング環境となってしまい、ステージング環境を使いたいリリース前のブランチと、ホットフィックスの検証の

Reactでのダイアログの開閉制御については以前、別のエントリーで書きました。 ダイアログもアラートも、Reactで子コンポーネントの開閉管理を実装する Vue3でも、何か簡単に書ける方法はないかと試行錯誤して、ちょっといい感じかな？ という方針を見つけたので、備忘がてら技術ブログに書いておきます。 使いやすいダイアログAPIとは太古の昔より、便利なダイアログ機能というのは、呼び出し元はダイアログの開閉状態とか細かい制御は気にせず、必要な情報を渡して、結果だけもらうというものです。JavaScriptのブラウザのAPIにもありますよね。 const result = confirm("今日はいい天気でしたね") // OKのときはtrue console.log(result) これはVisual Basicとかでもなんでも同じですね。ただし、JavaScriptだとconfirm()、a

いろんなJavaScriptの統計を見ると、今時のウェブフロントエンドの新規開発は80％はTypeScriptになっているということです。また、TypeScript自身を使わなくても、TypeScriptで培われた型推論のパワーで、JavaScriptであってもVSCode上で補完とか思いの外うまくいったりしちゃうので、TypeScriptフレンドリーというのはますます重要になっています。 ですが、TypeScriptが有効なのはコンパイル前とか実装中であり、実行時に流れてくるJSONが果たしてきちんとした型通りの定義なのかはTypeScriptの範疇外です。そこでZodとかのバリデーションを行ってくれるライブラリが使われます。Zodを使えばJSONが規定通りの構造をしているか確認した上で、TypeScriptの型を持った変数に安全に代入してくれます。 ですが、JSONというのはネットワー

2年前にスクラムマスタを取得しましたが、今後スクラムでプロジェクト運営をしていきたい、DXチームを社内で組織化して手綱を握っていきたいのでプロダクトオーナーを自分たちでやっていきたいというお客さんが増えてくるだろうな、ということでそういうお客さんの支援をしっかりしていけるように知識をアップデートしようということで参加してきました。前回、Scrum Inc.版のスクラムマスタをとったので、同じScrum Inc.版のプロダクトオーナー研修を受けました。 認定スクラムマスターの資格を取得しました スクラムマスタ研修との違い前回受けたスクラムマスタの講習の構成とだいたい同じで、4H程度のスプリントが4回で、2日間の研修があり、最後にオンラインの試験を受けて認定を取得という感じです。内容も、無料で公開されているスクラムガイドで説明されているプロセスをベースにプロダクトオーナーに特化したトピックを厚

春の入門連載の16記事目です。 はじめにこんにちは。180度開脚に憧れてストレッチを続けている、HealthCare Innovation Group(HIG)所属の山本です。 以前から自作キーボード、分割キーボード、XX％キーボードといった単語には興味を惹かれていたのですが、電子工作初心者の自分としてはなかなか敷居を高く感じていました。 この度、自作キーボードに初めて挑戦し、40％分割キーボードを使いこなすに至ったので、その動機や経緯を含め、魅力をお伝えしていきたいです。 ※自作キーボードについては既存記事も面白いものが多いのでぜひ御覧ください！ https://future-architect.github.io/tags/自作キーボード/ 作成したもの今回私が作成したキーボードは、以下のようなものです。 キーキャップに無刻印のものを使用しているためちょっと分かりづらいですが、通常のキ

春の入門連載2024 15日目の記事です。 はじめにみなさんこんにちは。TIG所属の大岩潤矢( @920OJ ) です。 Cloudflareが提供するCLIツール「Cloudflare C3」を利用して、Cloudflare Pagesへ簡単に入門する方法について、ハンズオンを中心に紹介します。 Cloudflare PagesとはCloudflare Pagesとは、一言で言えば 「Cloudflareが提供するWebサイトのホスティングサービス」 です。 みなさんは、静的Webサイトを作成した後どこにデプロイしますか？ ホスティングの方法は多種多様、色々な方法が存在します。一昔前までは、レンタルサーバを借りてFTP接続し、各種ファイルを配置する……というものが一般的でした。しかし最近は大手クラウドベンダーの提供するPaaS(Platform as a Service)が台頭し、面倒な

はじめに春の入門連載2024の11日目です。 SAIGの小橋です。JavaScriptライブラリの1つであるp5.jsに入門します。 日本語版公式ページによれば、p5.jsとは… クリエイティブなコーディングのためのJavaScriptライブラリで、 アーティスト、デザイナー、教育者、初心者、その他誰にとっても、コーディングを身近で包括的なものにすることに焦点を当てています。 …です。もともとProcessingという言語がグラフィックスやアニメーションに強いもので、それをJavaScriptから使えるようにしたのがp5.jsというライブラリです。 Webエディタがあるので、最初はここの上で色々試してみるのも良いでしょう。 今回は、公式ページの「はじめに」で説明されている通り、CDNの上にあるp5.jsライブラリを読み込むことにします。後述の通り、ローカルでWebサーバーを立てて表示してい

はじめに春の入門連載の11本目です。 はじめまして。流通製造グループの吉原です。私は2023年4月にIT未経験で入社しました。同期が新人研修を4,5か月で、早い人だと3か月で卒業していくなか、恥ずかしながら私は6か月もかかり、3月にやっとのことでOJTを卒業しました。 日々の業務では、自分のIT知識があまりにも欠如していることを思い知りながら、必死に食らいついています。そんな私が、社会人1年目のIT基礎知識向上のための取り組みの1つとして、Vue.jsでオセロを使った話をしたいと思います。 これから新人研修やOJTに取り組む新人はもちろん、ITの世界に飛び込んでみたはいいけど、まず何から勉強しようか迷っている人に読んでいただきたいです。 オセロ作りの経緯OJTが始まって、日々の業務に取り組んでいると、仕事の進め方や優先順位の付け方、報連相そして顧客の業務理解など、社会人として、コンサルタン

はじめにこんにちは。Technology Innovation Group所属の太田寛明です。 新人研修で触れた程度のVue.js経験者の私が、Vueのバージョンアップを行って得た、所感や躓いたポイントを共有します。 経緯Vue2は2023年12月31日にEnd of Life（EOL）を迎えることになりました。 EOL期日までにVue2をVue3にバージョンアップする必要があります。 今回の対応では、対応内容で紹介する「1. Vue3での動作に必要な変更」をまず最優先で対応し、その後により良いプロダクトとするための取り組みとして「2. Vue3からの新規推奨事項の適用」の対応を行いました。 対応内容まず最初に今回のVue2から3へのバージョンアップで行った変更の全貌を紹介します。 Vue3での動作に必要な変更 Vue本体の更新 周辺パッケージの更新 Vue3からの新規推奨事項の適用 ビル

Terraform連載2024の5日目です。 はじめにIaCを利用してインフラを構成することで、構築忘れや設定ミスといったイージーなミスが減らせるようになりました。とはいえ、展開していく範囲が増えれば増えるほどコードの量も増えていくので、このリソースはどこで作ったっけ…みたいなことが起きてしまいます。 現在の業務ではサービスの海外展開に携わっており、まさに多国展開絶賛実施中という状態です。その際、スペックは同じでもリージョンのみが異なるリソースを作成することが多々あり、環境の管理方法って大切だなーと実感しております。 そこで本記事では、Terraformを利用してシステムを他リージョンへロールアウトする場合のリソース管理・展開方法を3つ挙げてみました。もちろん、他にもたくさんあると思いますので、本記事が参考になると幸いです。 また、本連載の1日目でも伊藤さんがマルチリージョンによるDR（D

The Gopher character is based on the Go mascot designed by Renée French はじめにTIG真野です。 フューチャーでは2021年の2月に公開されたGo 1.16から、Goのリリースノートを読んで気になったところをブログにまとめるというブログリレーを続けています。 Go 1.16連載が始まります Go 1.17連載が始まります: コンパイラとgo mod Go 1.18集中連載 ジェネリクス Go 1.19リリース連載始まります GoDoc/ツール周りのアップデート Go 1.20リリース連載が始まります＆メモリアリーナの紹介＆落ち穂拾い Go 1.21連載始まります＆slogをどう使うべきか Go 1.22リリース連載始まります & ループの変化とTinyGo 0.31 単なる翻訳ではなく自分たちならではの付加価値を提供す

タイトルで言いたいことは言ってしまっているのですが、2017年ぐらいからNext.jsを使ってきて、最新の情報のキャッチアップとかもそんなに苦労はなくて、こだわりがないならNext.jsでいいのでは？ という記事です。 Next.jsは大きすぎる？フレームワークが大きいのはたいていそうで、提供されているすべての機能を使うわけではなく、その一部だけを使います。そのサブセット自体がシンプルであればフレームワークはどれだけ大きくても問題はないはずです。JavaとかPythonとかGoのコード書いてもごく一部のライブラリしか使わないわけで、でもそれに対して「ライブラリがでかすぎる」とは言わないですよね。 Next.jsは「より高速にする」機能がたくさんありますが、別にそんなの最初から使う必要はないですし、サービスによってはそもそもその機能が合わない、というのもあります。ユーザープロフィール画面にI

Next.jsの最近の大きな目玉機能はReact Server Component(以下サーバーコンポーネント)です。パフォーマンスアップに有効だったり、gRPCだRESTだGraphQLだ論争を終わりにするServer Actionsなど盛りだくさんです。 一方で、サーバーコンポーネントはコーディング上の制約がいろいろあります。 サーバーコンポーネントではhooksが使えない サーバーコンポーネントのソースからクライアントコンポーネントはimportできるが逆はできない。レンダーツリーを工夫すればクライアントコンポーネントの下にサーバーコンポーネントを配置することは可能 サーバーコンポーネントでは非同期コンポーネントを作成でき、fetchでサーバーから情報をとってきたり、DBアクセスした結果を利用できます。しかし、最近のモダンReactの場合、状態管理などはすべてhooksに寄せるので大