質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.51%

  • JavaScript

    20400questions

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

  • HTML

    11488questions

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

  • CSS

    7545questions

    CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

  • Visual Studio Code

    426questions

    Visual Studio Codeとは、Microsoft社が開発したマルチプラットフォーム対応のテキストエディタです。Visual Studioファミリーの一員でもあります。拡張性とカスタマイズ性が高く、テキストエディタでありながら、IDEと遜色ない機能を備えることができます。

Visual Studio Codeを使ったJavascript HTML CSSの環境構築(初心者向け)の方法を教えてほしいです。

解決済

回答 3

投稿

  • 評価
  • クリップ 0
  • VIEW 385

rickey

score 12

オフラインでの環境構築の方法がわからず、現在は、下記のサイトを用いて、勉強をしています。
このサイトを使って、以下のコードを入れると
https://thimble.mozilla.org/ja
1)クリックする、
2)javascriptを用いて、テキストを変更する
3)テキストを赤に変更する
4)コンソールに「コンソールに表示できた」を表示できる
ができます。
これと同じことを、Visual Studio Codeを用いてやりたいです。
https://code.visualstudio.com/download

しかし、自分で開発する環境の構築がどうしてもうまくできません。
Visual Studio Codeをインストールし、いろいろなサイトを調べましたが、
・Visual Studio Codeのインストールの方法
・Visual Studio Codeの特徴
・どんなプラグインを使うといいか?
・Visual Studio Codeを用いて、C言語やPythonの開発環境の作り方

などは見つけることができたのですが、
最も基礎でおそらくそのままできるでしょ?と皆さまが思うような
Javascript HTML CSSのやり方がまったくわからず、探しても見つけることが
できませんでした。
どのフォルダを作り、そのフォルダの下にどのファイルを作って、
どの名前を付ければいいのか?わからず、困っています。
どうかご教授ください。このサイトに載っている、という情報も大歓迎です。
初心者に力を貸してください。よろしくお願いします。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Thimble Sample</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <h1 id="title">色と文字を変えたい</h1>
    <button id='btn'>クリック</button>
    <script src="script.js"></script>
  </body>
</html>
  btn.addEventListener('click', function() {
  var btn = document.getElementById('btn')
  var h1 = document.getElementById('title')
  h1.textContent=("成功")
  console.log("コンソールに表示できた");
});
h1{
  color:red
}
  • 気になる質問をクリップする

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • mts10806

    2019/01/02 19:08

    んー。やりたいことによります。html5によるアプリも作れるのでその場合(有料だったと思いますが)、MonacaというWebサービスもあります。ツールやソフトだけが選択肢ではないので、要件に合わせて決める形になりますね

    キャンセル

  • mts10806

    2019/01/02 19:15

    Android StudioでもWebビューワという機能を使えば中身はhtmlでもできますしね。htmlは結局Webなのでブラウザかそれに準ずる(htmlをレンダリングできる)機能が必須です。Androidの方は選択肢が多いですね。

    キャンセル

  • mts10806

    2019/01/02 19:16

    まあそのあたり質問を編集して追記されるともっとご自身に合ったアドバイスがもらえるのではないでしょうか

    キャンセル

回答 3

+3

HTML、JavaScript、CSSの3つであれば、特に開発環境の構築、のような大それた作業は不要です。

コードを書けるエディタ(ここではVSCode)と、ブラウザさえあれば実行できます。

とりあえず動かしたいということであれば、「ドットインストール」のサイトの、
「はじめてのJavaScript (全11回)」というレッスンをやってみれば、一通りHTMLとJavaScriptとCSSを動かす方法は分かるかと思います。

そのほか、「VSCode CSS 拡張機能」のようなキーワードで検索すれば、コーディングを楽にする拡張機能が見つかるかと思いますので、必要に応じてインストールされれば良いかと思います。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/01/02 18:13

    返事ありがとうございます。おそらく、開発環境という言葉を間違って使っているのかもしれません。
    教えていただいた、「はじめてのJavaScript (全11回)」は勉強したのですが、どのテキストエディターでやればいいのかわからないため、
    thimble.mozillaのサイトを使って勉強しました。
    ただ、このサイトを使わないとできないため、そろそろほかの環境でも
    できるようにしなければと、検索をしているところで、
    立往生しています。
    ドットインストール、わかりやすくて、いいサイトですよね。

    キャンセル

  • 2019/01/03 14:18

    どのテキストエディタでやればいいのか
     → 基本どのエディタでも問題ないです。

    キャンセル

