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

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

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

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

HTML

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

CSS

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

Q&A

解決済

3回答

4289閲覧

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

rickey

総合スコア24

JavaScript

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

HTML

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

CSS

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

1グッド

1クリップ

投稿2019/01/02 01:56

オフラインでの環境構築の方法がわからず、現在は、下記のサイトを用いて、勉強をしています。
このサイトを使って、以下のコードを入れると
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のやり方がまったくわからず、探しても見つけることが
できませんでした。
どのフォルダを作り、そのフォルダの下にどのファイルを作って、
どの名前を付ければいいのか?わからず、困っています。
どうかご教授ください。このサイトに載っている、という情報も大歓迎です。
初心者に力を貸してください。よろしくお願いします。

HTML

1<!DOCTYPE html> 2<html> 3 <head> 4 <meta charset="utf-8"> 5 <title>Thimble Sample</title> 6 <link rel="stylesheet" href="style.css"> 7 </head> 8 <body> 9 <h1 id="title">色と文字を変えたい</h1> 10 <button id='btn'>クリック</button> 11 <script src="script.js"></script> 12 </body> 13</html>

Javascript

1 btn.addEventListener('click', function() { 2 var btn = document.getElementById('btn') 3 var h1 = document.getElementById('title') 4 h1.textContent=("成功") 5 console.log("コンソールに表示できた"); 6});

CSS

1h1{ 2 color:red 3}
bochan2👍を押しています

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

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

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

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

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

m.ts10806

2019/01/02 02:32

VSCode以外では考えてないということでしょうか。静的サイト構築ならVPCodeである必要はないように思いますが
rickey

2019/01/02 06:54

VSCodeにはこだわってません。テキストエディター、お薦め、で検索したらたまたま上位に出てきたのとMicrosoftが開発したとのことでの安心感だけでして。お恥ずかしい。 中期目標として、割り勘アプリをjavascriptで作ってウェブアプリとして公開する、 次に、アンドロイドアプリとして開発してスマホで使えるようにする。 としてまして、開発環境を作ろうとしてます。 この目的には、他のテキストエディタがお薦めですか??
m.ts10806

2019/01/02 08:49

Androidが目標なら全く方向性変わりますねえ…。Android Studioというものがありますし。あっちはJavaがメインですね
rickey

2019/01/02 10:03

勉強する言語が間違っているということですよね?ウェブ向けに作ったアプリの中身を少しいじるとアンドロイド向けにできると勘違いしていました。そもそものスタートが間違っていそうですね。アンドロイドアプリに適した言語を検索して、それを勉強するための環境をどう作るかを検索して( (これがAndroid Studioなんですね?)、作ってから勉強はじめて、って流れですよね。先は長そうですが。がんばります。まずはAndroid StudioのインストールのJavaの基礎からの勉強ですね。
m.ts10806

2019/01/02 10:08

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

2019/01/02 10:15

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

2019/01/02 10:16

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

回答3

0

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

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

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

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

投稿2019/01/02 02:19

aikon_marimo

総合スコア1083

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

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

rickey

2019/01/02 09:13

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

退会済みユーザー

2019/01/03 05:18

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

0

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

html

1<!DOCTYPE html> 2<html> 3 <head> 4 <meta charset="utf-8"> 5 <title>Thimble Sample</title> 6 <style> 7 h1{ 8 color:red 9 } 10 </style> 11 </head> 12 <body> 13 <h1 id="title">色と文字を変えたい</h1> 14 <button id='btn'>クリック</button> 15 <script> 16 // JavaScriptは略 17 </script> 18 </body> 19</html>

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

投稿2019/01/02 02:21

maisumakun

総合スコア145121

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

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

rickey

2019/01/02 09:26

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

2019/01/02 09:29

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

2019/01/02 22:16

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

2019/01/03 09:32

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

0

ベストアンサー

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/02 02:55

編集2019/01/03 03:40
退会済みユーザー

退会済みユーザー

総合スコア0

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

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

rickey

2019/01/02 22: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 03:19

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

2019/01/03 09: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様、 おそらく、これのアドバイスの作成に相当な時間を使ってくださっているかと思います。 おかげで、先に進むことができます。 本当にありがとうございます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問