こんにちは。FEチームのMapleです。私たちのチームは、現在のシステムアーキテクチャを見直し、Reactを用いた新しいアーキテクチャへの移行を検討しています。 そこでTypeScriptを使用しているので、再確認をしようと思います！ はじめに TypeScriptはJavaScriptのスーパーセットで、静的型付けをできるようにします。 コードの品質向上やバグの発見が容易になります。 型付けによる開発効率の向上や、予期しないエラーの防止について説明します。 1. TypeScriptの基本型 プリミティブ型: string, number, boolean, null, undefined, symbol, bigintの基本型を紹介します。 let str: string = "Hello, TypeScript"; // string型の変数 let num: number = 42

こんにちは。FEチームのMapleです。新しいアーキテクチャ移行において、Next.jsを使用しようと思っています。今回はその中でもcssライブラリの選定について、お話ししていきたいと思います。 はじめに Next.jsはReactベースのフレームワークです。 サーバーサイドレンダリングや静的サイト生成が簡単に行えます。cssライブラリを使用することで、スタイリングが効率化され、メンテナンスが容易になります。 cssライブラリの選定基準 プロジェクトの規模と要件: 小規模プロジェクトではシンプルなライブラリ、大規模プロジェクトでは高度な機能を持つライブラリが適しています。 開発者のスキルレベル: チームのスキルセットに合わせて選ぶことが重要です。 パフォーマンス: ライブラリのサイズやロード時間、パフォーマンスに与える影響を考慮します。 各ライブラリのメリットとデメリット Tailwind

Go1.23で導入が予定されているイテレータの基本事項について知りたい方は、まずこちらの記事を一読することをお勧めします。 はじめに Go1.23でイテレータの導入が予定されています。イテレータは、シーケンシャルなデータを扱うという点でスライスと似ています。しかし、イテレータはスライスとは異なり、シーケンシャルなデータを処理していく過程で、すべてのデータをメモリ上に展開しなくてもよいという特徴を持っています。簡単なベンチマークテストを作って、スライスとイテレータのメモリ使用量を比較し、その特徴を確認します。 スライスとイテレータのメモリ使用量の仮説 ここでは特定の条件でスライスの要素をフィルタする関数を考えます。フィルタした結果をスライスで返す関数と、イテレータで返す関数の2つを考え、比較します。 それぞれの関数の実装は次のとおりです。sliceFilterがスライス版、iterFilte

はじめに(おことわり) Goの次期バージョンである1.23でイテレータが導入されるようなので触ってみます。 今回の調査で使うGoのバージョンは1.23rc1です。公式ドキュメントからの情報に基づいていますが、RC版ですので、正式リリース時には変更が入っている可能性がありますので、注意が必要です。 イテレータとは イテレータは、連続したデータを1つずつ順番に処理していくための仕組みです。 イテレータをを使うと、スライスを使わずにシーケンシャルなデータを扱うことができます。 Goのイテレータは、コールバック関数を受け取る関数です。返り値はありません。コールバック関数を呼び出してデータを1つずつ渡していきます。 Goのイテレータ関数は次のようなシグネチャで定義されます。コールバック関数は慣習としてyieldと名付けられます。 コールバック関数は引数を1つ受け取るものと、2つ受け取るものがあります

イテレータについて完全理解するぞ！！！！ 皆さん、Go1.23で導入予定のイテレータすごい楽しみですよね？ 筆者はすごい楽しみです。Go1.18でジェネリクスが導入されて書き方の幅が広がったように、今回のイテレータもGoの書き方の幅を広げる機能になるのではと予想しております！ https://github.com/golang/go/issues/61405 を見ると分かるように「add range over int, range over func」の機能はGo1.23のマイルストーンに積まれています。 「range over int」の機能についてはGo1.22で既に実装されています[1] 。「range over func」は来たるGo1.23に実装予定だと思われます。このブログでは、導入予定の型/関数とその使い方を深ぼっていきたいと思います！ このブログの中では「range ove