+2

ごく初歩的なレベルでしたら、HTMLファイル1つを作るだけでいいでしょう。<style><script>を使えば、HTMLの中に直接CSSやJavaScriptを書けます。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Thimble Sample</title>
    <style>
      h1{
        color:red
      }
    </style>
  </head>
  <body>
    <h1 id="title">色と文字を変えたい</h1>
    <button id='btn'>クリック</button>
    <script>
      // JavaScriptは略
    </script>
  </body>
</html>

これをtest.htmlのようなファイル名で保存してブラウザで開けば、動作を確認できます。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/01/02 18:26

    回答ありがとうございます。現在、ほかの方も紹介してくださった、ドットインストールという動画のサイトで勉強をしているのですが、そこでも、javascriptとCSSを別ファイルで保存している方法もレッスンで出てきていて、それが、自分には再現できずに困っているところです。たぶん検索でもあんまり出てこないって、当然できるレベルってことですよね。お恥ずかしいですが、立往生してしまっているので、質問させていただきました。
    中期目標として、割り勘アプリをjavascriptで作ってウェブアプリとして公開する、
    次に、アンドロイドアプリとして開発してスマホで使えるようにする。
    としてまして、開発環境を作ろうとしてます。
    なので、しっかり環境を作れるようにしないといけないと思いまして、テキストエディターの使い方を調べていました。

    キャンセル

  • 2019/01/02 18:29

    ドットインストールで、どこに保存するとかも解説されていませんか?もう少し見返してみてはいかがでしょうか。

    キャンセル

  • 2019/01/03 07:16

    もしかしたら、そこを飛ばしてしまったかもしれません。
    もう一度、動画を見直して見ます。ありがとうございます。

    キャンセル

  • 2019/01/03 18:32

    ありました。ドットインストールの一番最初に。自分がjavascriptを勉強したくて、一番最初の飛ばしてしまったのが問題でした。atomというテキストエディターの使い方がしっかりと書かれていて、どのフォルダにどのファイルをどの名称で入れる等も書かれていました。
    ありがとうございました。

    キャンセル

checkベストアンサー

+1

Visual Studio を使ってはいかがですか?(Visual Studio Code ではなくて)

Visual Studio Community 2015 の例ですが、プロジェクトの新規作成で、

イメージ説明

ASP.NET Web Application (.Net Framework) を選択し、

イメージ説明

「空」もしくは「Web フォーム」を選択し、

イメージ説明

自動生成されたプロジェクトの画面のソリューションエクスプローラーのプロジェクトを右クリックしてソースを追加し、

イメージ説明

表示する html ソースを開いたまま[デバック(D)]⇒[デバックの開始(S)]または[デバッグなしで開始(H)]をクリックすると開発用の Web サーバー IIS Express が立ち上がって、以下のようにブラウザ(以下の例では IE ですが Chrome 等に変更可)に結果が表示され、IE の開発者ツールでコンソール出力も表示できます。

イメージ説明

ちなみに、JavaScript のコードのデバッグもできます。

【追伸】

下の 2019/01/03 12:19 の私のコメントで「詳しい説明は上の回答欄に追記しておきます」と書きましたが、それを以下に書きます。

たぶん、ブラウザのアドレスバーには、以下の画像(IE11 の場合)のように、http://localhost:xxxxx/Sample.html ではなくて http://localhost:xxxxx/ と表示されていると思います。(xxxxx はポート番号。下の画像では 61544 となっていますがプロジェクトによって異なります)

イメージ説明

http://localhost:xxxxxx/ というようにディレクトリを Web サーバー (IIS Express) に要求した場合、Web サーバーはまず以下のファイルがそのディレクトリにないか上から順に探し、見つかればそれを応答として返します。

Default.htm
Default.asp
index.htm
index.html
iisstart.htm
default.aspx

