2022年の弊社Qiita記事まとめ（全69記事）


この記事は「[【マイスター・ギルド】本物のAdvent Calendar 2022](https://adventar.org/calendars/7794)」13日目の記事です。


### はじめに

社内のSlackで、「アドベントカレンダー、何書こっかな～」とか、つぶやいたら・・・

「『テックブログ2022年度まとめ』で、いかがでしょう。ちょっとギルメンが書いてくれたものを全部引っ張り出してきて、コメントを付けて」

という地獄のような案が出てきたので、やってみました。

### テックブログについて

弊社は開発会社ということもあり、常に技術を探求していかなければなりません。
開発や調査（中には趣味）で得た知識は蓄積し、将来再利用できるような状態が望ましいと考えます。

また、他社やフリーランスの方を含む開発者全体に知識を共有することで、フィードバックを期待できますし、知識を出力するには情報をまとめたり、整理される必要があり、理解が深くなります。

幸いQiitaというすばらしいサービスがあるので、全社的な取り組みとしてそこに投稿して、情報共有することにしました。
（一部、別サービスを利用）


### 各記事と、ひとことコメント

ということで、怒涛の全69記事の紹介ひとことコメントいきます！


https://qiita.com/mitashun/items/96caaf1c1f36eada20f2

PHP フレームワーク「Laravel」についての記事。
.envで環境変数を設定できるのですが、それを、決まったルールで読みこまないと、ハマるよ！？という内容。
Laravelを使うなら、超重要。


https://qiita.com/kiita_chi/items/d054d5a30add4a81f22b

JSをあまり書かずに、スライダーを作れるという、マークアップの記事。
便利！ねこちゃんかわいい！

https://qiita.com/mitashun/items/90891c4f9e95bfabfe17

Laravelで、連番ではなく、ULIDを使うための方法を説明。
これも、今どきなら必須！？

https://qiita.com/Shinkijigyo_no_Usagi/items/a72c374e4d27f4b1a431

JSライブラリ、face-api.jsを使って顔のパーツを検出。
さらに、画像を乗せて「トラニナル」！

https://qiita.com/pk_bb/items/b2e05b8aedb70ad882df

Webページの制作においては、メニュー選択時などに各セクションへのスクロールは良くある実装だと思います。
そして、UXのためには滑らかにスクロールさせるのも必須。
その手法を解説します！

https://qiita.com/2san/items/e542bb5f3fb610f557ee

CSS初心者が必ずハマるであろう、flexboxの解説の基礎。

https://qiita.com/mitashun/items/7b1a6c4bb44acd08472e

LaravelのEloquentのOR条件でハマった話。
どのような単位で、条件が有効になるのか、というのが重要。

https://qiita.com/mitashun/items/a67bc664f7872c0d10d8

こちらも、Laravelですが、SQLのテクニック。
NULLの並び替えについてのテクニックです。

https://qiita.com/mitashun/items/8b200c0b8c7080471ff6

Laravelでは、初期状態でUnitテストを実行すると、DBの内容が更新されてしまいます。
それを別DBを指定することによって、Unitテストのみ別のDBを使用する方法です。

https://qiita.com/LynxLevin/items/6cf47f5f68abe573f135

Rustの数値型についての解説。
Rustって、整数型だと、128ビットまで扱えるんですね！

https://qiita.com/mitashun/items/decbc4346e99edaec907

開発中に、Laravelが扱うPHPのバージョンが変ってしまって、ハマった話。

https://qiita.com/mitashun/items/98ab98e83c0bba1ecba8

Gitのマージをリベースで運用（変な言葉）していると、よく遭遇する自体だと思います。
図付きで、丁寧に解説。

https://qiita.com/kiita_chi/items/b7b278fff276c4bb6eab

CSSのお話。
flexboxでタイル状に並べたときに、その「スキマ」をコントロールする方法。

https://qiita.com/miruon/items/a164c145f1927e14e82f

Githubには、非推奨のバージョンのライブラリを使用していると、通知してくれるDependabot Alertsという機能があります。
プロジェクトの制約を加味しつつ、その警告を解消するフロントエンジニアの苦悩。

https://qiita.com/miruon/items/099d7f0de831ad1b37b9

Nest.jsを分りやすく解説。
ディレクトリ構成が分かると、理解が深まりやすいです。

https://qiita.com/Shinkijigyo_no_Usagi/items/7a18439f63bac9181ed7

「トラニナル」では一人分の顔検出にしか対応していませんでしたが、複数の顔検出をするにはどうすれば良いかを、調査した記事。
この調査結果は、「ウサギニナル」や「サンタニナル」に活かされています！

https://qiita.com/deodeo_mg/items/ba41cd57b8b001ce07ae

ネイティブアプリの構築は、Flutterを使用することが多くなってきています。
アプリの下にある「タブ」のデザイン微調整の方法。

https://qiita.com/2san/items/0faa3939d55f8594393a

「ポインタ」はいつの時代にもハマるもの。
丁寧に解説しています。

https://qiita.com/takuch/items/e5ab6e51b2be0743abc8

DockerとJava、Spring Bootを使った環境構築から、シンプルなアプリの実装まで。

https://qiita.com/miruon/items/fc344ea0a489cf9252d5

Gitへのコミット時に、lintを実行したい等の要望は多いはず。
git hookという方法もありますが、より扱いやすい、huskyの解説。

https://qiita.com/miruon/items/a45e13db9930dd429d12

より良いコーディング体験（つまり、Cooding Experience略して、CX!?）には、対括弧の視認性を向上させることは必須です。
対括弧を色分けする機能が、VS Codeで標準で使えるようになりましたよ。という話。

https://qiita.com/miruon/items/2c7c2b3da40722f91fbc

開発者たるもの、使うツールには拘りを持ちたいもの。
カッコ良くて、多機能なターミナルアプリの紹介。

https://qiita.com/2san/items/dd2c6d0449262a42b728

Goで、CRUDのAPIを実装。

https://qiita.com/Shinkijigyo_no_Usagi/items/4044239a0c8e84e33337

face-api.jsで、個人を特定する方法。
学習用データの用意から説明しています。
なお、記事中に使用している写真は「濃いめ」です。

https://qiita.com/Meister619/items/d8b244015741cb90126c

アニメーションPNGやGIFのアニメーションを再実行する方法。

https://qiita.com/yuhei3017/items/2c1a152a406c6e368c03

gitのコマンドで使えそうなやつの一覧。
こういうのをひとつ手元に置いておくと、作業が捗るかも！？

https://qiita.com/Meister619/items/af88147e5c3a4b6fc457

AFrameという、ARでも使用できるJSの3Dライブラリがあります。
それを使用して、マーカー読みとり時に、ビデオや2Dコンテンツを表示する方法を調査した結果です。

https://qiita.com/kiita_chi/items/959632a04e137e4ab36e

マークアップをする際、ejsというテンプレートエンジンを使用することがあります。
大きなデータや、複数のページで同じデータを使用したい場合に、jsonに記載することで共有することができます。

https://qiita.com/Shinkijigyo_no_Usagi/items/1d4e1cccbb6de9aa4526

SkyWayを使用して、ビデオ通話を実装してみた話。

https://qiita.com/pk_bb/items/fa4f41bed0a12c053e18

gitを使っていると、「あの修正だけ今のブランチに適用したい！」と思うことがあります。
そこで、使うのが、cherry pick。
GitHub Desktopを使えば簡単！？

https://qiita.com/Shinkijigyo_no_Hitsuji/items/9c067d4d0b51410fa3e2

新しいことをするには、どうしても調査が必要になってきます。
弊社、新規事業部が実施した調査の方法とは！？

https://qiita.com/m_tknb/items/0a0574998c51c50bcd6f

マイスター・ギルドでは、推奨ツールを決めていますが、個人の好きなツールを使用しても良いことになっています。
いろいろなツールで、git操作を比較してみた記事。

https://qiita.com/Shinkijigyo_no_Hitsuji/items/06cb950f13ab4c7a4ff7

新規サービスを作る、と言っても何を作るの？となってしまいますよね。
弊社、新規事業部では日々の課題を見付けるところから始めて、新しいことにチャレンジしました。

https://qiita.com/Shinkijigyo_no_Hitsuji/items/768704fd6c8fabcb3b2f

課題が見つかったから、といって、簡単に解消できるわけではありません。
弊社、新規事業部はいろいろな実験を通じて、本当に解決できる方法を見つけていきます。

https://qiita.com/napple_MG/items/67242db2005c6daa54ff

3DグラフィックスソフトMayaで遭遇する、エラーの解消方法について。

https://qiita.com/Shinkijigyo_no_Hitsuji/items/8424343c5208c7e41fc7

赤ちゃんの身長を計るだけなのですが、すごい数式が出てきます。

https://qiita.com/deodeo_mg/items/b2869710ffadaf42f816

flutter、pushReplacementを使った後にpopで元の画面に戻った際の情報連携のテクニック。

https://qiita.com/Shinkijigyo_no_Usagi/items/31332c1033d564e34c96

カメラ画像にモザイクをかける方法。
記事では、モザイクですが、応用次第で、いろいろな加工が可能になりそう。

https://qiita.com/Shinkijigyo_no_Usagi/items/ce057ed8bea6bdd6867e

上記記事の後編になります。
モザイクをかけた映像をビデオ会議の映像として送信します。
（受信した画像にモザイクをかけるのではありません。）

https://qiita.com/Shinkijigyo_no_Hitsuji/items/2bf11569290f484cfa62

Docker使ってますか？使ってますよね？
じゃあ、DockerイメージとDockerコンテナって説明できます？
それに答える記事。

https://qiita.com/Shinkijigyo_no_Usagi/items/b2c9ae811cee6a68ac81

上記記事の完結編。
モザイクをかけた動画を送信することは、できたのですが、音声が送信できていなかった。
じゃあ、音声を送信する方法は？

https://qiita.com/m_tknb/items/a62148275e9b5eef21e9

開発では、ベータ版のOSを使うことも、しばしばあります。
そんな時はバックアップは必須です。

https://qiita.com/MasakiShibata/items/c7265eca9de075eb2a94

私の記事。
はずかしいので、スキップしてください。

https://qiita.com/MGST/items/4be4249ead8dfc2e92a6

GA=GoogleAnalytics。
GA4の設定は面倒だ。ということがとても伝わってきます。

https://qiita.com/igossou/items/6c0edf083bf491c63201

TypeScriptとSassのビルド環境の構築は、なかなか面倒なものです。
そこで、Laravel-mixという、LaravelとTypescript、sassの環境が提供されている環境を手軽に構築し、あえて、Laravelは使わない、という選択肢を提案します。

https://qiita.com/wakin/items/f0d6c9fd7a61913143cb

Slack使ってますか？使ってますよね？
Slackのデータをバックアップするツールを作ってみました。

https://qiita.com/Shinkijigyo_no_Hitsuji/items/cedd1825e5437663d3ce

APIは必要だけど、サーバは管理が面倒。
そんなときは、Lambdaです。

https://qiita.com/dashogo/items/2227b064ce43d43dd3a9

React.js、Next.jsのレンダリングについてまとめました。（記事タイトルのまま）
どういうときに、どの手法を使えば良いのか、という点についても、言及しています。

https://qiita.com/Shinkijigyo_no_Usagi/items/740b1dda3c60e512bb25

新規事業部による、SkyWayを使ったビデオ通話の実装の解説。
機能が充実してきましたね。

https://qiita.com/mg_sawa/items/1a3544a413211881f94f

ローコードは今後のトレンドになることが予想されます。
弊社でもローコード開発環境である、Spiralについて、調査してみました。

https://qiita.com/MG_TANAKA/items/2d3d09e3a0b628c2204e

最近はあまり聞かなくなりましたが、プログラミング言語には計算誤差というものがあります。
最近は聞かなくなったからこそ、それを知っていることが優位になります。
「Rumpの例題」を使って、計算誤差を体験します。
20個の言語での実装例付き。

https://qiita.com/hi_kawano/items/79dcf53f2d17129896c7

Three.jsでゲームを作ってしまった記事。
200行で、3Dのゲームが作れるとは、驚きです。

https://qiita.com/napple_MG/items/f0617bae70360452b9a2

Mayaでは良くあるエラーなのでしょうか。
その解消方法。

https://qiita.com/hkt_m-gild/items/023918ce3b8cb5efd076

マウスカーソルをボタンの上にhoverすると、アニメーションします。
その手法の詳細な解説。

https://qiita.com/tomo_oe/items/89b617a5988f19adc33f

弊社では、デザインにFigmaを使用することが多いです。
Figmaでは、プレゼンテーションモードというのがあり、実際の動きをデモすることができ、プログラムの実装が不要なので非常に便利です。
マウスホバーやクリック時の動きを設定する方法を解説します。

https://qiita.com/Shinkijigyo_no_Usagi/items/ae165498e32a81b2f22e

Webでカメラを使用する場合に、インカメラとアウトカメラの切り替え方法について。

https://qiita.com/Shinkijigyo_no_Usagi/items/137d70dabb046ec9bcd9

face-api.jsを使用した顔検出。
利用するモデルは、精度と速度、のバランスが難しいところです。
検出にかかる時間を調査しました。

https://qiita.com/soshi_u/items/24261135a52decc841a3

UnityでFlutterっぽいUI実装ができるライブラリ「UIWidgets」の紹介。

https://qiita.com/Shinkijigyo_no_Hitsuji/items/06b25f6f7052b852cade

システム構築において、固定IPが必要なサービスへの接続することは良くあると思います。
AWSにおいて、複数インスタンスや、Lambda、IPアドレスが変動するBeanstalkから、そのようなサービスへ接続する場合は、NAT Gatewayを使用します。
今回は、Lambdaを例にNAT Gatewayの使用方法を解説します。

https://qiita.com/Shinkijigyo_no_Hitsuji/items/f5defe2de058c9b4adef

プロジェクトに与えられた期間、と、ゴールに向けて、どのような技術を選択するか、というのは非常に重要な課題です。

https://qiita.com/Shinkijigyo_no_Usagi/items/405e42c36afaeac641ae

カメラの解像度と、表示の解像度が一致しない場合（ほとんどの場合と思われますが）、face-api.jsを使用して、その座標系を補正する方法。

https://qiita.com/Shinkijigyo_no_Hitsuji/items/834683dd1a663538522a

フロントエンドをSPAで実装したり、Next.jsでSSGしたりと、デプロイした環境でフロントエンドとバックエンドを分離して実装するケースが増えています。
フロントエンドをAmazon S3にホスティングして、独自ドメインとSSLを割り当てる方法です。

https://qiita.com/Shinkijigyo_no_Usagi/items/12cc39487a863e0136a0

タイトルのままなのですが、爆速で実装しました。

https://qiita.com/napple_MG/items/321abd35c96ad3983095

3DソフトのBlenderも、ここ数年で操作方法も一般的になり、良く使われるようになってきました。
プロの現場では、Mayaが使われることが多いですが、この2つを比較してみました。

https://qiita.com/Shinkijigyo_no_Hitsuji/items/647938a59da63139d106

FastAPIとMySQLという、今後、重要になってきそうな組みあわせ。
その開発環境を、Dockerで作ってみました。

https://qiita.com/alpaca1231/items/30bc6c5e4c649a2b8979

GTM(GoogleTagManager)とGA4(GoogleAnalytics4)の設定方法を丁寧に解説します。

https://qiita.com/SwitchBlade/items/9c0d4c656d3a19bcaa69

Unityと自前のモデルを使って、ねこちゃんを検出します。

https://qiita.com/alpaca1231/items/9dc0e9f8e696e712635f

GTM(GoogleTagManager)とGA4(GoogleAnalytics4)の設定方法を丁寧に解説します。
ボタンのクリックのイベントを取得する方法です。
今回はボタンクリックですが、他のイベントにも応用がききます。

https://qiita.com/seunghwan_lee/items/ac1571c2f6377e9779fc

コンポーネントのCSSをどこに記載するべきか、という考察。

## さいごに

よく、これだけバラエティに富んだテーマで記事を書いたなぁ、というのが正直な感想です。
社内で、全員で記事を書くことに決めたとき、乗り気じゃないメンバーもいたと思います。
しかし、実際書いてくれた記事はどれも良く、開発者にとっては、重要な知識源になっているんじゃないか、と思っています。
本当によくこれだけ書いたなぁ、とメンバーには感謝すると同時に、今後も続けていきたいと考えています。

### 対象とした記事について

株式会社マイスター・ギルドのOrganizationに紐づく2022年に投稿された記事（2022年12月19日時点）を対象としています。
一部、テックブログの活動外の記事も含まれます。
アドベントカレンダーの記事は対象外としています。