hiro

# 何について書く？
<ul>
<li>パスの記述を完結にする方法</li>
</ul>
<h1 id="%E5%86%85%E5%AE%B9">
<a class="header-anchor-link" href="#%E5%86%85%E5%AE%B9" aria-hidden="true"></a> 内容</h1>
<ul>
<li>
ページで各ページコンポーネントから様々なモジュールをインポートする際 
<code>../../</code>など相対パスを各事があるが、毎回打っていて面倒である。タイピングミスもあり得る。
</li>
<li>
完結にするベストプラクティス(tsconfig.jsonによく使うパスを書いておく)
</li>
</ul>
<div class="code-block-container"><pre class="language-json"><code class="language-json">{
 "compilerOptions": {
 "paths": {
 "@/*": ["src/*"],
 "@/components/*": ["src/components/*"],
 "@/graphql": ["src/graphql"],
 }
 },
</code></pre></div><ul>
<li>インポート時の比較をしてみる</li>
</ul>
<div class="code-block-container"><pre class="language-tsx"><code class="language-tsx">//従来の方法
import test from '../../compornents/test/'
//今回の方法
import test form '@/compornents/test' 
</code></pre></div><ul>
<li>@の一文字で簡潔なパス表現が可能になる。</li>
<li>よく使用するコンポーネントがあればこの記述を積極的に使用していきたい。</li>
</ul>