【ドットインストール】第5回!256times参加レポート!【学習メモ】

HTML/CSS

みなさんこんにちは!おさかなです!

今回は「第5回256times」について、書いていこうと思います!

「256times」って何?という方はコチラをチェック!

今回もドットインストールが用意している、「プレイグラウンド」という環境でコーディングしていきました…!

プレイグラウンドの利用はコチラ!
※ドットインストールのアカウントを取得しておく必要があります…!

それでは、レッツゴー!!!!!

想定読者
・ドットインストールで学習中の方
・256timesって何?という方
・ソースコードを添削してほしい方

第5回の課題は?

課題の詳細についてはコチラ!

 

第5回の課題は「JavaScript」で「動きのある3つの箱」を作ってみる!でした…!

今回もいつも通りの流れです…!

・21:00 課題発表
・21:30 課題提出締め切り、休憩
・21:35 コードレビュー開始
・22:00 番組終了
「生放送見逃した!」って方も、「アーカイブ」が残っているので「コチラ」から見ることができます…!(よかった…!)

実際に参加した感想

今回からは「JavaScript」も取り入れられていてチャレンジし甲斐があり、とても楽しかったです…!

まだまだ「HTML/CSS」で躓く部分もあるので、もっとスムーズにコードを書いていけるといいなと思いました。

そして、「JavaScript」も基本的なことがしっかりと理解できていないので、これからもっと勉強して、アウトプットの回数を増やしていきたいと思います!
(がんばります…!)

おさかなのソースコード

HTML 

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>My Playground</title>
  <link rel="stylesheet" href="css/styles.css">
</head>
<body>
  <ul>
    <li id ="left"></li>
    <li id ="center"></li>
    <li id ="right"></li>
  </ul>
  <script src="js/main.js"></script>
</body>
</html>

CSS

ul {
  list-style: none;
  display: flex;
  justify-content:space-around;
}
li {
  width: 100px;
  height: 100px;
  background: pink;
}
#left.orange {
  background: orange;
}

JavaScript

'use strict';

let count = 0;

document.getElementById("left").onclick = function() {
  this.classList.toggle("orange");
};

document.getElementById("center").onclick = function() {
  count++;
  console.log(count);
};

レビューコードまとめ

今回は「JavaScript」をメインに、レビューを行っていました!

レビューコード1

HTML 

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>My Playground</title>
  <link rel="stylesheet" href="css/styles.css">
</head>
<body>
  <div class="contents">
    <div class="box">hello</div>
    <div class="box">0</div>
    <div class="box">?</div>
  </div>
  <script src="js/main.js"></script>
</body>
</html>

 

CSS

.contents {
  display: flex;
}
.box {
  width: 100px;
  height: 100px;
  /*background: #003ea8;*/
  background-color: blue;
  text-align: center;
  line-height: 100px;
  border-radius: 5px;
  color: #fff;
  user-select: none;
  cursor: pointer;
}
.box + .box {
  margin-left: 10px;
}

 

JavaScript

'use strict';

// var - 関数スコープ
// let, const - ブロックスコープ

// (function() {

{
  // let boxes = document.getElementsByClassName('box');
  let boxes = document.querySelectorAll('.box');
  
  let color = 'blue';
  
  // console.log(boxes[0]);
  
  boxes[0].addEventListener('click', function() {
    this.style.backgroundColor = this.style.backgroundColor === 'blue' ? 'pink' : 'blue';
    
    // if (color === 'blue') {
    //   // classList.toggle()
    //   this.style.background = 'pink';
    //   color = 'pink';
    // } else {
    //   this.style.background = '#003ea8';
    //   color = 'blue';
    // }
  });
  
  boxes[1].addEventListener('click', function() {
    this.textContent++;
  });
  boxes[2].addEventListener('click', function() {
    this.textContent += '?';
  });
}

// })();

 

レビューコード2

HTML 

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>My Playground</title>
  <link rel="stylesheet" href="css/styles.css">
</head>
<body>
  <div class="container">
    <div id="box1" class="box">1</div>
    <div id="box2" class="box"></div>
    <div id="box3" class="box">gray</div>
  </div>
  
  <script src="js/main.js"></script>
</body>
</html>

 

CSS

.container{
  display: flex;
}

.box{
  margin-left:12px;
  width:100px;
  height:100px;
  background: #bbb;
  line-height:100px;
  text-align:center;
  user-select:none;
  cursor:pointer;
}
.box:hover{
  /*cursor:pointer;*/
}

JavaScript

let box1 = document.getElementById("box1");
let box2 = document.getElementById("box2");
let box3 = document.getElementById("box3");

