皆さん、こんにちは。林三欣です。私のモットーは、最も難しい概念を最もシンプルで分かりやすい方法で説明すること。そして、皆さんが前進するための確固たる基盤を築くことが私の使命です。

長年の職務経験を積むにつれ、孤立して仕事をするのは非常に悪い習慣だと気づきました。他の人がどのようにコードを書いているかを観察することは不可欠です。結局のところ、より優れた人は必ずいるものです。そのため、オープンソースライブラリのソースコードを学習することは、動画を見るよりも効果的な優れた学習方法だと考えています。

考えてみてください。これらのオープンソースライブラリの作者は皆、大企業のフロントエンド専門家です。彼らが書いたコードを直接見れば、何も学ばない方がおかしいでしょう！

ピニア

このライブラリはVueの状態管理ライブラリとして知られており、Vueでの状態管理方法を学ぶのに利用できます。実際、PiniaはVueのAPIであるeffectScopeに依存しています。さらに、Piniaのソースコードは比較的小さく、数個のファイルで構成されています。

写真

ビューズ

Vueuseは、非常に便利なフックラッパーを多数備えたVue 3フックライブラリです。Vue 3フックのラッパー方法を学びたいなら、Vueuseは間違いなく第一候補です。

写真

サンシャイントラック

Sunshine-trackはフロントエンドのモニタリングに使用されます。動作レポートに基づいて、ユーザー動作、エラー監視、ページリダイレクト、ブランクスクリーン検出、ページパフォーマンステストなどのレポート機能を実装しています。Vue、React、Angularなどのフレームワークと互換性があります。

このライブラリのソースコードを見ることで、フロントエンド監視ライブラリの書き方を学ぶことができます。コードは理解しやすく、ほとんどのフロントエンドプログラマーに適しています。

写真

pinia-plugin-persistedstate

pinia-plugin-persistedstate は、Pinia の永続化プラグインです。このライブラリのソースコードを確認した主な目的は、Pinia の永続化処理がどのように行われているのか興味を持ち、Pinia プラグインの開発方法を学ぶことでした。ソースコードは非常に短く、数ファイルしかありません。

写真

vxeテーブル

はい、ElementやAnt Designのようなコンポーネントライブラリのソースコードは見ていません。代わりにvxe-tableのソースコードを見ました。vxe-tableのコード構造はよりシンプルで理解しやすいからです。さらに、コードはより実用的でユーザーフレンドリーなスタイルで書かれているため、Vue 3のコンポーネントカプセル化、特にModalやFormのようなコンポーネントを学習するほとんどのフロントエンドプログラマーに適しています。

写真

ウェブバイタル

これは、FCP、FID、CLS、LCP、INP などの Web ページのパフォーマンス パラメータを取得するために使用される、Google がリリースしたライブラリです。このライブラリにはコードが非常に少なく、Web ページのパフォーマンス パラメータを計算する方法を短時間で習得できるため、次回の面接官に質問されたときに自信を持って答えることができます。

写真

地元の飼料

これはIndexedDBを操作するためのライブラリです。コードは最小限で分かりやすく、このライブラリからIndexedDBをさらにカプセル化して、ユーザーがより簡単に操作できるようにする方法を学ぶことができます。

写真

Vue-demi

Vue-demiはVueコンバーターとして使えます。Vue 2とVue 3の両方で動作します。ソースコードはたった3ファイルで、少なすぎます！

写真