Vue.jsでファイルのimportを相対パスではなく絶対パスで指定できるようにする方法

Vue.js

相対パスでimportするのは止めよう

開発効率が落ちる&コードが汚くなります

個人で開発していたプロジェクトでmoduleなどをimportする時のpathは相対pathで指定していました。初めは気になりませんでしたが、ソースファイルが肥大化するにつれて、以下の2点の問題点を抱えることになりました。

・コードが汚い(特に階層が深いソースファイルでは../../../を大量に書くのが辛い)

・ファイルの階層を移動した時に、毎度pathを書き換えなくてはいけない

なので相対pathを使うのは止めるべきだと考えています。

ファイルを絶対pathで指定する方法

vue.config.jsでaliasを設定する

vue projectで絶対pathを使う為に、aliasをvue.config.jsにて設定する必要があります。とりあえず設定する方法だけ教えるために、簡易的なvue.config.jsの中身をそのまま添付します。

このような設定をすると、@を使って、同階層にあるsrcフォルダ以下の部分を指すことができます。srcフォルダの中にcomponentsというatomic designのパーツが入ったフォルダ・ファイルがあるとして、この中のどれかを指定する場合以下のように書くことができます。

alias@を使って、../を使わずに綺麗にpathを書くことができます。

番外編:働くエンジニアにおすすめアイテム3撰

記事の内容とは別に、日々エンジニアの業務を行う上で役に立っているアイテムを紹介します。どれも実際に使って良いと思ったものだけ紹介していますのでその点はご安心ください。

目の保温マッサージ

普段の業務で一番疲れる目を癒すために目元マッサージャーを毎日使っています。保温とマッサージを自動でしてくれるので、終わった後は血行が良くなり、翌日の目の疲労が激減します。また睡眠の質もあがるのでディスプレイと睨めっこの職業の方は必須アイテムだと思ってます。(笑)

座っている時の負担を減らす

8時間働くとして、その時間の殆どが椅子に座っている状態になるのがエンジニアの宿命です。椅子の性能が低いと身体に余計な負荷を掛けることとなり、良い椅子に座っている人と、そうでない椅子に座っている人にかかる1日の負担はかなり大きいです。ですので、身体への負荷を考えて、できるだけ良い椅子に座るべきです。とは言っても会社の椅子は既に決まっているので以下のクッションを購入することをおすすめします。体を包み込むようなフォールド性があり、疲労や腰の痛みなどが激減します。

自宅での作業効率をあげる椅子

最近購入したのがゲーミングチェアです。楽天ゴールドカードを持っている私は、Amazonではなく楽天市場でこの機種と似たようなものを購入しました。価格帯はほぼ同じで、このゲーミングチェアはAmazon内での評判も良いみたいですし、おすすめです。その理由は作業し終わった後の疲労感が異なり、座り心地もホールド感があって最高ですし、見た目がかっこいいからです。予算に余裕のある方は購入してみてはいかがでしょうか?

エンジニアの基礎知識・教養

別の記事でエンジニアとして知っておくべき技術本についてまとめました。スキルの高いエンジニアは極々当たり前にしっている知識だとおもいますが、そうでない方はエンジニアとして最低限知らないとまずい知識ですのでどこかで購入し、読むことをお勧めします。

筆者
筆者

今回の記事の内容は以上で終了です。最後まで読んでくれてありがとうございます。また技術、経済、株式投資などのことを Twitter でも呟いていますので良かったらフォローよろしくお願いします。

タイトルとURLをコピーしました