Skip to content

keimag-dev/web-tutorial

BranchesTags

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

3 Commits
.vscode
.vscode
 
 
intro-to-html-css
intro-to-html-css
 
 
README.md
README.md
 
 
index.html
index.html
 
 
index.mjs
index.mjs
 
 
styles.css
styles.css
 
 

Repository files navigation

web-tutorial

HTML, CSS, pure JavaScriptについて学ぶための練習用リポジトリ．

テキスト:

参考:

メモ

HTML

よく使うタグ

タグ 説明 使い方の例
<!DOCTYPE html> HTML5であることを宣言する 1行目に必ず書く
<html> HTML文書のルート要素 <html lang="ja">のように言語を指定することが多い
<head> メタ情報を記述する <meta charset="utf-8">で文字コードを指定することが多い
<meta> メタデータを提供する <meta name="description" content="ページの説明">
<link> 外部リソースをリンクする <link rel="stylesheet" href="styles.css">
<script> JavaScriptコードを埋め込む <script src="script.js"></script>
<body> HTML文書の本文を記述する ここに表示したい内容を書く
<h1>～<h6> 見出しを表す <h1>が最も重要な見出しで，<h6>が最も重要度の低い見出し
<p> 段落を表す 段落ごとに<p>で囲む
<a> ハイパーリンクを表す <a href="https://example.com">リンクテキスト</a>
<img> 画像を表示する <img src="image.jpg" alt="代替テキスト">
<ul> 順不同リストを表す <ul><li>項目1</li><li>項目2</li></ul>
<ol> 順序付きリストを表す <ol><li>項目1</li><li>項目2</li></ol>
<li> リストの項目を表す <ul>や<ol>の中で使用する
<div> ブロックレベルの汎用コンテナを表す レイアウトのために使用することが多い
<span> インラインの汎用コンテナを表す テキストの一部を囲むために使用することが多い
<form> フォームを表す ユーザーからの入力を受け取るために使用する
<input> 入力フィールドを表す <input type="text">や<input type="submit">など
<button> ボタンを表す <button type="button">クリック</button>
<table> 表を表す <table><tr><td>セル1</td><td>セル2</td></tr></table>
<tr> 表の行を表す <table>の中で使用する
<td> 表のセルを表す <tr>の中で使用する
<th> 表のヘッダーセルを表す <tr>の中で使用する

CSS

どこに書く？

  1. HTMLファイルのヘッダー(styleタグ内) 
    <!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>ぺージタイトル</title>
  <style>
    p {
      color: green;
    }
  </style>
</head>
</html>
  2. HTMLタグのstyle属性内 
    <p style="color: green;">楽しかったです。</p>
  3. CSSファイル (.css) 
    /* pagestyle.css */
p {
  color: green;
}
    HTMLファイルではlinkタグで以下のように呼び出す。 
    <!-- index.html -->
<!DOCTYPE html>
<html>
<head>
  <link href="pagestyle.css" rel="stylesheet" type="text/css">
</head>
<body>
  <p>Hello World:D</p>
</body>
</html>

基本的な文法

セレクター {
  プロパティ: 値;
}

セレクターには、HTMLタグ、class(.classname)、id(#idname)を入れられる。

p { /* <p></p>には全てこのスタイルが適用される */
    color: #505050;
}
.important { /* class="important" を指定している全てのHTML要素に適用される */
    font-weight: bold;
    color: red;
}
#username { /* id="username" を指定しているHTML要素に適用される */
    color: black;
}

JavaScript

どこに書く？

  1. HTMLファイル(scriptタグ内) 
     <!DOCTYPE html>
 <html lang="ja">
 <head>
   <meta charset="utf-8">
   <title>ページタイトル</title>
 </head>
 <body>
   <script>
     console.log("Hello World");
   </script>
 </body>
 </html>
    scriptタグはhead内でもbody内でも良いが，body内に書くことが多い。
  2. JavaScriptファイル (.js) 
    // script.js
console.log("Hello World");
    HTMLファイルではscriptタグで以下のように呼び出す。(head内に書くことが多い) 
    <!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>ページタイトル</title>
  <script src="script.js"></script>
  </head>
</html>

変数宣言

  • var : 古い書き方，基本的に使わない
  • let : 再代入可能な変数宣言
  • const : 再代入不可能な変数宣言 (Reactでは基本的にこちらを使用)