// console.log(box1);
box1.addEventListener('mousedown', function(){
  box1.style.background="orange";
  // classListのほうがいいと思います
});

box1.addEventListener('mouseup', function(){
  box1.style.background="";
});

box2.textContent = 1;
box2.addEventListener('click', function(){
  box2.textContent++;
});

box3.addEventListener('click', function(){
  let colors=["red","pink","orange","yellow","green","blue","navy","tomato"];
  let randomNum=Math.floor(Math.random() * colors.length);
  box3.style.background=colors[randomNum];
  // box3.textContent=colors[randomNum];
  box3.textContent = randomNum;
});

 

レビューコード3

HTML 

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>256times</title>
  <link rel="stylesheet" href="css/styles.css">
</head>
<body>
  
  <div class="boxWrap">
    <!--color-->
    <div class="box box1" id="box1">
      <p>hello</p>
    </div>
    
    <!--count-->
    <div class="box box2" id="box2">
      <p>0</p>
    </div>
    
    <div class="box box3"></div>
  </div>
  
  
  <script src="js/main.js"></script>
</body>
</html>

 

CSS

.boxWrap{
  display: flex;
}

.box{
  width: 5em;
  height: 5em;
  background-color: skyblue;
  margin-right: 1em;
  text-align: center;
}

.red{
  background-color: red;
}

JavaScript

// color
// document.getElementById("box1").onclick = function(){
//   this.classList.toggle("red");
// }

// document.getElementById("box1").addEventListener('click', () => {
//   document.getElementById("box1").classList.toggle('red');
// });

document.getElementById("box1").addEventListener('click', function() {
  this.classList.toggle('red');
});

// count
let countUp = 0;

// document.getElementById("box2").onclick = function(){
//   countUp++;
//   document.getElementById("box2").innerHTML = countUp;
// }

document.getElementById("box2").addEventListener('click', () => {
  countUp++;
  document.getElementById("box2").textContent = countUp;
});

 

レビューコード4

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>My Playground</title>
  <link rel="stylesheet" href="css/styles.css">
</head>
<body>
  <ul>
    <li id="left"></li>
    <li id="center">0</li>
    <li id="right"></li>
  </ul>
  <script src="js/main.js"></script>
</body>
</html>

CSS

ul {
  list-style: none;
  display: flex;
  justify-content:space-around;
}
li {
  width: 100px;
  height: 100px;
  background: pink;
}
#left.orange {
  background: orange;
}

JavaScript

'use strict';

// let count = 0;

// document.getElementById("left").onclick = function() {
//   this.classList.toggle("orange");
// };

document.getElementById("left").addEventListener("click", () => {
  document.getElementById("left").classList.toggle("orange");
});

// document.getElementById("center").onclick = function() {
//   count++;
//   console.log(count);
// };

document.getElementById("center").addEventListener("click", () => {
  document.getElementById("center").textContent++;
});

おさかなの今後の課題

MDNを読むことに慣れる(最初は流し読みでOK!)

・「this」の意味が「前の記述」によって変わるので注意する

・「””」、「’’」記述を統一する

・テキスト自体に「++」をしてカウントする書き方もある

【ドットインストール】主催の「256times」に参加してみた!【学習メモ】
【ドットインストール】主催の「256times」第1回に参加した「感想」、「課題の概要」、「進め方」のレポートです。実際のソースコードも公開!プログラミング学習中の人へ「おさかなび-osakanav-」では、「デジタル時代を楽しむためのミニ知識」をご紹介しています!ゆるいイラストが目印!

感想・まとめ

今回は「256times」について、書いていきました…!

いかがだったでしょうか?

第5回目の課題は「JavaScript」の知識も必要になってきて、すごく勉強になりました…!

毎回アウトプットの機会をいただけているので、「理解不足な部分」や「今後の課題」をしっかり見つけることができて本当に感謝です!

ドットインストールのみなさん!今回もありがとうございました。✨
次回の開催は「2/17(火)21:00~」ということで、興味のある人はぜひ参加してみてください…!(おさかなも参加します…!)

それでは今回はこの辺で!

ここまで読んでくださり、ありがとうございました!

おさかなでした!

 

【おさかなび-osakanav-】では、この記事の感想!おさかなへの応援メッセージ!おさかなに聞きたい事、質問!記事にしてほしい内容!などを大募集中!

「氏名」「メールアドレス」「内容」の3点をご記入の上「osakana1699@gmail.com」までご応募ください!

この記事は役に立ちましたか?

タイトルとURLをコピーしました