はてなブックマーク

駅メモ！チームエンジニアの id:yumlonne です。 この記事ではスーパープロジェクト(サブモジュールが登録されている親プロジェクト)側で git checkout や git pull を実行したときに、自動で git submodule update 相当の処理を実行してくれる便利な設定を紹介します。 git submodule についてはドキュメントを参照してください。 記事中の各種動作は git version 2.38.1 で確認しています。 背景 私は最近サブモジュールが存在するプロジェクトを触り始めました。 しかし、git 操作をするときにサブモジュールが存在することを意識していないと、サブモジュールの参照を意図せず書き換えてしまうことがありました。 $ cd MyProject $ git checkout topic-A # サブモジュールをtopic-Aブランチが

駅メモ！チームエンジニアの id:Eadaeda です。 みなさんシェルスクリプト書いてますか？私は時々書いています。12/2 の記事ではシェルスクリプトのテストを書いてみませんかという話を書きました。 tech.mobilefactory.jp 今回はテストではなく、linter の話です。 シェルの文法はなかなか難しいです。例えばダブルクォートで括るかどうかなどです。 # スクリプト a.sh があるとして $ cat ./a.sh #!/bin/bash echo "[$1]" "[$2]" "[$3]" "[$4]" "[$5]" "[$6]" # 例：引数のコマンド置換をダブルクォートで括るかどうかで動作が変わる $ ./a.bash $(date) [Wed] [Nov] [30] [17:06:59] [JST] [2022] $ ./a.bash "$(date)" [We

駅メモチームでエンジニアをしている id:Eadaeda です。シバンは #!/usr/bin/envを使う派です。 皆さんはシェルスクリプト書いてますか？ 環境構築、開発、テスト、ビルド、デプロイなどなど、一連の作業を自動化するための手段として時々出番があるんじゃないでしょうか。 ところでそのシェルスクリプト、テスト書いてますか？ シェルスクリプトのテスト 「シェルスクリプトのテスト〜？」って感じですよね。殆どの場合、一度書いてしまえばあんまり壊れることはないし別に…って感じですよね。わかります。実際開発環境のためにdocker compose upするだけのスクリプトなら雑でもいいですよね。 でも、重要な役割をもつスクリプトならどうでしょう。例えばアプリケーションのエントリーポイントや、リリースビルド・デプロイのためのスクリプトなどが思いつきます。 こういうのはテストである程度保証され

BC チームでエンジニアをしている id:d-kimuson です 11月にリリースされた TypeScript 4.9 から satisfies operator が追加されました。satisfies operator が追加されたことで 「React Router でのナビゲーションを型安全にする」がやりやすくなったのでやってみました この記事で紹介するコードは TS Playground で試すことができます React Router v6.4 からオブジェクト形式でルーティングをかけるようになり、ルーティング宣言から型を拾いやすくなった React Router v6.4 から createXXXRouter のAPIが追加され、コンポーネントではなく、プレーンオブジェクトでルーティングを書けるようになりました import { createBrowserRouter } from

こんにちは。ブロックチェーンチームのソフトウェアエンジニアの id:odan3240 です。 tech.mobilefactory.jp 上記の記事で紹介した通りユニマ/ガレージのインフラは Terraform で管理されています。 この記事では Terraform を管理するリポジトリのディレクトリ構成とその思想について紹介します。 前提 Terraform を管理するリポジトリは2020年の1月頃に開発されたものです。 当時の最新版の Terraform のバージョンは 0.12 でした。 当時の Terraform のバージョンでのディレクトリ構成の紹介であり、現在の最新版のベストプラクティスに沿わない可能性があります。 ディレクトリ構成 リポジトリルートのディレクトリ構造は次の通りです。以降で紹介するディレクトリ構造は説明のために一部簡略化しています。 $ tree -L 1 .

駅奪取チームエンジニアの id:dorapon2000 です。 弊社の今年の技術研修についての記事が何点か投稿されています。 tech.mobilefactory.jp tech.mobilefactory.jp プロダクトで利用されているプログラミング言語、ライブラリ、RDBMSなどの技術研修を行っても、プロダクト開発を円滑に行うことは難しいです。プロダクトの仕様の理解が浅く、各機能のコードがどこにあるか把握できていないことが一因です。他にも、口頭伝承になりがちで毎年のコストになっていたことや、新機能開発に取り組んでも、プロダクト理解が浅ければ出るべき提案も出てこない問題もあります。 私達のチームでは、こういった問題を解決するため、チーム横断の技術研修とは別に「プロダクト技術研修」を4年前から実施しています。本記事では、そのプロダクト技術研修の紹介と実施にあたり大切にしていることを書きた

