みなさん、おはようございます！「zenncast」の時間がやってまいりました。今日は2024年5月26日、日曜日です。マイクです！今日もZennでトレンドの記事をご紹介していきますので、どうぞお楽しみに！
さて、まずは前回ご紹介した記事を簡単に振り返ってみましょう。
前回は「Next.js breaking change - disable router/fetch cache by default」、「Next.js で React Compiler を試しつつ出力コードを見てみる」、そして「GPT-4oのマルチモーダル入力をiOSから試す」についてお話しました。どれも技術的にとても興味深い内容でしたね！
それでは、今日は特に「おたより」が届いていないようですので、早速今日のトレンド記事をご紹介していきますよ！
今日は5つの記事をご紹介します。それでは、まず1つ目の記事からいきましょう。
。。。最初の記事は、「shared_preferencesを画面上で閲覧・編集できるパッケージを作りました」です。
Flutterを使っている皆さんに朗報です！本記事では、`shared_preferences`の値を画面上でデバッグ・編集できるパッケージ「SharedPreferencesExplorer」を紹介しています。このパッケージを使えば、アプリのルートに`SharedPreferencesExplorer`をラップするだけでOK。デフォルトでは左下に表示されるボタンをタップすることで、`shared_preferences`の内容を簡単に閲覧・編集できるんです。
基本的な使用方法もとてもシンプルです。例えば、以下のように使います：
```dart
void main() {
runApp(
SharedPreferencesExplorer(
child: YourApp(),
),
);
}
```
また、`child`がnullの場合でも直接開くことができるので、デバッグに最適です。ただし、いくつかの注意点もあります。編集後の表示更新タイミングは自身のコードによりますし、`int`と`double`の区別がないため、`int`として扱われるキーに`double`をセットしないよう注意が必要です。リリースモードに含まれた場合は例外がスローされるので、その点も要チェックです。
このパッケージを活用して、アプリのデバッグと開発効率を大いに向上させましょう！
。。。次に、2つ目の記事は「Three.js の WebGPU 対応と TSL について」です。
Three.jsユーザーの皆さん、注目です！Three.jsは次世代グラフィックスAPIであるWebGPUへの対応を進めています。WebGPUは従来のWebGLの制約を克服し、VulkanやMetal、Direct3D 12をベースにより低レベルで汎用性のあるGPUアクセスを可能にします。新たに登場したシェーディング言語WGSLもRust風の構文を採用しており、新しい時代の幕開けを感じさせます。
Three.jsでのWebGPU使用は`WebGPURenderer`をインポートして初期化するだけで基本的にOK。しかし、カスタムシェーダーを使うにはGLSLがサポートされていないため、新たに開発されたNodeMaterialとThree.js Shader Language（TSL）を使う必要があります。NodeMaterialはBlenderやUnityなどのゲームエンジンが採用するノードベースの開発環境を踏襲し、GLSLの問題点を解消しています。
TSLはJavaScriptで記述され、GLSLとWGSLの両方をサポート。まだ開発途中ですが、APIが大きく変更される可能性もあるため、公式のexampleやソースコードを参考にすることが推奨されています。
。。。続いて、3つ目の記事は「Python命名規則の基本」です。
Pythonを使っている方々、命名規則を守ることはコードの可読性と一貫性を高めるために非常に重要です。本記事では、Pythonの命名規則について詳しく解説しています。PeP8というスタイルガイドに従うことで、変数や関数の目的が明確になり、他の開発者がコードを理解しやすくなります。
主な命名規則には、全て大文字で単語間をアンダースコアで区切るUPPER_UNDERSCORES、単語の先頭を大文字で始めるCamelCase、全て小文字で単語間をアンダースコアで区切るlower_underscores、そしてあまり使用されないmixedCaseがあります。
他にも`_`から始まる変数や関数はプライベートを意味し、`__`から始まる変数や関数は強めの制限をかけるなど、詳細なルールがあります。命名規則を守ることで、コードの可読性が向上し、メンテナンスや開発効率も高まりますので、ぜひ意識してみてください。
。。。次に、4つ目の記事は「Vue3 + TypeScript + Prettier に対応した ESLint Flat Config の最小構成」です。
Vue3、TypeScript、Prettierを使っている皆さんに朗報です！この記事では、これらに対応したESLintのFlat Configを設定するための最小構成について解説しています。まず、Yarnを使ってESLintと必要なプラグインをインストールし、基本的な設定ファイルを生成します。その後、`vue-eslint-parser`を導入して設定ファイルに追加し、Vueファイルのパースエラーに対処します。
さらに、コードフォーマットツールであるPrettierとの統合も行います。`eslint-config-prettier`をインストールして設定ファイルに組み込むことで、ESLintとPrettierが競合することなく動作します。特定のディレクトリを無視する方法や、`eslint-plugin-vue`のルールセットを変更する方法も紹介されています。
最後に、Nuxt対応についても言及されており、詳細な情報は別の記事を参照することが推奨されています。この手順を追うことで、Vue3、TypeScript、Prettierに対応した統一されたコードスタイルを維持するためのESLint設定が簡単に構築できます。
。。。最後に、5つ目の記事は「私の1年間のアーキテクチャ遍歴」です。
こちらは著者がプログラミングを始めてから1年間で学んだアーキテクチャの遍歴について述べています。最初はアーキテクチャに無知でベタ書きのコードを書いていましたが、その後MVCやMVVM、そしてClean Architectureへと進化していきました。
最初の数ヶ月はベタ書きで開発を行い、初心者にとって読みやすく開発スピードが速い点がメリットでしたが、複雑なプロジェクトで混乱しやすいデメリットがありました。その後、MVCやMVVMを学び、Model, View, Controllerに分けることでコードの可読性と保守性が向上しましたが、プロジェクト規模が大きくなるとControllerやViewModelが肥大化する問題が発生しました。
MVVM + Serviceのアーキテクチャを採用することで、ViewModelの肥大化を防ぎ、ビジネスロジックをService層に分離しました。現在はClean Architectureを採用し、変更が少ないものを中心に配置し、変更が多いものを外側に配置することで、単一方向への依存性を確保し、保守性や可読性が大幅に向上しました。
著者はアーキテクチャを学ぶことでコードの質が向上し、開発が楽しくなったと述べています。エンジニアにとってもアーキテクチャを理解し適用することが重要であり、ぜひ試してみてほしいと呼びかけています。
。。。さて、今日ご紹介した記事を駆け足でおさらいしましょう。
1つ目は「shared_preferencesを画面上で閲覧・編集できるパッケージを作りました」について。
2つ目は「Three.js の WebGPU 対応と TSL について」。
3つ目は「Python命名規則の基本」。
4つ目は「Vue3 + TypeScript + Prettier に対応した ESLint Flat Config の最小構成」。
そして最後に「私の1年間のアーキテクチャ遍歴」でした。
どれも非常に興味深い内容でしたね！
詳しい内容はショーノートに書いてありますので、そちらもぜひチェックしてみてください。そして、番組の感想や質問など、皆さんからのおたよりもお待ちしています。
それでは、次回の「zenncast」でまたお会いしましょう。マイクでした！バイバイ！