はじめに 現在 https://snkrdunk.com/ では、多くのWebアプリケーションにおいて、webpackを利用してマルチページアプリケーション（MPA）の構成でFrontendの実装をしています。 エントリーポイントは100を超え、その大半がVue.jsとJavaScript、TypeScriptを組み合わせて実装されています。 今回は、そんな環境の依存関係を紐解くべく調査のためのscriptを作成したお話になります。 エントリーポイントごとの依存関係をJSON形式で生成 [ { "entryPointPath": "src/entryPointA.js", "dependencies": [ "vue", "vue-router", "src/moduleA.js", "src/moduleB.js" ] }, { "entryPointPath": "src/entryP

はじめに この記事では、golangci-lintのv1.57.0でリリースされたModule Plugin Systemについて既存のPlugin機構を交えて解説します。 弊社サービスSNKRDUNKのバックエンドはGoで実装されておりLinterはgolangci-lintを使っています。 Pluginで動かしているLinterもあり、その影響でローカル環境でgolangci-lintを実行するのがやや手間になっており、何か良い方法がないかと調べていたらModule Plugin Systemというものがリリースされていたので、自分自身の理解のためにも今回の記事を書くに至りました。 golangci-lintのPlugin Systemについて まずはじめに、golangci-lintにlinterを追加する方法は以下の2通りあります。 1. public linterとしてgolan

こんにちは。SODAでQAエンジニアをやっているokauchiです。最近のテスト自動化での気づきをメモがてら紹介します！ 目には見えているが、扱いがだいぶ異なる 入力欄に何が入力されていてるのか、その値に対してAssertionをかけて分岐を行いたい。これが要素が違うだけでだいぶ取得の難易度が違うんだなと思った話です。名前やメールアドレスなど単純なtextBoxであれば取得は簡単、どんな自動化ツールでも標準でサポートされているぐらいなんですが、今回はselectBoxです。同じ要素の入力値を取るだけでこんなに複雑になるなんて。 要素のテキストではなく、選択したテキストを取得する 選択された値というのを単純にjsステップでその要素の"element.textContent"に入ってくると思ったんですよね。ただ実際にそれで取得できる値は、すべてのアイテムが繋がったような文字列！何を選択している

どうも、SODAでFlutterエンジニアをしているimajoです。 Flutterを使っているみなさんならCodemagicを使ってアプリケーションの配信を行っている人は多いのではないでしょうか? 今回はCodemagicをCLIからスタートできるツール 『cmagic』 を作ったので紹介です。 Codemagic配信が意外と面倒という課題 SODAでもストア申請用や、社内配布用としてCodemagicを使っています。 特に社内配布用はPMやQAに確認してもらう目的で、何回も実行する必要があります。 手順としては ブラウザを開き ブランチを選択し ワークフローを選択する 終わるのを待つ ビルドナンバーを確認して他の人に伝える と、シンプルですが、ビルドに時間もかかりいつ終わるかを待つために脳のリソースを使ってしまいます。 Slackに通知を送ることも可能ですが、結局Slackを確認しわす

こんにちは。FEチームのMapleです。私たちのチームは、現在のシステムアーキテクチャを見直し、Reactを用いた新しいアーキテクチャへの移行を検討しています。このブログでは、その背景や目的、現状の課題、そして今後の方針について共有します。 目的 新しいアーキテクチャの目標 複数のチームが効率的に分担して開発できるシステムを構築 それぞれのStream-aligned teamが、同じくらいの認知負荷で仕事目線のValue streamを流せるようにする 現状の課題 コンポーネントの分割 現在のシステムでは、適切にコンポーネントが分かれておらず、作業を進める中で分ける必要があります。また、VueではdefinePropsやdefineEmitsなど、分けられない箇所があり、認知負荷が高い ロジック分割のルールの不統一 現状、ロジックの分割方法に統一されたルールがなく、各開発者が独自の方法で

