7

プログラム初心者です。

Qiitaなどでいつもgithubでpushしている方のソースコードを読む日々なのですが、

以下に示している@の存在の意味がよくわかっていません。

@import '@/assets/styles/mixin.scss'; 

アドレスに示している@は何を意味しているのでしょうか。
一見考えたところ、私の考察では、以下と同じようにも思いますがよろしかったでしょうか。

@import '../assets/styles/mixin.scss'; 

2 件の回答 2

9

質問者さんのおっしゃる通り、そのファイルでは

@import '@/assets/styles/mixin.scss';

@import '../assets/styles/mixin.scss';

と同じ意味だと思われます。この@が何なのかは、webpackの設定ファイルを見れば答えが載っているかと思います。

これはwebpackでパスに対するエイリアスを指定しているものと思われます。つまり、@と書いてあったらプロジェクトのルートディレクトリを指すように設定しているのです。恐らく、そのファイルの場合は@が指し示す位置が..と同じなので、質問者さんの考察のようになるのではないかと思います。

このように設定することの利点は、どの位置のファイルからでも同じ方法でプロジェクトのルートディレクトリを参照できることです。../assets/styles/mixin.scssのように通常の相対パスを使うと、ファイルの位置によって..の数を変えなければいけなくなり面倒です。

エイリアスとして@を使わなければいけない理由はありませんが、ファイル名などに使われることが少なく他と混同されにくいことから選ばれているのではないかと思います。このような設定はvue.jsのプロジェクトで多く見られますが、Vue CLI 2時代のwebpackテンプレートでこのような設定が採用されていたことが理由だと考えられます。

参考:英語版Stack Overflowでの同様の質問

1
  • コメントありがとうございます とても分かり易かったです。 webpackについてですが、@が記載しているプロジェクトには、 以下の三つのwebpackのconfigがありました。 - Webpack.base.conf.js - webpack.dev.conf.js - webpack.prod.conf.js 調べてみたのですが、@が..と同じ意味を示すようなソースは発見できませんでした。 しかし、webpackの設定でユーザが任意で@の意味を決めることができるとは初耳でした。 webpackとのことで@の意味を示しているところがどこにあるのか今一度調べてみます。 とてもわかりやすい説明ありがとうございました。 Commented 2018年10月16日 11:44
4

こんにちは。Faily Feelyさんの回答に対する補足回答です。回答にある通り、@ は、ルートディレクトリを示すことができるショートカットのようなものです。示してくれた例の他にも、ディレクトリの階層が深い場所にあるファイルから、ルートに近いファイルを import するときなどにも便利に使えます。

webpack の設定ファイルの名前から推測して、おそらくそのプロジェクトは、@vue/cli-init を使用してセットアップしたものだと思います。これは、Vue.js プロジェクトが提供してくれているツールで、Vue.js に適した基本設定が施されたプロジェクトのひな形を自動生成してくれる便利なツールです。以下のコマンドでこのツールをインストールし、ひな形生成コマンドを実行すると、webpack と Vue.js の設定済みのプロジェクトのひな形を生成できます。

$ npm install -g @vue/cli @vue/cli-init
$ vue init webpack

webpack で import のショートカット (エイリアス) を設定するには、Resolve というオプションを使用します。このオプションは、おそらく webpack.base.conf.js の中にあります。私の環境では、次のような設定が見つかりました。(設定ファイルのあるディレクトリの中を @ というキーワードで検索してみると、見つけやすいと思いますよ。)

  resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src'),
    }
  },

ここに書かれている '@': resolve('src'), は、「import 文の文字列が @ で始まっていた場合、src/ というディレクトリからのパスとして扱う」という意味になります。

1
  • コメントありがとうございます。確かにおっしゃる通りです。私のプロジェクトの内部にも『webpack.base.conf.js』の内部に【'@': resolve('src'),】が記載されていました。 これで@の意味について悩むことがなくなりました! Faily Feelyさん、shuuji3さん、ありがとうございました。 Commented 2018年10月16日 16:08

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。