こんにちは、エンジニアの id:mp0liiu です。 少し前の話になりますが、5/28にPerlの最新安定バージョンである5.36がリリースされたので、コミュニティ周りの動向も含めて気になった点についてまとめていこうと思います。 use v5.36 一番影響がある変更は use VERSION の効果が変わったことです。 use v5.34 以前はバージョンチェック、要求されたバージョンで利用可能なすべての機能(featureバンドル)の有効化、strict の有効化を行っていましたが、 use v5.36 からは warnings も有効化されるようになりました。 use v5.36; my $str; say $str; # Use of uninitialized value $str in say at ... 1行だけで strict, warnings, 最新の機能の有効化が

こんにちはエンジニアのEadaedaです。 皆さんのチームではGitHub Actionsを使っていますか？ブロックチェーンチームではテストやリンター、デプロイといったワークフローをGitHub Actionsで行っています。 今まで、デプロイ以外のワークフローはGitHub-hosted runnerで実行、デプロイはSelf-hosted runnerで実行していましたが、運用していくうちに特定の環境内にあるサーバーで実行されるように仕組みを見直す必要がでてきました。このため全てのワークフローをSelf-hosted runnerに移行する対応を行いました。この記事では移行の際に見つけた便利なものや困ったことを紹介します。 Self-hosted runner GitHub Actionsでは、基本的にGitHubが用意したVMでワークフローが実行されます。このVMをGitHub-ho

こんにちは。エンジニアのid:kfly8です。 今月から、NestJSとethers.jsのスポンサーをはじめました🎉 この記事ではOSSのスポンサーをするにあたり考えたことを書きます。 モバファクは、NestJSとethers.jsの2つのOSSのスポンサーになりました NestJSとethers.jsを選んだ理由 多くのOSSに支えられてプロダクトの開発ができているので、気持ちとしては全てのOSSに貢献したいところですが、そういうわけにはいかないので、次のような基準で絞り込みをしました。 プロダクトで重要かつ頻繁に利用している メンテナーが少ないこと スポンサーメニューが明確で、経理処理や稟議が円滑にしやすいこと 1番目の基準は素直だと思います。ここでは2番目、3番目について補足します。 メンテナーが少ないOSSにスポンサーをした NestJSもethers.jsもどちらも優れたOS

こんにちは。エンジニアのid:kfly8です。 先日、技術研修のインタビュー記事を公開し、手を動かしつつ、コミュニケーションをよく取る技術研修といった主旨の内容でした。 tech.mobilefactory.jp こちらのインタビューでは具体的な研修内容は触れていませんでした。今回は、駅メモ！や駅奪取といった位置ゲームや着メロの月額コンテンツサイトなどで利用しているPerlの技術研修について紹介します。ブロックチェーン事業ではフロントエンド、バックエンドの両サイドで、TypeScriptを利用しているのですが、そちらの技術研修の話は追い追いできればと思います。 tech.mobilefactory.jp 技術研修を受ける人は、どの言語でも良いのである程度プログラミング言語に慣れてることを想定しています。そのため、学ぶ意味、特徴は何か、良教材は何か、罠は何か、などポイントを掻いつまむように技

こんにちは、ブロックチェーンチームの id:d-kimsuon です Vue2 では TypeScript がサポートされており、公式の TypeScript のサポートのドキュメント に従うことで TypeScript で書いていくことができます しかし、素直に書いていくと any 型になってしまったり、実際とは異なる型付けになってしまうポイントがあります この記事では TypeScript で Vue2 (Option API) を書くときに型を厳格にしやすい書き方等を紹介します 省略可能な props には明示的に PropType<型 | undefined> する 型安全な例 型安全でない例 props の型でリテラルに絞っている時、 default には as const をつける 型安全な例 型安全でない例 data の型を as で上書きせず、型注釈を書く 型安全な例 型安