こんにちは。SODAでQAエンジニアをやっているokauchiです。最近のテスト自動化での気づきをメモがてら紹介します！ 深い階層にある画面のテストシナリオどう作る？ [今までのテストシナリオの作り方] ・ログインのテストシナリオを作成する、ログイン直後TOPページが表示されていることを確認する ・ログインのテストシナリオを複製して、別のシナリオを作る（ログインは前提条件） 今までこの作り方をしていて、何も疑問に思わなかったのですが、最近は必ずしも複製元シナリオのAssertionを踏襲しなくても良いなと思えるようになりました。Assertionを踏襲するとどうなるかと言うと？ [メリット] ・最終的な確認画面（終点）に至るまでの動線での異常を検出出来る [デメリット] ・テストシナリオを一括実行した時にシナリオは別だが、同じAssertionが何度も実行されてしまう （これによるAsse

はじめに どうもこんにちは。SODAでWebフロントエンドエンジニアをしているaokikenと申します。 今回は、社内向けに静的サイトホスティング環境をAmazon S3で構築した話になります。 構築に至るまで Webフロントエンドの開発をしていて、実際の開発環境に実装する前に、検証として別環境にプロトタイプを作成することがあります。 そのときに作ったものを、スピーディーに社内共有して、フィードバックを得たい。 そういった背景から、社内ネットワークに制限した静的サイトホスティング環境の構築することを検討をし始めました。 要件を整理 Webフロントエンド視点でプロトタイプを作成するにあたり、ブラウザでの動作検証が主なので、基本的には静的データをホスティングできればよさそうです。 弊社では既にAWSを広く利用しているため、今回はAmazon S3を利用する前提で要件を整理していきます。 Ama

はじめに こんにちは！開発部の冨永です。 5月20日にSODA主催の勉強会「SODA Flutter Talk #1」をオンライン配信で開催しました。この記事では、当日の各発表を簡単に紹介します。 Firebase Performance を利用したアプリの起動時間高速化 1つ目のセッションは私、冨永による「Firebase Performance を利用したアプリの起動時間高速化」です。 Firebase Performance Monitoring を利用し、アプリの起動時間を高速化した事例を紹介しました。発表では、Firebase Performance Monitoringの導入方法、起動時間短縮のための具体的なアプローチ、起動時間のデータをどのように監視するかについて詳しく解説しています。 デザイナーを巻き込んだFlutterのコンポーネント設計 2つ目のセッションは今城さんによ

OpenTelemetryとは🔍 概要 OpenTelemetryに関する細かい解説記事は他にたくさんあるので、ここでは概要だけを簡単に紹介します。 公式ドキュメントによると以下のように言及されています。 OpenTelemetry is an Observability framework and toolkit designed to create and manage telemetry data such as traces, metrics, and logs. (OpenTelemetryはObservabilityフレームワークであり、トレース、メトリクス、ログなどの遠隔測定データを作成・管理するためのツールキットです。) トレースやメトリクス、ログなどのシステムの状態を把握するためのデータを生成、管理するためのフレームワークのようです。OpenTelemetryの特徴とし

この記事は株式会社SODA初の外部向け勉強会、SODA Flutter Talk #1で登壇した際の資料を1部抜粋したものです。 株式会社SODAではモバイルのアプリをFlutterで開発し、デザインをFigmaで作成しています。 コードサンプル等はFlutter(Dart)で書かれていますが、その概念等はどのフレームワークでも応用できるはずです。 SODAでは事業を成長させる過程でFlutterのWidget数も増えていきますし、FigmaのComponent数も増えていきます。 効率よく開発を進めていくにはエンジニアとデザイナー両者の目線でコンポーネントづくりをしていく必要があり、実際にどのような工夫をしているのかをこの記事で紹介します。 コンポーネントの粒度における課題 エンジニア目線の理想の粒度 エンジニア目線のコンポーネントの粒度で一番大切なのはFigmaのComponentの粒

