ソロ活動 ChinoShun
私はHTML、CSS、JavaScriptにあまり触れたことがなかったので、この自己学習期間ではProgateを利用してこれらの基礎を学んだ。主に「Web開発コース(node.js)」を使って順番にコースをこなしていったが、Web開発コースのNode.js Ⅰで終わってしまった。
チュートリアルで作ったページをgithub上で公開してみました。
修了コース
HTML&CSS初級編
HTML&CSS中級編
JavaScriptⅠ
JavaScriptⅡ
JavaScriptⅢ
JavaScriptⅥ
JavaScriptⅦ
GitⅠ
以下ではHTMLのテンプレートと、JavaScriptの基本文法をまとめます。
HTML
テンプレート
code:html template
<!DOCTYPE html>
<html>
<head>
<!--文字コードの指定-->
<meta charset="utf-8">
<title>タイトル</title>
<!--CSSの適用-->
<link rel="stylesheet" href="適用したいcssのpath">
</head>
<body>
</body>
</html>
JavaScript
仕様はES2015(ES6)について書く。
処理の文末にセミコロン(;)を付ける!(忘れがち)
コメントアウト:文頭に//
コンソールに文字を出力
code: JavaScript console.log
console.log("Hello World!");
変数定義
code:JavaScript 変数
let 変数名 = "値";
定数定義
code:JavaScript 定数
const 定数名 = "値";
変数は値を更新することができるが、定数は値を更新できない。
文字列や定数の連結
+を使う
code: JavaScript +
console.log("ありがとう"+"ございます"); //出力「ありがとうございます」
console.log("3"+"4"); //出力「34」
console.log(3+4); //出力「7」
テンプレートリテラルを使う
文字列の中に定数(変数)を埋め込める
使うときは文字列全体をバッククォーテーション(`)で囲む必要がある。
シングルクォーテーション(')と間違えないように注意!!!
code:JavaScript テンプレートリテラル
const name="ChinoShunya"
console.log(こんにちは、${name}さん); //出力「こんにちは、ChinoShunyaさん」
条件分岐
code:JavaScript if
if(条件式){
処理;
} //セミコロンは不要
数値「12」と文字列「12」は異なるデータだが等価演算子(==)を使うと同じものとして扱われてしまう。異なるデータとして扱いたいときには厳密等価演算子(===)を使う。
関数定義
先頭にconstつけるの忘れがち
code:JavaScript 関数定義
const 関数名=function(){
処理;
return 返り値;
}
アロー関数
ES6から導入された新しい書き方。functionを用いるよりシンプルに書ける。
code:JavaScript アロー関数
const 関数名=(第一引数,第二引数,...)=>{
処理;
return 返り血;
}
配列を操作するメソッド
pushメソッド
配列の最後に要素を格納
forEachメソッド
code:javascript forEach
//numbersのそれぞれの要素に対してコールバック関数(forEach(ここのアロー関数のこと))を適用
numbers.forEach((number)=>{
console.log(number);
});
//最後のセミコロンを忘れないように!
//出力:1 2 3
findメソッド 条件に合う1番最初の要素を取り出す。
filterメソッド 条件に合うすべての要素を取り出す。
code:javascript findとfilterメソッド
//findメソッド
const evenNumber = numbers.find((number)=>{
return number % 2 ===0;
});
console.log(evenNumber);
//出力は 2
//filterメソッド
const evenNumbers=numbers.filter((number)=>{
return number % 2===0;
});
console.log(evenNumbers);
mapメソッド 配列内のすべての要素に処理を行い、その戻り値から新しい配列を作成するメソッド
code:javascript mapメソッド
//namesオブジェクトのfirstNameとlastNameをつなげたものを要素に持つ配列fullNamesを作る
const names = [
{firstName: "Kate", lastName: "Jones"},
{firstName: "John", lastName: "Smith"},
{firstName: "Denis", lastName: "Williams"},
{firstName: "David", lastName: "Black"}
];
const fullNames=names.map((name)=>{
return name.firstName + name.lastName;
});
ソロ活動を終えて
予定ではWeb開発コースを終わらせて、自分のポートフォリオサイトを作るまでやりたかったが中途半端に終わってしまった。
JavaScriptにある程度触れられたことはよかったと思う。
ソロ活動期間を終えてもProgateは続けようと思う。