Wiz Engineer 技術共有会　7月第1週

Wiz_engineer

2023年7月7日 16:41

弊社では週に一度、1時間の技術共有会を行なっています。最近のTechなニュースや気になること、仕事の役に立ちそうな情報など、ざっくばらんに共有する会です。
今週はジュニア層メンバーへ「初心者向け」をテーマに話しました。

コンテナクエリ使ってますか？

2023年2月にFirefoxに対応したことで、全てのブラウザに対応したコンテナクエリ。
ウィンドウサイズを基準にするメディアクエリと違って `@container` を使うと任意の要素を基準にできるので、とても便利です。

活用場所の例

サイドバーが固定の2カラムページ
メインコンテンツを可変させたいときに役立ちます。

結構便利！という声があがるなか、ジュニア層で実務で使用したメンバーは1人しかいませんでした。
メディアクエリと併用して使っていきましょう！

参考：https://zenn.dev/moneyforward/articles/css-container-query

何年も前に書かれたソースコードを読むときの頭の中

コードはもちろん書く時間も多いですが、読むことも結構多いです。今日は全く書かず、読んでばかりいる…なんて日もあります。

読んでいるとそのコードを書いた人の考えや、そのときの状況が感じられて、結構おもしろかったりします。

コードがごちゃごちゃしてる
→後から仕様変更入ったんだなぁ
FIXMEのコメントアウト
→後でリファクタしようとしたけど、時間なくてできなかったんだなぁ
etc…

コード読むときにいろんな想像働かせていけば、先を見据えて設計できるようなスキルを身につくはず！

参考：https://bufferings.hatenablog.com/entry/2023/06/25/133652

命名は精神衛生上大事

なかなかのパワーワードですが、本当にその通り…
変数名や関数名、クラス名などの命名は本当に難しいです。

なにに気をつけて命名してる？

「動詞＋目的語」になるようにする
動詞の形に注意
原型なのか？三人称単数なのか？それとも？
ややこしそうな予約語は避ける
複数形に注意
数えられない名詞に注意
ex）data,infomation,news

スペルミスに気をつけるのは当たり前！その他、メンバーがなにに気を付けているのか結構あがりました。

みんなはどうしてる？

ツールを使う
これいいかも「https://codic.jp/engine」
他の人のコードを参考にする
API箇所はバックエンドに合わせる
バックエンドの命名大切ダネ…
ツールを使う
これいいかも「https://codic.jp/engine」
AIに頼る

気を付けていても間違ってしまったり、命名に時間がかかってしまうことも多々あります。日本人だもの…
AIやツールを使うときはむやみに使わず、本当に正しいのか？確認しながら使いましょう！

参考：https://zenn.dev/chelproc/articles/4f1da698779f67

reduce()を使いたい

`reduce()` は引数が多く必要なため、あまり使いたくないと思うことも多いです。
でも、集計することも、新たな配列を作ることも、フィルタリングすることも、ソートすることも、最小値/最大値だけを取り出すこともできちゃいます。案外便利！！

reduce()とは
reduce() メソッドは、配列のそれぞれの要素に対して、ユーザーが提供した「縮小」コールバック関数を呼び出します。その際、直前の要素における計算結果の返値を渡します。配列のすべての要素に対して縮小関数を実行した結果が単一の値が最終結果になります。
コールバックの初回実行時には「直前の計算の返値」は存在しません。初期値が与えらえた場合は、代わりに使用されることがあります。そうでない場合は、配列の要素 0 が初期値として使用され、次の要素（0 の位置ではなく 1 の位置）から反復処理が開始されます。
reduce() で一番わかりやすいのは、配列のすべての要素の和を返す場合でしょう。

MDN Web Docs

const users = [
    { id: 1, rank: 1 },
    { id: 2, rank: 10 },
    { id: 3, rank: 50 },
    { id: 4, rank: 100 },
];

// reduceを使った場合
const highRankUserIds = users.reduce<number[]>((p, c) => {
    if (c.rank >= 50) p.push(c.id);
    return p;
}, []);

// reduceを使わない場合
const highRankUserIds = users.filter(u => u.rank >= 50)
  .map(u => u.id);

参考記事に記載されてる上記の例ですが、記述量がちょっと増えますが`reduce()`のほうがループ処理が1回と少ないです。
パフォーマンス的には`fileter()`と`map()`の組み合わせよりも`reduce()`をしたほうがよいかもしれません。

ただ可読性を考慮する場合もあるので、適宜使い分けて利用しましょう！

参考記事：https://qiita.com/rokumura7/items/cdfc92dba508bbfb6127

格言めいたもの

時間がなくなったため、ディスカッションはせず以下記事の紹介のみとなりました。

郷に入るか来たときよりも美しくか

単発か汎用か

軽くまとめ

今回は「命名は精神衛生上大事」のディスカッションでかなり熱く語った印象です。
シニア層、ジュニア層に関係なく命名には悩んでしまいますね。

熟練な先輩メンバーに負けず、ジュニア層もがんばっていきましょう💪

この記事が参加している募集

オープン社内報

22,004件

この記事が気に入ったらサポートをしてみませんか？

Wiz Engineer 技術共有会 7月第1週