こんにちは。SODAでQAエンジニアをやっているokauchiです。 SODAでは週に1回、エンジニアが集まって、自主的に勉強会をやっています。先日、自分が発表を担当する会があったので、思考発話法を使って、ユーザビリティテストの簡単なハンズオンをやりました。 思考発話法とは（Chat GPTに聞いてます) 思考発話法（think-aloud method）は、特定のタスクを実行しながら、その過程で考えていることを声に出して説明する方法です。この手法は、認知心理学や教育学、ユーザビリティテストなど、さまざまな分野で使用されています。以下に、思考発話法の特徴や利点、実施方法について詳しく説明します。 思考発話法の特徴 1.内省的データの収集： 被験者が自分の考えや判断の過程を詳細に説明することで、内省的なデータを収集します。これにより、思考過程や問題解決のプロセスが明らかになります。 2.リア

先日行われたSODA Flutter Talk #1でFigmaを使ってプレゼンさせていただきました。 自分はデザイナーではないためFigmaに精通しているわけではないですが、その上でFigmaでプレゼンしたメリット・デメリットがあったので紹介したいと思います。 結論を先に述べると、登壇を頻繁にする人なら使う価値はありそうだと感じました。プレゼン資料を作る回数が増えるにつれ自分なりの"型"が作られていくのでその恩恵を受けられそうです。 逆に初めてFigmaを触る場合は普段の資料作りより時間がかかってしまいそうです。 とはいえ、Figmaに慣れ、自分なりのテンプレートが固まってきたらかなり資料作りが早くなるポテンシャルはあるかなと思いました。 Figmaで登壇する方法 プレゼン用のフレームを用意する まずそもそもどうやってFigmaでプレゼン資料を作るのでしょうか? プレゼン用の機能は用意さ

こんにちは。SODAでQAエンジニアをやっているokauchiです。 今回はdatadogでローカル変数に値の格納、格納された値をif文で判定するまでの流れの備忘録です。 ローカル変数に値を格納する 1.edit recording画面でAdd Valiableを選びます 2.Create variable fromでJavaScriptを選び、任意の変数名（ここでは　NUMとします）を入力します 3.Functionの中に以下のように記述します 4.変数に値を入れる要素をTarget Elementで設定します これで、画面上の件数や文字列をローカル変数に格納することが出来ます！！ 変数の比較する 取得できた数値が0より大きいかを判定します。 1.edit recording画面でAssertionを選びます 2.SPECIAL ASSERTIONSの中のTest custom Java

この記事は何？ 2024/3/5~2024/3/7にAWS ソリューションアーキテクトの福井さん、金森さんの助力を得てイベントストーミングを実施しました。 そのイベントストーミングでどういうことを実施して、どういう成果が出たのか、得た知見や学びについて書いていきます。 背景 前提として、弊社のバックエンドのアプリケーションの構成としては、いわゆるモノリスな構成となっております。2018年の創業からsnkrdunkの成長に合わせて、アプリケーションもイケイケドンドンと実装が追加され成長していきました。2022年ごろにはグローバル向けのアプリも提供し始めました。 その勢いのままに弊社はさらに事業を成長させ、時価総額1,000億規模のIPOを実現しようとしています。 IPOを目指すにあたって、システムでは大きな問題が2つあります。 機能開発の速度が低下しつつある JP側で開発した機能をGE側で再

株式会社SODAです！ 株式会社SODAは SNKRDUNK（スニーカーダンク） というCtoCフリマサービスを開発・運営している会社です。[1] この記事では、エンジニアが常にスキルアップ、生産性向上をサポートする、SODAのエンジニアの支援制度をご紹介します。 Learning制度 SODAでは、エンジニア一人ひとりが最大限のポテンシャルを発揮できるよう、月1万円までの技術書の購入費用をサポートしています。電子書籍（KindleやPDF）も対象で、退職時の返却は不要です。 この制度は、社内で広く利用されています！ 勉強会・カンファレンス参加支援 業務として勉強会、カンファレンスに参加することができ、参加費補助が出る制度です。 外部勉強会やカンファレンスへ参加したメンバーの市場価値向上や、SODAの採用広報への貢献を目的としています！ 詳細はこちらをご覧ください！ 開発ツールの支援 SO