関数定義

function func1 (arg1, arg2) {
    console.log(`arg1の値は${arg1}，arg2の値は${arg2}です．`);
};

もしくは，アロー関数で代用可

const func1 = (arg1, arg2 = "defaultValue") => {
    console.log(`arg1の値は${arg1}，arg2の値は${arg2}です．`);
    return arg1 + arg2;
}

アロー関数は，1行のみの場合は省略記法あり

const func1 = (arg1, arg2 = "defaultValue") => arg1 + arg2;

分割代入

/* オブジェクト */
const myProfile = {
    name = "keimag",
    age = 23
};

const {name, age} = myProfile;
console.log(name); // keimag
console.log(age); // 23

/* リスト */
const oneWeekTemp = [25, 26, 30, 28, 24, 25, 23];

const [mondayTemp, tuesdayTemp] = oneWeekTemp;
console.log(mondayTemp); // 25
console.log(tuesdayTemp); // 26

Note

JavaScriptオブジェクトを分割代入する場合，変数名はキーと同名でなければならない
リストの場合は変数名は任意

スプレッド構文

配列の展開

const arr1 = [1, 2];
const sumFunc = (num1, num2) => console.log(num1 + num2);
sumFunc(...arr1); // 3

残りの取得

const arr2 = [1, 2, 3, 4, 5];
const [num1, num2, ...arr3] = arr2;
console.log(num1); // 1
console.log(num2); // 2
console.log(arr3); // [3, 4, 5]

配列のコピーと結合

const arr4 = [10, 20];
const arr5 = [30, 40];
const arr6 = [...arr4, ...arr5];
console.log(arr6); // [10, 20, 30, 40]

ループ

forループ

/* 通常のforループ */
const nameArr = ["一郎", "次郎", "三郎"];
for (let index = 0; index < nameArr.length; index++) {
  console.log(nameArr[index]);
}
/* for-each */
nameArr.forEach((name) => console.log(name));
/**
 * for-ofループ
 * (Pythonのfor...inループに相当)
 */
for (const name of nameArr) {
    console.log(name);
}

const myProfile = {name: "keimag", age: 23};
/**
 * for-inループ
 * (Pythonのfor key in dict.keys()に相当)
 */
for (const property in myProfile)  { // propetryはキー
    console.log(myProfile[propetry]) // valueを出力
}

Important

条件式

等価

  • 等価演算子== : 暗黙型変換を行って比較('1'==1でもtrue)
  • 厳密等価演算子=== : 多くのプログラミング言語の等価演算子に相当？('1'===1はfalse)

演算子

  • 三項演算子 条件式 ? trueの時 : falseの時
  • ヌル値合体演算子 const string = val ?? "val is null or undefined"
  • OR演算子 const val1 = val || "valはfalsy"
  • AND演算子 const val1 = val && "valはtruthy"

型

参考: 【JavaScript】typeof演算子とは ― Qiita

型 typeof出力 例
数値型 number 0, 10, Math.PI, Infinity
文字列型 string "abc", '1', typeof(0)
論理型 boolean true, false
undefined型 undefined undefined
関数型 function function () {}, class abc {}
オブジェクト型 object {name: "kei", age: 23}, [1, 3, 3], Date(), String()

truthyとfalsy

Important

Pythonと違って，空リストや空dictはtruthy！

const isTruthy = (obj) => {
    if (obj) {
        console.log(`${obj}はtruthy`)
    } else {
        console.log(`${obj}はfalsy`)
    }
};
isTruthy(false) // falseはfalsy
isTruthy(0) // 0はfalsy
isTruthy("") // ""はfalsy
isTruthy('') // ''はfalsy
isTruthy(true) // trueはtruthy
isTruthy(1) // trueはtruthy
isTruthy("ab") // trueはtruthy
isTruthy('2') // '2'はtruthy
isTruthy([]) // []はtruthy
isTruthy([1]) // [1]はtruthy
isTruthy({}) // [object Object]はtruthy
isTruthy({name: "keimag"}) // [object Object]はtruthy

コードスタイル

About

HTML, CSS, pure JavaScriptを習得する

kei-mag.github.io/web-tutorial/

Topics

study-project

Resources

Readme
Activity

Stars

0 stars

Watchers

0 watching

Forks

0 forks
Report repository

Contributors

Languages