「新しい環境に馴染んで活躍できるか？」 この不安を感じる人は少なくないと思います。そういった不安に対応できるよう、モバイルファクトリーでは、できる限り早くチームや会社に馴染んで強みを発揮できるようにオンボーディングを大切にしています。 この記事では、オンボーディングの一環の技術研修について紹介します。技術研修で何をしているか何を大切にしているか、運営の生の声を聞いてみました。 この記事に出てくる人たち モバファクの技術研修の概要 技術研修の工夫、アクシデント さいごに @kfly8: 今日はモバファクの技術研修について話していきたいと思います。よろしくおねがいします！ まずは、みんなが普段、どんなことをしているのか、自己紹介をお願いしたいです。 @dorapon2000: 今年3年目になるエンジニアです。駅奪取というソーシャルゲームの中の人をやっています。普段の業務は新機能開発、お問い合わ

こんにちは、ブロックチェーンチームのソフトウェアエンジニアの id:odan3240 です。 ブロックチェーンチームでは、 NFT を販売するためのUniqysマーケットプレイス(以下、ユニマ)と、NFT サービス構築支援プラットフォームのユニキス ガレージ(以下、ガレージ)を開発しています。ユニマはブロックチェーン上の NFT を日本円で売買可能なマーケットプレイスです。 以下の記事でユニマとガレージの技術スタックを紹介しました。 tech.mobilefactory.jp この記事では触れていませんでしたが、どちらのサービスも単一のリポジトリ(いわゆるモノレポ)で開発しています。 この体制の上で見つけた TypeScript のインポートの書式のミスマッチの問題とその解決策を紹介します インポートの書式のミスマッチ 技術スタックの記事でも言及している通り、フロントエンドの実装には Nu

こんにちは。エンジニアのid:kfly8です。 3/4(金) 3/5(土) に、Japan Perl Associationが主催するPerlに関するオンラインカンファレンス｢YAPC::Japan::Online 2022｣が開催されました。 yapcjapan.org モバファクでは、駅メモ！や駅奪取などのプロダクトでPerlを利用しています。Perlコミュニティへの恩返しの意味も込めて、モバファクではイベントTシャツスポンサーとして協賛させていただきました。 また、私自身もYAPCの運営として、スポンサー担当、ノベルティ担当、ゲスト対談担当、スピーカー担当、学生交流支援担当、オープニング担当、オンライン会場選定、タスク管理、予算管理などしました。この運営話は追々できればと思います。ここでは、モバファクから登壇したメンバーのコメントを紹介したいと思います！ kimuson / Type

こんにちは。エンジニアのid:kfly8です。 技術カンファレンスのノベルティで、コードを載せたデザインってイイですよね。謎解き要素で遊び心をくすぐりつつ、デザイン的にも普段使いしやすくかっこいいんですよね。リブセンスさんから2015年にもらったトートバッグなんかは、未だに使っています。 hiragram.hatenablog.jp そんなノベルティを一度でいいから作ってみたかったんです…… つくりました!!!! 手前味噌ですが、最初にデザインを見せてもらったとき、ビビビときました。カッコイイ。ビ○ムスさんとか街にある服屋さんにあっても、わからない。多分。一目惚れでした。 YAPC::Japan::Online 2022のロゴは、結び目がモチーフでどこか繋がりを感じるデザインです。結び目から着想した糸を34行のコードの上にあしらい、見かたによってはケーブルコードにも見えるので、”コードにコ

こんにちは、エンジニアの夕凪です。 最近、 GitHub Actions が OIDC を正式サポートし、 AWS や GCP へのセキュアなデプロイが可能になりました。 そのうちの GCP の公式実装である google-github-actions/auth を使って、 Firebase へデプロイを行ってみたので、この記事ではそのやり方を解説します。 前提条件 この記事は以下の環境を前提としています。 google-github-actions/auth v0.4.3 Google Cloud SDK 370.0.0 (gcloud --version) Google Cloud Platform へのアクセス権限があること GCP 側でやること まずは GCP 側でサービスアカウントの準備などが必要なので、それらを作成していきましょう。 以下ちょっと特殊ですが、 fish shel

こんにちは。エンジニアの id:kfly8 です。 少し祝うには遅いですが、技術アドベントカレンダー2021無事完走しました🎉　ありがたいことに、ホットエントリーした記事もあり、編集担当としてはホッとしています（ホットエントリーだけに） tech.mobilefactory.jp tech.mobilefactory.jp tech.mobilefactory.jp tech.mobilefactory.jp 技術アドベントカレンダーの運用で感じた問題 6年ほど技術アドベントカレンダーを運用してきて、編集担当として大きく2つ問題を感じていました。 記事が多すぎ、埋もれる 毎日の記事公開は、工数負担が大きい 記事が多すぎ、埋もれる 弊社が技術アドベントカレンダーをはじめた2015年は、Qiitaさんの「企業・学校・団体」カテゴリでいえば、記事数は1,100強でした。2020年になると記事数

