こんにちは。エンジニアの笹原です。 スマートキャンプではフロントエンドの開発にVue.jsを取り入れています。 Vue.jsで開発するうえで、SFC(単一ファイルコンポーネント)を利用できることは良さの一つだと思います。 今回は、Sprocketsでアセット管理を行っているRailsプロジェクトに、Webpackを入れることでSFCを使えるようにする方法を紹介します。 SFC(単一ファイルコンポーネント)とは SFCの良さ SFCの実装方法 Sprocketsを利用しているRailsプロジェクトにSFCを導入する 課題と解決方法 完成予想プロジェクト構成 導入手順①: 必要なnpmモジュールのインストール 導入手順②: Webpackの設定 導入手順③: ビルドの実行 終わりに SFC(単一ファイルコンポーネント)とは Single File Componentの略で、テンプレート、ロジッ