\r\n \r\n \r\n \r\n

test

\r\n\r\n \r\n\r\n```\r\n\r\n```css\r\np {\r\n color: red;\r\n}\r\n```\r\n\r\n```js\r\nimport axios from \"axios\";\r\n\r\nconsole.log(\"import completed\");\r\naxios\r\n .get(\"http://127.0.0.1:8000/api/v1/\")\r\n .then(response => {\r\n console.log(\"status:\", response.status);\r\n console.log(\"axiosGetData:\", response.data);\r\n })\r\n .catch(err => {\r\n console.log(\"axiosGetErr\", err);\r\n });\r\nwindow.alert(\"test\");\r\n```\r\n\r\n```yml\r\nversion: '3'\r\n\r\nservices:\r\n db:\r\n image: postgres\r\n web:\r\n build: .\r\n command: python manage.py runserver 0.0.0.0:8000\r\n volumes:\r\n - .:/code\r\n ports:\r\n - \"8000:8000\"\r\n depends_on:\r\n - db\r\n```\r\n\r\n```Dockerfile\r\nFROM python:3\r\nENV PYTHONUNBUFFERED 1\r\nRUN mkdir /code\r\nWORKDIR /code\r\nCOPY requirements.txt /code/\r\nRUN pip install -r requirements.txt\r\nRUN apt-get install -y gnupg\r\nRUN curl -sL https://deb.nodesource.com/setup_10.x | bash -\r\nRUN apt-get install -y nodejs\r\nRUN npm install axios --save-dev\r\nCOPY . /code/\r\n```\r\n\r\n```txt\r\nDjango>=2.0,<3.0\r\npsycopg2>=2.7,<3.0\r\ndjangorestframework\r\n```\r\n\r\n### 試したこと\r\n\r\nここに問題に対して試したことを記載してください。\r\n①docker-composeで環境を作る\r\n②axiosを追加することに決める、dockerfileを書き直す。\r\n```\r\nFROM python:3\r\nENV PYTHONUNBUFFERED 1\r\nRUN mkdir /code\r\nWORKDIR /code\r\nCOPY requirements.txt /code/\r\nRUN pip install -r requirements.txt\r\nRUN apt-get install -y gnupg//追加\r\nRUN curl -sL https://deb.nodesource.com/setup_10.x | bash -//追加\r\nRUN apt-get install -y nodejs//追加\r\nRUN npm install axios --save-dev//追加\r\nCOPY . /code/\r\n```\r\n③ビルドした\r\n正常にビルド完了\r\n```\r\n➜ djangorestframework git:(master) ✗ sudo docker-compose build\r\ndb uses an image, skipping\r\nBuilding web\r\nStep 1/11 : FROM python:3\r\n ---> 34a518642c76\r\nStep 2/11 : ENV PYTHONUNBUFFERED 1\r\n ---> Using cache\r\n ---> ff4afb48bfa0\r\nStep 3/11 : RUN mkdir /code\r\n ---> Using cache\r\n ---> ceec010feebe\r\nStep 4/11 : WORKDIR /code\r\n ---> Using cache\r\n ---> e707d1b2e60a\r\nStep 5/11 : COPY requirements.txt /code/\r\n ---> Using cache\r\n ---> 1cc11eda6568\r\nStep 6/11 : RUN pip install -r requirements.txt\r\n ---> Using cache\r\n ---> bffc88f8924e\r\nStep 7/11 : RUN apt-get install -y gnupg\r\n ---> Using cache\r\n ---> 6d54121ce170\r\nStep 8/11 : RUN curl -sL https://deb.nodesource.com/setup_10.x | bash -\r\n ---> Using cache\r\n ---> ee3599f7553c\r\nStep 9/11 : RUN apt-get install -y nodejs\r\n ---> Using cache\r\n ---> 40a7d3eee167\r\nStep 10/11 : RUN npm install axios --save-dev\r\n ---> Using cache\r\n ---> c6dd0853d8b0\r\nStep 11/11 : COPY . /code/\r\n ---> 1698e7492ca6\r\nSuccessfully built 1698e7492ca6\r\nSuccessfully tagged djangorestframework_web:latest\r\n```\r\n\r\nバージョンも表示される\r\n```\r\n➜ djangorestframework git:(master) ✗ sudo docker-compose run web npm info axios version \r\nStarting djangorestframework_db_1 ... done\r\n0.19.0\r\n```\r\n④jsファイルでimport、失敗\r\n\r\n### 補足情報（FW/ツールのバージョンなど）\r\n開発環境\r\nUbuntu18.04.2\r\ndocker-compose1.22.0\r\ndjango2.2.2\r\ndjangorestframework3.9.4\r\naixios0.19.0\r\n言語\r\npython,javascript,html,css","answerCount":2,"upvoteCount":0,"datePublished":"2019-07-09T07:04:58.212Z","dateModified":"2019-07-09T07:04:58.212Z","acceptedAnswer":{"@type":"Answer","text":"axiosをimportするのはnodeの環境でなければならなかったようです。\r\nreactのプロジェクトを立ち上げ、その中でaxiosをimportできます。","dateModified":"2019-07-14T08:58:16.503Z","datePublished":"2019-07-14T08:58:16.503Z","upvoteCount":0,"url":"https://teratail.com/questions/199512#reply-296708"},"suggestedAnswer":[{"@type":"Answer","text":"パッと見でアレ？と思っただけですけど\r\n`RUN npm install axios --save-dev`\r\n`RUN npm install axios --save`じゃないですか？","dateModified":"2019-07-10T01:01:33.412Z","datePublished":"2019-07-10T01:01:33.412Z","upvoteCount":0,"url":"https://teratail.com/questions/199512#reply-295569","comment":[{"@type":"Comment","text":"やってみましたが変わりませんでした。","datePublished":"2019-07-10T06:43:26.266Z","dateModified":"2019-07-10T06:43:26.266Z"}]}],"breadcrumb":{"@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"トップ","url":"https://teratail.com"},{"@type":"ListItem","position":2,"name":"axiosに関する質問","url":"https://teratail.com/tags/axios"},{"@type":"ListItem","position":3,"name":"axios","url":"https://teratail.com/tags/axios"}]}}}
teratail
回答率
85.29%
質問するログイン新規登録
トップaxiosに関する質問
axios
Django

DjangoはPythonで書かれた、オープンソースウェブアプリケーションのフレームワークです。複雑なデータベースを扱うウェブサイトを開発する際に必要な労力を減らす為にデザインされました。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述･作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像･リスト･表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

API

APIはApplication Programming Interfaceの略です。APIはプログラムにリクエストされるサービスがどのように動作するかを、デベロッパーが定めたものです。

Q&A

解決済

2回答

4090閲覧

javascriptのパッケージaxiosがimportできない

yk_00
yk_00

総合スコア15

axios
Django

DjangoはPythonで書かれた、オープンソースウェブアプリケーションのフレームワークです。複雑なデータベースを扱うウェブサイトを開発する際に必要な労力を減らす為にデザインされました。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述･作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像･リスト･表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

API

APIはApplication Programming Interfaceの略です。APIはプログラムにリクエストされるサービスがどのように動作するかを、デベロッパーが定めたものです。

0グッド

0クリップ

投稿2019/07/09 07:04

0

0

前提・実現したいこと

djanogrestframeworkのapi呼び出しをjavascriptのパッケージaxiosでできるらしいということがわかり実践したい。
しかし、axiosをimportできない。
どうしたらaxiosが使えるようになるでしょうか？

発生している問題・エラーメッセージ

chromeエラー
cssとjavascriptのファイル自体は読み込まれている。
chromeエラー
エラー文

Uncaught SyntaxError: Unexpected identifier

該当のソースコード

html
1{% load static %}
2<!DOCTYPE html>
3<html lang="jp" dir="ltr">
4  <head>
5    <meta charset="utf-8">
6    <title></title>
7    <script type="text/javascript" src="{% static 'js/index.js' %}"></script>
8    <link href="{% static 'css/index.css' %}" rel="stylesheet">
9  </head>
10  <body>
11    <p>test</p>
12
13  </body>
14</html>
css
1p {
2  color: red;
3}
js
1import axios from "axios";
2
3console.log("import completed");
4axios
5  .get("http://127.0.0.1:8000/api/v1/")
6  .then(response => {
7    console.log("status:", response.status);
8    console.log("axiosGetData:", response.data);
9  })
10  .catch(err => {
11    console.log("axiosGetErr", err);
12  });
13window.alert("test");
yml
1version: '3'
2
3services:
4  db:
5    image: postgres
6  web:
7    build: .
8    command: python manage.py runserver 0.0.0.0:8000
9    volumes:
10      - .:/code
11    ports:
12      - "8000:8000"
13    depends_on:
14      - db
Dockerfile
1FROM python:3
2ENV PYTHONUNBUFFERED 1
3RUN mkdir /code
4WORKDIR /code
5COPY requirements.txt /code/
6RUN pip install -r requirements.txt
7RUN apt-get install -y gnupg
8RUN curl -sL https://deb.nodesource.com/setup_10.x | bash -
9RUN apt-get install -y nodejs
10RUN npm install axios --save-dev
11COPY . /code/
txt
1Django>=2.0,<3.0
2psycopg2>=2.7,<3.0
3djangorestframework

試したこと

ここに問題に対して試したことを記載してください。
①docker-composeで環境を作る
②axiosを追加することに決める、dockerfileを書き直す。

FROM python:3
ENV PYTHONUNBUFFERED 1
RUN mkdir /code
WORKDIR /code
COPY requirements.txt /code/
RUN pip install -r requirements.txt
RUN apt-get install -y gnupg//追加
RUN curl -sL https://deb.nodesource.com/setup_10.x | bash -//追加
RUN apt-get install -y nodejs//追加
RUN npm install axios --save-dev//追加
COPY . /code/

③ビルドした
正常にビルド完了

➜  djangorestframework git:(master) ✗ sudo docker-compose build
db uses an image, skipping
Building web
Step 1/11 : FROM python:3
 ---> 34a518642c76
Step 2/11 : ENV PYTHONUNBUFFERED 1
 ---> Using cache
 ---> ff4afb48bfa0
Step 3/11 : RUN mkdir /code
 ---> Using cache
 ---> ceec010feebe
Step 4/11 : WORKDIR /code
 ---> Using cache
 ---> e707d1b2e60a
Step 5/11 : COPY requirements.txt /code/
 ---> Using cache
 ---> 1cc11eda6568
Step 6/11 : RUN pip install -r requirements.txt
 ---> Using cache
 ---> bffc88f8924e
Step 7/11 : RUN apt-get install -y gnupg
 ---> Using cache
 ---> 6d54121ce170
Step 8/11 : RUN curl -sL https://deb.nodesource.com/setup_10.x | bash -
 ---> Using cache
 ---> ee3599f7553c
Step 9/11 : RUN apt-get install -y nodejs
 ---> Using cache
 ---> 40a7d3eee167
Step 10/11 : RUN npm install axios --save-dev
 ---> Using cache
 ---> c6dd0853d8b0
Step 11/11 : COPY . /code/
 ---> 1698e7492ca6
Successfully built 1698e7492ca6
Successfully tagged djangorestframework_web:latest

バージョンも表示される

➜  djangorestframework git:(master) ✗ sudo docker-compose run web npm info axios version 
Starting djangorestframework_db_1 ... done
0.19.0

④jsファイルでimport、失敗

補足情報（FW/ツールのバージョンなど）

開発環境
Ubuntu18.04.2
docker-compose1.22.0
django2.2.2
djangorestframework3.9.4
aixios0.19.0
言語
python,javascript,html,css

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2件

0

自己解決

axiosをimportするのはnodeの環境でなければならなかったようです。
reactのプロジェクトを立ち上げ、その中でaxiosをimportできます。

投稿2019/07/14 08:58

yk_00
yk_00

総合スコア15

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

パッと見でアレ？と思っただけですけど
RUN npm install axios --save-dev
RUN npm install axios --saveじゃないですか？

投稿2019/07/10 01:01

gentaro
gentaro

総合スコア8947

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

yk_00
yk_00

2019/07/10 06:43

やってみましたが変わりませんでした。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

質問の解決につながる回答をしましょう。 サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。 また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.29%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

トップaxiosに関する質問

javascriptのパッケージaxiosがimportできない