駅奪取エンジニアのid:dorapon2000です。駅奪取では11月にゲーム内の地図のリプレースを行いました。地図そのもののスタイルも変わりましたが、地図の表示に使うライブラリも変更しています。今回は、アプリに地図を埋め込むだけであれば、ほんの少しのコードだけで実現できるということを紹介したいと思います。 記事の前半で地図表示の仕組みを簡単に説明して、後半で具体的なコードをお見せします。 地図表示の仕組み 地図を表示するためにはサーバ側とクライアント側の2つの仕組みが必要です。また、サーバとクライアントは地図をタイルという形式で送受信します。 地図タイルサーバ 地図タイルを配信する 自前でホストすることもできるが、いずれかのサービスのタイルAPIを利用すると楽 地図クライアント 地図タイルの受信と表示をする 地図の上にピンや吹き出しを置くこともできる タイルにはベクトルタイルとラスタタイル

こんにちは、21 卒エンジニアの id:d-kimuson です。 モバイルファクトリーでは、最近のプロダクトではフロントエンドに TypeScript を採用していますが、僕がアサインされているプロダクトは歴史が長く JavaScript で書かれていて、今回 TypeScript へのリプレースを行いました。 既存プロダクトの TS リプレースではしっかり型付けすることは難しいので、型チェックオプションを緩くしてリプレースすることが多いと思います。しかし、既存コードからリプレース後のコードまで全て型安全性が担保できなくなってしまうので、後からの strict 化は非常に大変になってしまいます。 今回のリプレースでは、型チェックオプションは緩くしない代わりに @ts-nocheck や @ts-expect-error を使用することで、段階的に型安全性を高めやすい形でリプレースを行いま

この記事はモバイルファクトリー Advent Calendar 2021の25日目の記事です。 メリークリスマス🎉 エンジニアのid:kfly8です。 技術ブログの「ネタがない」といったコメントや「この記事の課題がよくわからない」といった記事レビューをすることがあります。技術アドベントカレンダーの時期は、短期間に記事が集中するので、特に困らせているように感じます。 普段から意識する習慣で、楽ができないかと考えると、「技術ブログが書ける開発をする」のが良いと思いました。 誤解しないでほしいのが、「技術ブログを書くために開発をしよう」と言いたいわけではないです。あくまで、チーム、事業の目的ありきです。 ただ「技術ブログが書ける開発をする」ことは、普段の開発の質を高めると思っています。 技術ブログが書ける開発とは？ モバファクの技術ブログでは、「課題を解決する方法や経験を発信したい」と思ってい

こんにちは、新卒エンジニアの id:d-kimuson です 先日 type-predicates-generator という型定義からユーザー定義型ガード・アサーション関数を自動生成するツールをリリースして紹介記事を書いたのですが、感想とかを眺めていたら同じく外部から来た値に安全な型付けをするためのライブラリやツールの情報をいくつも観測しました この辺りのランタイムチェックライブラリの情報ってあまりまとまっていない印象で自分が知らないものもいくつかあったので、調べつつ簡単にまとめられたらなと思ってこのエントリを書きました 外部からやってきた値を型安全にするにはざっくりと 型生成によるアプローチ ランタイムチェック用の独自型を書かせるアプローチ 型情報からランタイムチェック関数を自動生成するアプローチ の 3 つのアプローチがあると思うので、それぞれのアプローチごとに紹介します ① 型定義

こんにちは、新卒エンジニアの id:kaoru-k_0106 です 何をしたか 私のチームでは、コミットメッセージの先頭にチケット番号を入れるルールがあります。 例えば、PROJECTNAME-123 〇〇の処理を変更しただと、PROJECTNAME-123の部分がチケット番号です。 最初はこれを手動で入力していたのですが、時々入力を忘れることがあり自動挿入しようと思いました。 ちょうど、トピックブランチ名がチケット番号だったので、ブランチ名を使う方針で実装をしました。 導入手順 その1 Gitのコミットテンプレートを設定する Gitのコミットテンプレートとは、コミットメッセージエディタを開いたときにデフォルトで設定されている文字列です。 この設定は、次のようにテンプレートファイルを作成し、git configで設定できます。 % echo '[branch-name]' > ~/.com

