【WEBアプリ】準備・基礎学習

てと

2023年1月25日 19:47

ここでは、WEBアプリを作る上での、必要な準備や、基本的な知識を学習していきます。

その後、カウントアプリなどの簡単なアプリを複数個、作っていきます。

準備編

1. 必要なアプリ（開発環境）

Visual Studio Code

Chrome

他のブラウザも使用できますが、ここではchromeを使用していきます。

2. 基本的なはじめ方

① index.htmlをchromeで開く。
② Visual Studio Code を開く
③ ファイルを開くアイコンをクリック。

④フォルダーごと選択

⑤ Get Startedのページを閉じる（表示されてなければスキップ）
⑥ HTML / CSS / JavaScript のコードを書いていく。

あとは、コードを書いて、
1. JavaScriptやhtmlを書き換える
2. それぞれのファイルを保存 command + S もしくは、Control + S
3. chromeでindex.htmlをリロード command + R もしくは、Control + R

【注意】コードの保存は、ファイルごとに行うこと！

3. よく使うショートカット

コードの保存

保存されてない時、

保存されてる時、

chrome でのindex.htmlのリロード

一個前に戻す

⌘ Command + Z (for Mac) / Control + Z (for Windows)

一個前に戻したのを取り消す。（一個先に進める）

⌘ Command + Shift + Z (for Mac) / Control + Shift + Z (for Windows)

chromeでの要素の検証（inspect） → Console.log()などの確認

コメントアウト（プログラムのコードではなく、ただのメモ）

VSCode で、コメントアウトしたい行の文字を選択し、
⌘ Command + / (スラッシュ) (for Mac)
Control + / (スラッシュ) (for Windows)

基礎学習

1. HTML / CSS / JavaScript の違い

HTML：テキストやボタンなどの内容を書くコード
CSS：文字の色や背景色、フォントなどデザインを書くコード
JS：ボタンを押した時の操作や、◯秒ごとに変えるなど、動きを書くコード

それぞれ、違うコードなので、書き方などが全く異なります。

2. Consoleの確認の仕方

console.log("Hello");

というコードがあった時、
chromeで

を押して、下の写真のconsoleをクリックすることで、consoleを確認することができます。

3. もしうまくコードが動かなかったら

全てのファイルが保存されてるか確認。
全角のスペースが入ってないか確認
かっこ(や{ の、開く数と閉じる数があってるか確認
セミコロン(CSS / JS )や、カンマ (CSS) があるか確認
要素の検証(inspect) のconsoleでエラーが出てるか確認

次回予告

カウントアプリ

それではまた。

【WEBアプリ】 準備・基礎学習

準備編