いずれも見つからない場合は、Web サーバーはディレクトリのファイル一覧を表示しようとしますが、デフォルトではその権限が与えられてないので拒否され、403.14 エラーになったということです。

自分の環境の Visual Studio Community 2015 では Sample.html を表示した状態から[デバック(D)]⇒[デバックの開始(S)]または[デバッグなしで開始(H)]をクリックすれば、最初の回答の一番最後の画像に示したように Sample.html が呼ばれてブラウザに表示されるのですが、そのようにやりましたか?

注意:本題とは直接関係ないことですが、ブラウザのキャッシュに注意してください。html, css, js ファイルの内容を変更したのにブラウザにその結果が反映されないことがあったら、ブラウザのキャッシュのせいです。

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/01/03 07:07

    お返事ありがとうございます。知りたかったのは、まさにこの辺のことでした。こんな丁寧に写真までつけて感謝です。
    なんとかもう一歩というところまできたのですが、
    デバックすると以下のエラーが出てしまって、てこづっています。おそらく自分の何かの設定だと思うのでですが。このエラーは見たことありますか?
    --------------------------------------------------------------------
    HTTP Error 403.14 - Forbidden
    Web サーバーは、このディレクトリの内容の一覧を表示しないように構成されています。
    可能性のある原因:
    既定のドキュメントは要求された URL に対して構成されていません。ディレクトリの参照がサーバーで有効にされていません。
    対処方法:
    ディレクトリの参照を有効にしない場合は、既定のドキュメントが構成され、ファイルが確実に存在するようにします。
    ディレクトリの参照を有効にします。
    IIS Express インストール ディレクトリに移動します。
    appcmd set config /section:system.webServer/directoryBrowse /enabled:true を実行して、サーバー レベルでのディレクトリ参照を有効にします。
    appcmd set config ["SITE_NAME"] /section:system.webServer/directoryBrowse /enabled:true を実行して、サイト レベルでのディレクトリ参照を有効にします。
    サイトまたはアプリケーション構成ファイルで configuration/system.webServer/directoryBrowse@enabled 属性が true に設定されていることを確認します。

    キャンセル

  • 2019/01/03 12:19

    対症療法的ですが、html ファイル名を index.html に変更して試したらどうなりますか? 詳しい説明は上の回答欄に追記しておきます。

    キャンセル

  • 2019/01/03 18:28

    できました!!!!
    書いてくださった「自分の環境」を読んで、ハッとして、まったく同じように動かしてみました。

    1.デバックをしようとしてできないときはHTMLファイルではなく、Javascriptファイルを表示した状態でF5を押していた。
    2.HTMLファイルを表示した状態でF5を押したらデバックが成功した。
    (ファイル名はindex.htmlではなくても成功)

    どうやるか?だけでなく、なぜかを書いてくださったおかげで、わかってきました(まだ完全とはいいませんが)。
    説明を読むと、下記の中を探していって、応答するということは、
    htmlの名称は、下記の名称(理由はまだわかりませんが、特にindex.html)したほうがよい。
    ということのようですね。
    Default.htm
    Default.asp
    index.htm
    index.html
    iisstart.htm
    default.aspx

    まだ試してませんが、上記の名称のHTMLファイルが共存していると
    自分の想定していない動きが起こりそうな気がしています。

    今後は、メインのHTMLファイルはindex.htmlにし、
    同時に作業しているファイルに上記の6つの名称が無いようにする。
    F5を押してデバックするときは、javascriptではなく、HTMLファイル
    (特にindex.htmlの名称のファイル)を表示した状態でやるようにします。

    SurferOnWww様、
    おそらく、これのアドバイスの作成に相当な時間を使ってくださっているかと思います。
    おかげで、先に進むことができます。
    本当にありがとうございます。

    キャンセル

同じタグがついた質問を見る

  • JavaScript

    20400questions

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

  • HTML

    11488questions

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

  • CSS

    7545questions

    CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

  • Visual Studio Code

    426questions

    Visual Studio Codeとは、Microsoft社が開発したマルチプラットフォーム対応のテキストエディタです。Visual Studioファミリーの一員でもあります。拡張性とカスタマイズ性が高く、テキストエディタでありながら、IDEと遜色ない機能を備えることができます。