はてなさんのコンテキストクイズに拙作のContextual-Diagで答えてみました。これでコンテキストマスターですね！？ github.com use Test2::V0; use CDD; like( warnings { length( cdd ) }, [qr/wanted SCALAR context/, qr/evaluated as STR/], 'length <ここ> ... STR in SCALAR' ); like( warnings { if( cdd ) {} }, [qr/wanted SCALAR context/, qr/evaluated as BOOL/], 'if (<ここ>) ... BOOL in SCALAR' ); like( warnings { for my $i ( cdd ) {} }, [qr/wanted LIST context

VSCode でホバーして型情報を見ようとすると、交差型はプロパティが展開されません プロパティの型を展開する Mapped Types を通すことで省略せずにプロパティを見ることができます。プロパティが交差型になっていることもあるので、再帰的にプロパティを Mapped Types に通すような型を定義しておいて、通すことでプロパティを全て確認できます type Expand<T> = T extends object ? T extends infer O ? { [K in keyof O]: Expand<O[K]> } : never : T type Temp = Expand<`確認したい型`> 厳密でなくとも簡単にどんなプロパティがあるか把握したいだけなら組み込みの Required や Partial を使うのが手軽です。ただし、あくまでデバッグ用途でそれぞれ省略可能プロ

こんにちは。ブロックチェーンチームのソフトウェアエンジニアの id:odan3240 です。 ブロックチェーンチームでは NFT を販売するためのUniqysマーケットプレイス(以下、ユニマ)と、その NFT を販売するための管理画面(以下、管理画面)を開発しています。ユニマはブロックチェーン上の NFT を日本円で売買可能なマーケットプレイスです。 ユニマの開発はブロックチェーンに関するサービスなので、ブロックチェーンに関する技術をゴリゴリに使って開発しているのでは？と考える方がいるかもしれません。しかし実際はそうではなく Web アプリケーションに関する開発は普通の技術スタックで開発しています。もちろん実装するロジックによってはブロックチェーンに関する知識が必要となる場合もありますが、マネージドサービスやフレームワークやツールを活用してコア機能の実装に集中できるように技術スタックを選択

こんにちは！エンジニア組織開発責任者のid:kfly8です。 今年もモバイルファクトリーのAdvent Calendarをお送りします🎉 今年のアドベントカレンダーは「今日から使える技術」をテーマにコンパクトにお届けしていきます！*1 今予定しているキーワードを見ると・・「TypeScript」「Vue.js」「Perl」「CLI」「MySQL」「AWS」「地図」「プロダクトマネジメント」などがあります。ぜひお楽しみください！ 一覧 12/1 tech.mobilefactory.jp 12/2 tech.mobilefactory.jp 12/3 tech.mobilefactory.jp 12/4 tech.mobilefactory.jp 12/5 tech.mobilefactory.jp 12/6 tech.mobilefactory.jp 12/7 tech.mobilefa

こんにちは、エンジニアの id:mp0liiu です。 8月28日(土)の Learn Languages 2021 というイベントの Language Update というセッションで@charsbarさんと一緒に2018年以降のPerl5やPerlコミュニティの最新動向について話してきたので、そのとき話した内容に補足などしつつ記事にしていきたいと思います。 配信アーカイブはこちらから見れます。 時系列 2019/5/22 Perl5.30 リリース 2020/6/20 Perl5.32 リリース 2020/6/24 Perl7の発表 2021/5/21 Perl5.34 リリース Perl5.30 の変更点 正規表現や文字周りの細かい改善などはありますが、正直めぼしい変更点が見られないです。 Perl5.32 の変更点 isa 演算子の実装 値があるクラスのインスタンスもしくはそのサブ

モバイルファクトリーのエンジニアは、NFTマーケットプレイスの「ユニマ」や位置ゲームの「駅メモ！」など様々な事業の開発をしています。そんなエンジニアたちが、普段、どのようなことを考えているのか。3人のエンジニアに聞いてみました。 この記事に出てくる人たち チームによって性質は異なるのだから、課題に応じて、開発の進め方を変える ワークログを書くのは楽しい 可視化するのは、組織開発においても、当然サービス開発、エンジニアリングでも大事 可視化は目的ではない 楽しく仕事をする。そのために斧を研ぐ 理想を知らないと妥協してることに気づかない 自分が望んでいる環境があるなら、そう変えればいい 三者三様のキャリア @kfly8 : 今日は、モバファクのエンジニアが普段どんなことをしているのか、考えているのか、大切にしているのか、みたいなことを聞いていきたいです。よろしくお願いします！ まずは、みんなが