アプリケーションはコンポーネントから成り立っています。app/ 以下のすべてのフォルダーはコンポーネントです。コンポーネントはGemに含めることも可能です。一般的に、アプリケーションは複数のコンポーネントに分割することができます。どんなものでもコンポーネントとすることができます。再利用可能な小さなウィジェットから、アプリケーションの大きなセクションまでがコンポーネントとなります。コンポーネントは他のコンポーネントに含めることも可能なので、最初は小さなコンポーネントを作ることから始めて、少しずつ大きなコンポーネントを構築していくことを推奨します。再利用することを目的としたコンポーネントであれば、コンポーネントGemとしてビルドすることができます。また、後からコンポーネントをGem化することも可能です。
コンポーネント内のコードにはいくつかの方法でアクセスすることができます。モデルのコードはアプリケーションのどこからでもアクセス可能です。ビュー/コントローラーはタグやビューバインディングを使ってアクセスできます。ビューのパスをどのように探索するかについては、タグ を参照してください。
コンポーネントは、コードをパートごとに疎結合にして、独立してテストを実行したり抽象化することを目的として用意されたアイデアです。
例えば、コンポーネントは以下のようなものが考えられるでしょう:
ウィジェット
ページ
アプリケーションの一部分
経験上、必要だと考える以上に多くのコンポーネントを使うことが良いやり方です。なぜなら、アプリケーションを分割することによるオーバーヘッドはほとんどないからです。
新しいコンポーネントは以下で生成します。
bundle exec volt generate component NAME
あるルートにアクセスしたとき、フロントエンド側でそのコンポーネントに含まれるすべてのファイルが読み込まれます。したがって、コンポーネント内の新しいページのレンダリングにおいて新規の http リクエストは発生しません。異なるコンポーネントへのルートの URL にアクセスした場合には、リクエストは通常のページ読み込みとして処理され、そのコンポーネントのすべてのファイルが読みこまれます。したがって、コンポーネントを「再読み込みの境界線 (reload boundary)」を表すものとして捉えておくとよいでしょう。[注意: 現在のところ、ページの初回読み込み時には「main」コンポーネントだけがサポートされます。近日中に「reload boundry」がサポートされる予定です。]