この記事ではデイトラWeb制作コースでの学習記録、感想やつまずいた点などをご紹介します。
参考になりましたら幸いです。
前回の「ポートフォリオ作成編」はこちら。
今回から中級編となりました！
未知との遭遇になってくると思いますが、引き続き楽しみながら学びたいと思います♪
DAY1【JavaScriptの基本文法を学ぼう①】
未知との遭遇かと思っていましたが、JavaScriptはProgateでかじっていました…（笑）
でも、正直苦手意識のある言語だったので、ここでしっかり復習しました。
Javascriptとは
Javascriptとは、HTMLやCSSで作ったページに動きをつけるものです。
プログラミング言語の一つで、ユーザーの操作によってWebサイト上のアニメーションを実行させる指示を出しています。
それによりWebサイトが静的なものから動的なものへとグレードアップできます。
ポートフォリオで使用したBootstrapのハンバーガーメニューもJavaScriptによってプログラムされています。
詳しい特徴などはこちらのサイトを参考にしました。
変数 let・定数 const
変数とは数字にラベルをつけるようなイメージ。
変数は代入することで変更可能ですが、定数は値を変更することができません。
変数名を決めるルールは以下の通り。
- アルファベットと数字でつける必要がある
- 小文字から書く
- 数字を先頭にしてはいけない
バッククォーテーションを使う
コンソールする時の記述方法として「｀」を使う方法もあります。
console.log(`こんにちは ${name}`)
結果：こんにちは 太郎私はMac キーボード（UK）を使っていますが、Shiftキーの右隣にありました。
WindowsやMac JISキーボードではShift＋＠とのこと。
関数 function
関数とは特定の処理をまとめたもの。
Function 関数名(){} で記述します。
デイトラの学習で使用するJS検証ツール「jsconsole」ではShift＋Enterで改行します（Enterで実行されてしまうため）。
関数の中で関数functionの外で定義された定数は呼び出すことができます。
関数は自身が定義されたスコープ内で定義されているすべての変数や関数にアクセスできます。
参考サイトはこちらの「関数のスコープ」。
引数・返り値
引数とは、関数へのインプットの役割をするものです。
複数引数を持つ場合は「 , 」で区切ります。
一方返り値は関数内での計算結果を関数の外に伝える役割を持ちます。
条件分岐
if / else / if else
「もし〜なら」と記述することで条件分岐ができるのですが、個人的に間違えそうな部分をピックアップします。
>= 以上
<= 以下
=== 等しい
!== 等しくない
例：A > 20 && < 90 【Aは20より大きく90より小さい】
例：A === 0 | | A ===89 【Aは０または89】
Switch文
条件分岐の別の方法「Switch」。
default以外には必ずbreakを入れ、複数実行されるなどのバグが起こらないようにします。
switch (score){
case 1:
console.log("1")
break
case 2:
console.log("2")
break
case 10:
console.log("10")
break
default:
console.log("その他")
}DAY2【JavaScriptの基本文法を学ぼう②】
DAY2もProgateで学んだ内容の復習となりました。
配列 Array
配列とは複数のデータを扱うもの。
中身（＝要素）にはindexという番号が０から振られています。
０からスタートなので間違えないように！
ここからは要素を変更する方法です。
要素の追加
scores.push() で追加要素の数を数える
scores.length()最後の要素を削除
scores.pop()最初の要素を削除
scores.shift()オブジェクト（Object）
オブジェクトとは、キー（プロパティ）で複数の値を管理するもの。
数字（バリュー）が何（＝キー）を示すのかを指定することができます。
例：const scores{
math: 87
}
= 数学のスコアが87である上記の例で複数の教科が入っている時に数学のスコアだけコンソールすることなども可能です。
配列の中にオブジェクトを入れることができる
先述のようなスコアを複数人分入れることもできます。
要素には０からの数字が振られますので、[index]と指定することで一つずつ呼び出すことができます。
オブジェクトの中には関数を定義することができる
プロパティ内で指定されている関数のことをメソッドと言います。
this
const user = {
firstName: 'taro',
lastName: 'yamada',
fullName: function(){
return `${this.lastName} ${this.firstName}`
}
}
user.fullName()
結果： yamada tarothisを使うことによってオブジェクト（＝user）のプロパティ（＝firstName,lastName）にアクセスすることができます。
メソッド内でメソッドを実行することもできる
const user = {
firstName: 'taro',
lastName: 'yamada',
fullName: function(){
return `${this.lastName} ${this.firstName}`
},
sayHi: function(){
const fullName = this.fullName()
console.log(`${fullName}だよ`)
}
}
user.sayHi()
結果：yamada taroだよsayHiではfullNameを定義しており、thisでfullNameプロパティにアクセスして、returnされた値を入れることができます。
こうやって説明文が書けるようになるまで
繰り返し動画を見て理解しようと頑張りました（泣）
繰り返し表現
for文
for(let score of scores){
console.log(score)
}
…scoresから一個ずつ取り出してscoreに入れる繰り返し表現のひとつ。
一個ずつ取り出して表示します。
forEach文
scores.forEach(function(score){
console.log(score)
})
…引数の中にfunctionを入れ、そのfunction中の引数にscore（＝一個ずつ取り出した要素）を入れ、繰り返し実行する…うおぉぉわからなくなってきそう
となったので繰り返し動画を見て何とか整理しました。
「 , 」つけ忘れで実行できないことがよくある
動画を見ながら実際にjsconsoleで実行してみると、「 , 」のつけ忘れによるエラーが多かったです。
要素が複数あるときは要注意。
DAY3【Web制作初心者のためのjs基礎講座（DOM操作）】
DAY3はJavascriptを使ってサイトに動きをつけていく方法を学びました。
JS基礎講座ということで、コードの理解ができカスタマイズできるレベルの最低限覚えておくべき知識をピックアップされています。
DOMとは
DOMとは、HTMLなどのドキュメントにJavascriptからアクセスするための仕組み。
ドキュメントにはツリー構造のHTMLデータが全て入っているので、その中から特定のデータを探し出し、メソッドを当てて動きをつけていきます。
実際に操作してみた
今回はブラウザ上で簡単なHTML/CSS/JSを書いて実行できる「JSFiddle」というサービスを使いました。
テキストの書き換え
呼び出したものを書き換える練習。
書き方は基本的に
「document」「取り方」「取ってきたものの処理」
の順番で記述します。
document.getElementById(' タイトル ').innerText = '新しいタイトル'JSで操作させる
ユーザーの操作によってJSが何らかのアクションを実行するように、という記述方法。
document.getElementById("ボタン").click()上記の例だと、「ボタンがクリックされたらそのURLをクリックします」という指令です。
イベント処理
特定のタイミングで処理させたいことを設定する記述方法。
よく使うのは.onloadと.addEventListener とのこと。
onload ： 読み込まれた直後に実行したい処理
クリックイベントでは第１引数に監視したいイベント、第２引数（function）にそのイベントが実行された時の処理を記述します。
.addEventListener ： 監視する
DAY4【jQueryを学ぼう】
DAY4はjQueryについて学びました。
jQueryもProgateでかじっていたので復習になります。
jQueryはJavaScriptよりも簡単にプログラムを書くことができ、最初にjQを読み込んでおくだけで世界中のプログラマーが作った便利なライブラリを使用することができます。
※商用利用については要確認
使い方
読み込みの順番
必ずjQライブラリ本体を読み込んでから自作jQファイルを読み込みます。
コードは上から実行されるので逆になってしまうとライブラリ本体が読み込めないのです。
読み込み場所はhead内部か、body内部です。
記述方法
$(function(){ ‘ 操作 ‘ })
これでイベント処理ができます。
‘ 操作 ‘ の中は、$(“主語”).動詞(“補語”); で完結。
コードが短いと見た目もわかりやすいし
間違いも起きにくいね
メソッドを使った要素の指定
親要素の中から特定の子孫要素を探し、当てはまる時だけプログラムを実行するものです。
実務でもよく使うそう。
find()とchildren()を使います。
find() ： 対象要素の子孫要素から、セレクタに該当するものを取ってくる。
children() ： 対象要素の直属の子要素から、セレクタに該当するものを取ってくる
イベント監視
JS同様にjQもイベント監視ができます。
clickイベント
$('セレクタ').click(function(){ '処理' });
hoverイベント
$('セレクタ').hover(function(){
function(){ 'ホバーされたときの処理'
}
function(){ 'ホバーが外れたときの処理'
}
});アニメーション
クリックやホバーした際に動きを伴って変化するアニメーションが、jQならメソッドで簡単に実行できます。
ハンバーガーメニューなどもそうですね。
下記の公式サイトを見ると、後に実践で使うfadeIn();など様々なアニメーションがありました。
色々使ってみたい
DAY5【jQuery実践課題①】
DAY5は実際にjQueryを使ってHTMLに動きをつけました。
めちゃくちゃ大変でした…
今回はjQueryライブラリの利用はNGということでしたので、調べたものを参考に自分で実装する練習です。
ドロワーメニューの実装
まずはドロワーメニューの実装。
今回はNavBarの「コース一覧」からドロワーメニューが開くように実装する練習。
まずどうやってHTMLを変えて良いか悩みました。
というより何からやっていいのかわからなくて…
ちなみにドロワーメニューが実行できるまでに8時間かかりましたw
その理由は後ほど…
上の画像のように３つのリストが下に並ぶよう、 display:none;をコメントアウトしながらCSSをつけていきました。
ドロワーのリストに最初はborderをつけていましたが、topとbottomのborderが重なってあまり綺麗ではなかったので、border-bottomのみにしました。
準備が整いdisplay:none;を外し、さあ動くかな…と思いきや。
全く動かず。
なぜ？？？？？？
どうやらjQそのものが反映されていない…？？
jQファイルの読み込み方を調べたり、もう一度貼り付けたりしましたがダメ。
泣きたくなりながら色んなサイトを見ていると、「パス合ってる？」という文言が。
嫌な予感がしてよく見たら、自作jQファイルが変な階層に入っていました…
ショック
ページトップへ戻るボタンを付ける
気を取り直し、次は「ページトップへ戻る」ボタンの実装。
こちらは30分でできました。
コツ掴んだ感（フラグ）
参考にしたサイトはこちら。
今回はdisplay:none;を使わず、jQueryで全て実装しました。
ボタンaの親要素にdisplay: block; と text-align: right; を指定し右寄せに。
position: fixed; をつけて固定し、程よい場所をbottomとrightで指定でできました。
DAY6【jQuery実践課題②】
DAY6もjQueryの実践課題。
ちなみに本日が私のカフェPCデビュー日でした。（？）
モーダルで画像の拡大表示
最後の課題はモーダルウィンドウ。
はい。4時間かかりました。
時間かけすぎや
参考サイトはこちら。
ページの基礎構造として、
- モーダルウィンドウ（z-index：11）
- オーバーレイ（z-index：10）
- メインコンテンツ（z-index：1）
という構造が必要でしたが、それに気がつくのに時間がかかってしまいました。
また、モーダルウィンドウをメインコンテンツにあるimgとは別のタグに分けるべきということに気づきませんでした。
立体構造で考えるべきでした。
ちなみに、別サイトで「クラス名にjs-とつけておくと後で見た時や他の人からもすぐにjQueryで操作しているということがわかる」という文言を見かけました。
今回はそこまで意識できなかったのですが、次回は意識してクラス名をつけてみたいと思います。
調べる途中で参考になった記事をご紹介します。
.clickと.on(click)の違い
【CSS】画像やテキストを縦横中央に配置する方法4つ
今回縦横中央はこちらを使いました。
- top: 50%;
- left: 50%;
- transform: translate(-50%, -50%);
またまた画像の親要素につけるのを忘れておりましたが…
前回の学びを生かして無事に実装できました。
まとめ
結構大変な３日間でした…
思えばProgateの時もJSやjQはあまり好きではなかった気がします…
でも、今回できたことはBoost Noteにメモしましたし、どんどんできることを増やしていけば調べるのもスピードが上げられそうです。
ポートフォリオでも動きをつけようかな！
次回は「Sass学習編」をレポートします！
コメント