axiosのインポートで詰まった。

解決策

先に解決策を書いておく。
時間がない方はこれだけでも大丈夫。
default exportsなので、下記のように定義する。

import axios from 'axios';

それでは本題。

プロローグ

私はReact + Typescriptで業務に役立つWebアプリを作成している。
実装をしている中でプレーンなhttpリクエストの実装方法が少々煩雑ではないかと思っていた。

httpリクエストってみんながやってるはずなのになんでこんなに長いコードになってしまうんだ。
もっと美しいコードが書きたい。

そして見つけた。
axiosというライブラリを。

これで美しいコードを書くことができる。

第1章 npm install

見つけた以上インストールして、試してみるしかない。
さっそくインストールする。
念の為、ローカルインストールでインストールを行う。

npm install axios --save-dev

第2章 import

とりあえずimportしてみる。

import { axios } from 'axios';

しか〜し、なんかめっちゃエラーでた。
くそ。簡単に美しいコードがかけると思ったのに。

Module '"../../../../../TestTechnology/webpack/react/node_modules/axios"' has no exported member 'axios'. Did you mean to use 'import axios from "../../../../../TestTechnology/webpack/react/node_modules/axios"' instead?

第3章 エラー調査

調べてみるとaxiosって結構有名でインストールしている方がいっぱいいた。
どんな実装をしているか下記サイトで確認してみる。

https://www.haneca.net/react-http-messaging/

あれ、import文の部分が何かおかしい。
{}があるか、ないかこの部分に原因がありそうだ。

調べてみよう。
美しいコードを書くためにはこれぐらいの調査は惜しまないでやらないと。

モジュール化を行うexportには、モジュールごとに複数のexportを行うnamed exportsとモジュールごとに1つのexportを行うdefault exportsがある。

参考サイト：https://qiita.com/senou/items/a2f7a0f717d8aadabbf7

Default exports
フロントの開発でも、1つのモデルに付き1つのモジュールでコンストラクタやクラスが使われる。
ES6のモジュールは、最も重要なexportする値default exportという形で選択できる

参考サイト：https://qiita.com/senou/items/a2f7a0f717d8aadabbf7

なるほど。
ということは{}はnamed exportと呼ばれる複数のexportがある場合に使うimportの方法なのか。
で、{}なしがDefault exportsと呼ばれる1モジュールに付き1exportがある場合に使うのね。

ではaxiosはどちらに当たるのか。
npm_modules/axios/index.jsを確認してみる。

module.exports = require('./lib/axios');

あ、一個だけexportされてる。
だから{}がいらないのか！

まとめ

無事axiosをインストールすることが出来た。
axiosを使うことで美しいコードを書くことができそうだ。
エラーが起きたとき、なぜ起きたのかなぜ治ったのかをちゃんと理解することは重要だと改めて思う。

ちゃんと調べることって大事だね。