20210303のHTMLに関する記事は13件です。

投稿日：2021-03-03T22:22:21+09:00

inputタグとtextareaタグでのvalueの渡し方について

概要

Laravelで編集機能を実装中にDBから取得したデータをviewへ表示しようとした時が
inputタグの場合は取得したデータが表示されているのに、texereaタグでは表示されなかった原因を記載します。

問題

なぜかタイトルは取得したデータが取得できているのに本文ではできていなかった。
（DBには確かにデータはあるにも関わらず）
form.balade.php
<label for="name">タイトル</label>
<input type="text" class="form-control" name="title" value="{{ $memo->title }}">

<label for="text">本文</label>
<textarea class="form-control" rows="10" name="memo" value="{{ $memo->text }}"></textarea>
解決

正しい書き方はこうだ
form.balade.php
<label for="name">タイトル</label>
<input type="text" class="form-control" name="title" value="{{ $memo->title }}">

<label for="text">本文</label>
<textarea class="form-control" rows="10" name="memo">{{ $memo->memo }}</textarea>
原因：texereaタグにvalu属性には対応していない

inputタグにはclass属性と同じ箇所にvalue属性も記述することでデータを表示することができるが、textareaタグにはそうではない。
私はなぜかinputタグと同じ要領でやれば表示されると勘違いしていたが、そうではなかったのだ。
form.balade.php
//間違い
<textarea class="form-control" rows="10" name="memo" value="{{ $memo->text }}">

//正しい
<textarea class="form-control" rows="10" name="memo">{{ $memo->memo }}</textarea>
追記:JavaScriptの場合は指定できる

@il9437 さんからコメントで教えて頂きました。

JavaScript場合は、textareaにもvalue値を指定できるようです。
test.js
<textarea id='ta'></textarea>
<script>
  document.getElementById('ta').value = 'test';
</script>
以上となります。
もし悩まれている方の解決策になれば幸いです。

　 Tweet
Qiitaで続きを読む

投稿日：2021-03-03T16:32:37+09:00

【CSS】オシャレな縁取り文字を簡単に作る方法

初めに

　この記事は、上記記事で紹介したポートフォリオで使用した技術を切り出した記事になります。もし宜しかったらこちらもご覧ください。

イメージ図

　今回紹介する縁取り文字を使用すると、上記の「Typing for Programer with Typie」の部分のように、「文字の外側を縁取る」ことが簡単に出来るようになります。

どんな場面で有効か

　上記画像はポートフォリオのランディングページなのですが、ご覧の通り画像を画面一杯に使用しております。この場合、画像の上に文字を表示することになるのですが、背景に明るい場所や暗い場所があるので、どんな色を採用しても読みづらい部分が必ず出てきます。かといって、文字を表示する部分を塗りつぶしてしまうと、画像を使っている意味が半減してしまうと考えました。
　そこでたどり着いた結論がこの「縁取り文字」でした。
　これならば背景色が何色だろうと文字を把握することが出来る上、画像を隠す範囲を最小限にすることが出来ます。人間の脳って、こういう「縁があるもの」を１つのカタマリとして認識しやすい構造になってるんでしょうね。

縁取り文字の作り方

　上記URLの「CMAN」というサイトを活用させて頂きました。

手順

文字の色を決める

縁取りの色を決める

縁取りの太さやぼかし加減を決める

実際にどう表示されるのか確認しながら微調整していく

出来上がったCSSを自分のアプリにコピペし、この内容を反映させたい要素のクラスに"outline"を書き足す

　以上です！！！
　文字色や縁取りの太さの変更はリアルタイムで下の見本に表示されるので、これだ！と思うデザインになるまでいくらでも自由に編集可能ですし、完成したらそのCSSをコピペするだけで自分のアプリへ反映することが出来ます。
　本当に便利ですので、もし宜しかったら一度試してみてはいかがでしょうか？

　また、この「CMAN」というサイトは「縁取り文字」だけでなく色んなWEBパーツを同様の方法で作成することが出来ます。作れるデザインの幅が格段に広がるかと思いますので、是非アクセスしてみてください！！

　 Tweet
Qiitaで続きを読む

投稿日：2021-03-03T15:17:40+09:00

3/3はひなまつり?なのでCSSだけでひし餅（菱餅）作ってみた

どうも7noteです。~餅シリーズ第二弾~ひし餅をCSSだけで作ってみた

CSSだけで作るシリーズ、ひなまつりに合わせてひし餅でも作りましょう。
前回作成したCSSでの立方体の作り方（サイコロも作れるよ）のときに作成した紙を応用して作っていきます

作り方

index.html

<div class="mochi">
  <div class="item top"></div>
  <div class="item item01-L"></div>
  <div class="item item01-R"></div>
  <div class="item item02-L"></div>
  <div class="item item02-R"></div>
  <div class="item item03-L"></div>
  <div class="item item03-R"></div>
</div>

style.css

.mochi {
  display:block;
  position:relative;
  width:100px;
  height:100px;
  transform-style:preserve-3d;
  transform:rotateX(-25deg) rotateY(-45deg); /* ここで四角の角度を調整できる */
}

.mochi .item {
  width: 100%;
  height: 10px;
  position:absolute;
  left:0;
  right:0;
  box-sizing:border-box;
}

/* 上 */
.mochi .item.top{
  transform:translate3d(0, -50px, 0) rotateX(-90deg);
  height:100%;
  background: #EFCBD7;
}

/* 1段目左 */
.mochi .item01-L {
  transform:translate3d(0, 0, 50px);
  background: #ECB0BB;
}

/* 1段目右 */
.mochi .item01-R {
  transform:translate3d(50px, 0, 0) rotateY(90deg);
  background: #ECB0BB;
}


/* 2段目左 */
.mochi .item02-L {
  transform:translate3d(0, 10px, 50px);
  background: #F7F7F7;
}

/* 2段目右 */
.mochi .item02-R {
  transform:translate3d(50px, 10px, 0) rotateY(90deg);
  background: #F7F7F7;
}

/* 3段目左 */
.mochi .item03-L {
  transform:translate3d(0, 20px, 50px);
  background: #8ABF47;
}

/* 3段目右 */
.mochi .item03-R {
  transform:translate3d(50px, 20px, 0) rotateY(90deg);
  background: #8ABF47;
}

完成

おまけ

小学生のとき、まだ肌寒い中給食で三色ゼリーが出たのが特別感あって嬉しい日でした。
寒いのに冷たいゼリーって思っていてもやっぱり嬉しかったですね。

第一弾もよければ参考に：「迎春なので鏡餅をCSSで作った」

おそまつ！

~ Qiitaで毎日投稿中!! ~
【初心者向け】WEB制作のちょいテク詰め合わせ

　 Tweet
Qiitaで続きを読む

投稿日：2021-03-03T13:26:23+09:00

フレックスボックスについて②

次にフレックスボックスの親要素について勉強していきましょう。
前回のフレックスボックスについてはこちら▶https://qiita.com/akari_0618/items/080dad83a550ea439fd2

親要素に当てるフレックスボックス

少し複雑になるので整理しながらやっていきましょう。
まず出てくるのは

①flex-direction

主軸の方向や向きを決めるプロバティです！
style.css
.container {
  background-color: crimson;
  display: flex;
  flex-direction: row;
}
.case1 {
  background-color: aqua;
  width: 30%;
}

.case2 {
  background-color: burlywood;
  width: 30%;
}

.case3 {
  background-color: cornflowerblue;
  width: 30%;
}
１．flex-direction;row
ブラウザで表示すると変わらないように見えますのでスクショは省きますが、
これだと主軸は箇条書きリストで向きは左に向かっていきます。
2.flex-direction:column;
に変えてみましょう！

積み重なっているのがわかりますかね！この場合は主軸が箇条書きリストから始まって下に続いて行きます！

ちなみにそれぞれにreverseという値がありますが、これはそれぞれ反対なので自分でやってみましょう！

justify-content

中身のアイテムの間や周囲に間隔を配置する方法を定義します!
flex-directionの下にかきます。
style.css
.container {
  background-color: crimson;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
1.space-between
要素の間が空きます！

2.center
真ん中に寄ります！

3.space-around

space-betweenとの違いがわかりにくいですが、端も空いてる部分ですね！

4.space-evenly

③align-items

こちらは子要素に直接当てるようです。もしこの子が当たんなかった場合はcontainerに高さをセットすればいいみたいです！
1.center

2.start

3.end

align-item は少し私も不安がありますが今、コードがこの状態なので、おそらく主軸が左で交差軸が上？になってるのかな？笑
style.css
.container {
  background-color: crimson;
  display: flex;
  flex-direction:row;
  justify-content: space-around;
  align-items: flex-end;
  height: 200px;
}

　 Tweet
Qiitaで続きを読む

投稿日：2021-03-03T12:17:11+09:00

JavaScript 要素を表示/非表示にする

visibility:hidden; と visibility:visible;で表示、非表示を作成する

尚、外部ファイルは取り込まずhtmlファイル内に<script></script>タグを使用して記述

show.html.erb

# クリックして開くところ
<div id="p1" class="dialog">

# クリックすることろ
<svg class="user-circleicon" onclick="clickBtn1()" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5.121 17.804A13.937 13.937 0 0112 16c2.5 0 4.847.655 6.879 1.804M15 10a3 3 0 11-6 0 3 3 0 016 0zm6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>

...

</div>

show.html.erb

<script>
# デフォルトは非表示
 document.getElementById("p1").style.visibility ="hidden";

 function clickBtn1(){
  const p1 = document.getElementById("p1");

  if(p1.style.visibility=="visible"){
   p1.style.visibility ="hidden";
   }else{
   p1.style.visibility ="visible";
   }
 }
</script>

参考：
https://itsakura.com/javascript-display

　 Tweet
Qiitaで続きを読む

投稿日：2021-03-03T11:54:47+09:00

フレックスボックスについて①

今回は前回の記事で作ったものからCSSのFlexboxを使っていきたいと思います。
今回取り上げるのはほんの一部なので、気になる場合は自分で調べてみてください?

フレックスボックスとは

横の主軸と縦の交差軸を使ってやるみたいなんですね。全然わからないんで、詳しくは自分で調べてみてください?
私はなんとなくわかったので、とりあえず、進みます?

実装

結局なんだろうって方もとりあえず先に進んで見ましょう。
まず、index.htmlを書き換えます！　前回の記事はこちら！▶https://qiita.com/akari_0618/items/ac6eb7fae89f2329ed2c
index.html
<link rel="stylesheet" href="css/style.css">
<div class="container">
  <section class="case1">
    <h1>箇条書きリスト</h1>
   <ul>
     <li>あいうえお</li>
     <li>かきくけこ</li>
     <li>さしすせそ</li>
   </ul>
  </section>
  <section class="case2">
    <h1>順序付きリスト</h1>
    <ol>
      <li>あいうえお</li>
      <li>かきくけこ</li>
      <li>さしすせそ</li>
    </ol>
  </section>
  <section class="case3">
    <h1>説明リスト</h1>
    <dt>あなたの名前は？</dt>
    <dd>山田花子</dd>
    <dt>あなたは女性ですか？</dt>
    <dd>はいそうです</dd>
  </section>
</div>
少しわかりにくいですが、新たにdivクラスにcontainerという親要素を追加します。
親要素とクラスが不安な方は▶https://qiita.com/akari_0618/items/3526fd7b751d9387667d
それではcssをいじっていきますね！
style.css
.container {
  background-color: crimson;
  display: flex;
}
.case1 {
  background-color: aqua;
  width: 30%;
}

.case2 {
  background-color: burlywood;
  width: 30%;
}

.case3 {
  background-color: cornflowerblue;
  width: 30%;
}
子要素のcaseさんたちをwidth設定します！
そして、display:flex; を親要素に指定します！
『フレックスボックスはじまるよー！』の合図ですね?

これを指定するとブラウザ上でこうなります。

横に整列しましたね！

次からは親要素に適応するフレックスボックスについて学んで行きましょう！

　 Tweet
Qiitaで続きを読む

投稿日：2021-03-03T11:01:20+09:00

ULボックスのその他

この記事ではUlボックスの中身の紹介をします。
前の記事でも紹介しましたが、ここではその他について紹介しますね?

①箇条書きリストについて

これは、リスト項目についてのタグでしたね。
index.html
<section class="case1">
 <ul>
   <li>あいうえお</li>
   <li>かきくけこ</li>
   <li>さしすせそ</li>
 </ul>
</section>
順序付きリストについて
index.html
<section class="case2">
  <h1>順序付きリスト</h1>
  <ol>
    <li>あいうえお</li>
    <li>かきくけこ</li>
    <li>さしすせそ</li>
  </ol>
</section>
ちょっと混乱しそうですが、前回と違いolタグで囲んでいます。
これは「オーダードリスト」と読みます。

説明リストについて
index.html
<section class="case3">
  <h1>説明リスト</h1>
  <dt>あなたの名前は？</dt>
  <dd>山田花子</dd>
  <dt>あなたは女性ですか？</dt>
  <dd>はいそうです</dd>
</section>
上記では質問形式になっていますが、下記のようになっています。
dt▶定義語・用語
dd▶dtで囲った用語を説明する文章

ブラウザで表示するとこうなります。

ではこれらの要素をCSSを使って少し動かして行きたいなと思います。
次の記事で動かしていきます。

　 Tweet
Qiitaで続きを読む

投稿日：2021-03-03T09:04:41+09:00

スクロールバーを上下に挿入

業務でスクロールバーを上下に挿入したので、記録に残していきたいと思います。

イメージとしてはこんな感じです。

スクロールバー上下が連動して移動できるようになってます。

実装

index2.html

<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="UTF-8">
  <title>上下スクロールバー</title>
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <div id="containar">
    <div class="scrollbar" id="scrollbar">
      <div class="inner"></div>
    </div>
    <div class="scrollbox" id="scrollbox">
      <div class="inner">
        <table id="data-table">

            <th>項目1</th>
            <th>項目2</th>
            <th>項目3</th>
            <th>項目4</th>
            <th>項目5</th>
            <th>項目6</th>
            <th>項目7</th>
            <th>項目8</th>
            <th>項目9</th>
            <th>項目10</th>
            <th>項目11</th>
            <th>項目12</th>
            <th>項目13</th>
            <th>項目14</th>
            <th>項目15</th>
            <th>項目16</th>
            <th>項目17</th>
            <th>項目18</th>

        </table>
      </div>
    </div>
  </div>
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
    integrity="sha256-3edrmyuQ0w65f8gfBsqowzjJe2iM6n0nKciPUp8y+7E=" crossorigin="anonymous"></script>
  <script src="main.js"></script>
</body>

</html>

tableタグにthをセットします。
※thは「Table Header（見出し）」のことです。

style.css

#containar {
    width: 500px;
    padding: 100px;
  }
  .scrollbar {
    width: 100%;
    overflow-x: scroll;
    overflow-y: hidden;
  }
  .scrollbar .inner {
    width: 2500px;
    height: 1px;
  }
  .scrollbox {
    width: 100%;
    margin-top: 5px;
    overflow-x: scroll;
    overflow-y: hidden;
  }
  .scrollbox .inner {
    width: 2500px;
    margin-bottom: 5px;
    background-color: #F9F8F6;
  }
  .scrollbox .txt {
    margin: 0;
    font-size: 16px;
    line-height: 1.5;
  }

レイアウト変更とスクロールバーをセットします。
この時点では行にデータが入っていなく、上下のスクロールバーが連動していないことがわかります。
では次

main.js

//上下のスクロールバー連動
$(function () {
    //「対象要素.on( イベント名, 関数 )」
    //イベント名がscrollなので、画面がスクロールした時に発動
  $("#scrollbar, #scrollbox").on("scroll", function () {
    if ($(this).attr("id") === "scrollbar") {
        //scrollLeftでスクロール量を取得
      $("#scrollbox").scrollLeft($(this).scrollLeft());
    } else {
      $("#scrollbar").scrollLeft($(this).scrollLeft());
    }
  });
});

//行にデータを挿入
var tableEle = document.getElementById("data-table");

for (var i = 0; i < 5; i++) {
  // テーブルの行を 5行追加する
  var tr = document.createElement("tr");

  for (var j = 0; j < 18; j++) {
    // テーブルの列を 18行追加する
    var td = document.createElement("td");
    td.innerHTML = "データ" + (i + 1) + "-" + (j + 1);
    tr.appendChild(td);
  }
  tableEle.appendChild(tr);
}

このようにすることによって行にデータが入り、上下のスクロールバーが連動していることがわかります

参考

https://qiita.com/kuro-wassan/items/86b6a24787116797a5d0

　 Tweet
Qiitaで続きを読む

投稿日：2021-03-03T08:34:54+09:00

JavaScriptで電卓を作ってみた。

JavaScriptで簡単な電卓を作ってみました。

21/3/4：小数計算に誤りがあったため、修正しました。

主な仕様

四則演算の電卓。
連続して計算できるようにしたい。

本当にシンプルな電卓です。

HTML & CSS

Html

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UFT-8">
        <title>電卓</title>
        <link rel="stylesheet" href="main.css">
        <script src="jquery-3.5.1.min.js"></script>
    </head>
    <body>
        <p class="show_number">0</p>
        <div class="number_button">
            <table>
                <tr>
                    <td><button class="number" id="Seven">7</button></td>
                    <td><button class="number" id="Eight">8</button></td>
                    <td><button class="number" id="Nine">9</button></td>
                    <td><button class="operator" id="Plus">+</button></td>
                </tr>
                <tr>
                    <td><button class="number" id="Four">4</button></td>
                    <td><button class="number" id="Five">5</button></td>
                    <td><button class="number" id="Six">6</button></td>
                    <td><button class="operator" id="minus">-</button></td>
                </tr>
                <tr>
                    <td><button class="number" id="One">1</button></td>
                    <td><button class="number" id="Two">2</button></td>
                    <td><button class="number" id="Three">3</button></td>
                    <td><button class="operator" id="Asterisk">＊</button></td>
                </tr>
                <tr>
                    <td><button class="number" id="Zero">0</button></td>
                    <td><button class="number" id="DoubleZero">00</button></td>
                    <td><button class="number" id="Point">.</button></td>
                    <td><button class="operator" id="Slash">/</button></td>
                </tr>
                <tr>
                    <td colspan="2"><button class="Allclear" id="AllClear">AC</button></td>
                    <td colspan="2"><button class="Equal" id="Equal">=</button></td>
                </tr>
            </table>
        </div>
        <script type="text/javascript" src="main.js" charset="UTF-8"></script>
    </body>
</html>

jQueryを使用。
電卓のボタンはtableで配置して整理しやすくしてます。

CSS

.show_number {
    background-color: black;
    color: white;
    width: 300px;
    height: 30px;
    text-align: right;
    font-weight: bold;
    margin-bottom: -1px;
}

.number_button {
    width: 300px;
}

table {
    width: 100%;
}

td {
    width: 25%;
}

button {
    width: 100%;
    font: 16px bold;
}

cssは簡単に、ボタンの体裁を整えるだけ。

JavaScriptで計算

JavaScript

function getDotPosition(float){
    let dotPosition = 0;
    float=String(float);
    if(float.lastIndexOf('.') != -1){
        dotPosition = (float.length-1) - float.lastIndexOf('.');
    }
    return dotPosition;
}

function Calc(num1, num2, ope){
    let result = 0;
    let dotPosition1 = getDotPosition(num1);
    let dotPosition2 = getDotPosition(num2);
    let max = Math.max(dotPosition1, dotPosition2);
    num1 = parseFloat(num1);
    num2 = parseFloat(num2);
    let value1 = parseInt((num1.toFixed(max) + '').replace('.', ''));
    let value2 = parseInt((num2.toFixed(max) + '').replace('.', ''));
    if(ope==3){
        if (max == 1) {
            max = max + 1;
        } else {
            max = max + max;
        }
    }

    let power = Math.pow(10, max);

    if(ope==1){
        result = (value1 + value2) / power;
    }else if(ope==2){
        result = (value1 - value2) / power;
    }else if(ope==3){
        result = (value1 * value2) / power;
    }else if(ope==4){
        result = (value1 / value2);
    }
    return result
}

let num1 = 0;
let num2 = 0; 
let ope = 0;
let point = 0;
let show_text = 0;
let number = 0;
let state = 0;
let negative = 0;

$(document).ready(function(){
    $("button").click(function(){
        let classes = $(this).attr("class");
        let id = $(this).attr("id");
        let text =$(this).text();
        if(id == "AllClear"){
            $(".show_number").text(0);
            num1 = 0;
            num2 = 0;
            ope = 0;
            point = 0;
            show_text=0;
            number=0;
        }else if(id=="minus" && show_text==0){
            negative=1;
        }else if(classes == "number"){
            state=0;
            if(id=="Point"){
                if(point==0){
                    if(show_text==0){
                        number = 0 + text;
                    }else{
                    number = $(".show_number").text() + text;
                    }
                    point = 1;
                    show_text = 1;
                    $(".show_number").text(number);
                }
            }else if(id=="DoubleZero"){
                if(show_text!=0){
                    number = $(".show_number").text() + text;
                    $(".show_number").text(number);
                }
            }else if(id=="Zero"){
                if(show_text!=0){
                    number = $(".show_number").text() + text;
                    $(".show_number").text(number);
                }
            }else{
                if(show_text==0){
                    if(negative==1){
                        text = -1 * text;
                        negative=0;
                    }
                    $(".show_number").text(text);
                    show_text=1;
                }else{
                    number = $(".show_number").text() + text;
                    $(".show_number").text(number);
                }
            }
        }else if(classes=="operator"){
            if(num1==0){
                num1 = $(".show_number").text();
            }else if(num1!=0){
                num2 = $(".show_number").text();
            }
            if(num2!=0 && state != 1){
                result = Calc(num1, num2, ope);
                num1 = result;
                $(".show_number").text(num1);
            }
            if(id=="Plus"){
                ope=1;
                state=1;
            }else if(id=="minus"){
                ope=2;
                state=1;
            }else if(id=="Asterisk"){
                ope=3;
                state=1;
            }else if(id=="Slash"){
                ope=4;
                state=1;
            }
            show_text=0;
            point=0
        }else if(id=="Equal"){
            if(num1!=0){
                num2 =$(".show_number").text();
            }
            result = Calc(num1, num2, ope);
            $(".show_number").text(result);
            show_text = 0;
            point=0;
            ope = 0;
            num1 = 0;
            num2 = 0;
            }
        });
    });

小数点の計算に誤差が出るのでgetDotPosition関数で調整。
Calc関数に数字１、数字２、演算を引数にとって計算させる。
- 計算中に小数点を処理しています。（後述）
global変数を用意。
- num1, num2: 数字２つ分
- ope: 演算
- point: 小数点の入力のFlag
- show_text: 表示が0かどうかのフラグ
- number: show_textへ反映させる変数
- state:　演算子Flag
- negative: マイナス処理のFlag
ボタンが押された時に、
- 押されたボタンのclass, id, 表示を取得。
- ACが押されたら全てを初期化。
- 計算の最初にマイナスが押されたら、negativeフラグを立てる。
- 小数点が押された時、表示の後に続けて小数点を入力し、pointフラグを立てる。
  - pointフラグが立っている時は小数点の入力を受け付けないようにする。
- 0または00が押された時、電卓の表示が0じゃなければ、その後に入力を足す。
  - 表示が0の時に00を続けて入力できないようにする。
- それ以外の数字ボタンの時、
  - 表示が0なら押した数字を表示。
    - その時negativeフラグが立っていたら、マイナスの数値で表示。
  - 表示が0じゃなければ、その後に数字を表示。表示フラグを立てる。
- 演算子の時、
  - num1が登録されてなければ、表示の数字をnum1に登録。
  - num1が登録されていれば、表示の数字をnum2に登録。
  - num2の登録があり、演算子フラグがなければ、
    - Calc関数で計算処理をし、結果をnum1に代入して、電卓に表示。
    - この処理で計算を続けて行うことができるようになる。
  - 各演算子に割り当てた変数をopeに代入して、演算子フラグを立てる。
    - 演算子フラグにより、演算子を間違って押しても、計算処理をせずに押しなおすことができる。
  - 表示フラグを0に、小数点フラグを0に戻す。
- =ボタンの時、
  - num1が登録されていれば、num2に表示を代入する。
  - Calc関数で計算をする。
  - 電卓上に結果を表示。
  - 各フラグを戻す。

小数点の計算について

小数点の計算は誤差が出ることがあるので、その処理をする必要があります。
ライブラリを導入する方法もあるようですが、今回はライブラリは使用してません。
数値を文字列に直して、小数点の位置をlastIndexOf関数で確認していきます。（String, getDotPosition)
小数点の位置が分かったら、小数点を解消するために桁数を記録しておきます。(Calc関数dotPosition1, dotPosition２, max)
数値に直した後 (parseFloat)、小数点を解消します（replace)。
桁数を別に置いておいて (power)、計算後に小数点の処理をします。

この処理をしておくと、誤差がなくなり正しく計算できます。

完成

　参考資料

jQueryでクリックされたid値をとる
 JavaScript：計算誤差の対処
 JavaScriptでの小数点の計算の誤差について

　 Tweet
Qiitaで続きを読む

投稿日：2021-03-03T07:13:26+09:00

JavaScriptでストップウォッチを作ってみた。

HMTL CSS JavaScriptで簡単なストップウォッチを作ってみた。

主な仕様

0.1秒単位でカウントアップ

一時停止機能あり

リセットボタンでカウントを初期化

本当に簡単なものになっています。

HTML & CSS

まずはHTMLとCSSでストップウォッチの形を作ります。
HTML
<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <title>ストップウォッチ</title>
        <link rel="stylesheet" href="main.css">
        <script src="jquery-3.5.1.min.js"></script>
    </head>
    <body>
        <h3>ストップウォッチ</h3>
        <div class="time_count">
            <p id="hour">0</p>
            <p>:</p>
            <p id="minute">0</p>
            <p>:</p>
            <p id="second">0</p>
            <p>:</p>
            <p id="m_second">0</p>
        </div>
        <button class="button" id="start" onclick="count_start()">スタート</button>
        <button class="button" id="stop">ストップ</button>
        <button class="button" id="reset">リセット</button>
        <script type="text/javascript" src="main.js" charset="UTF-8"></script>
    </body>
</html>
今回はjQueryを使います。
time_countクラスでタイマー部分を作成し。buttonで各種ボタンを配置します。
CSS
.time_count {
    display: flex;
}

.time_count p {
    margin-left: 10px;
    margin-right: 10px;
    font-size: 25px;
    font-weight: bold;
}

.button {
    width: 100px;
    height: 50px;
    border: 1px solid;
    font-weight: bolder;
}
CSSは簡潔に、ボタンの大きさやフォントの大きさを設定。
time_countクラスをflexにして、横並びにタイマーらしく見せています。

JavaScriptで動きをつける
JavaScript
function TimeCount(){
    let ms = $("#m_second").text();
    let sec = $("#second").text();
    let min = $("#minute").text();
    let hour = $("#hour").text();   
    ms++;
    $("#m_second").text(ms);
    if ($("#m_second").text()==10){
        sec++;
        $("#m_second").text(0);
        $("#second").text(sec);
    }
    if ($("#second").text()==60){
        min++;
        $("#second").text(0);
        $("#minute").text(min);
    }
    if ($("#second").text()==60){
        min++;
        $("#second").text(0);
        $("#minute").text(min);
    }
    if ($("#minute").text()==60){
        hour++;
        $("#minute").text(0);
        $("#hour").text(hour);
    }
}

let start = 0;
let time_count = null;

$(document).ready(function(){
    $("#start").click(function(){
        start += 1
        if (start==1){ 
            time_count = setInterval(TimeCount, 100);
        };
    });
    $("#stop").click(function(){
        clearInterval(time_count);
        start = 0;
    });
    $("#reset").click(function(){
        clearInterval(time_count);
        start=0;
        $("#hour").text(0);
        $("#minute").text(0);
        $("#second").text(0);
        $("#m_second").text(0);
    });
});
TimeCount関数でタイマーの動きを制御します。

msが1つずつ増加していく。

msが10になったらs (秒)が１増加。

sが60になったらm (分)が１増加。

mが60になったらh (時)が１増加。

それぞれ、位が上がったら0に戻す(msが10になった時、sを+1してmsは0にする)。

関数が呼び出された時は、タイマーの続きから始められるように初期値を代入する。

start変数を置いて、startボタンが押されたら1ずつ追加。

start変数が1の時(startボタンが1回押された時)にタイマースタート。　

この変数がないと、連続してstartボタンが押せてしまう。

setInterval関数で100msずつカウントする。

time_count変数にsetIntervalを代入してclearできるようにする。

time_count変数をどの関数からでも操作できるように、Global変数（関数の外におく)にする。

ストップボタンで一時停止する

clearIntervalだけで初期化しないため、すぐにstartを押すと、一時停止したところから再開可能。

リセットボタンでタイマーを止めた後、全てを初期化する

ストップボタンやリセットボタンが押された時は、start変数を0にして、再度スタートできるようにしておく。

完成

　 Tweet
Qiitaで続きを読む

投稿日：2021-03-03T05:33:56+09:00

カード型リンクでカード内に複数のリンクがあるときにリンクハイライトを綺麗に設定する

リンクをカード型デザインしているとカード内にリンクが複数あることが多々ある。
パソコンでは:hoverで適当に実装できるが、スマホだとリンクのハイライトが綺麗に実装されない。

ので、リンクハイライトが綺麗に実装できる方法を記載します?

カード型のレイアウトをつくる
<a href="記事に飛ぶ" class="card">
  <a href="記事に飛ぶ">
    <img src="thumbnail.png" src="thumbnail">
    <h1>Title</h1>
    <p>Paragraph</p>
  </a>
  <a href="ユーザー情報に飛ぶ">Name</a>
</a>
見た目はこんな感じで実装したい

リンクを機能させる

上記のコードだとユーザー情報へのリンクが機能しなくなるので、
<div class="card">
  <a href="記事に飛ぶ">
    <img src="thumbnail.png" src="thumbnail">
    <h1>Title</h1>
    <p>Paragraph</p>
  </a>
  <a href="ユーザー情報に飛ぶ">Name</a>
</div>
こんな感じのコードにする。
これで、記事情報とユーザー情報のどちらのリンクも機能する。
しかし、一番最初に記載した通り、ハイライトが綺麗に実装されない。

ハイライトはこんな感じでつく
くそブサイク

ハイライトを全体につける

全体につけるのであればカード全体をリンクとして扱う必要がある。
<div class="card">
<a href="記事に飛ぶ" class="card-link"></a>
  <a href="記事に飛ぶ">
    <img src="thumbnail.png" src="thumbnail">
    <h1>Title</h1>
    <p>Paragraph</p>
  </a>
  <a href="ユーザー情報に飛ぶ">Name</a>
</div>
a {
  -webkit-tap-highlight-color: transparent; /* ここで一旦ハイライトを全部なくす */
}
.card {
  position: relative;
}
.card-link {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: block;
  -webkit-tap-highlight-color: rgba(77, 200, 220, .24);
}
これでカード全体にリンクのハイライトがかかるようになった

z-indexでリンクのz位置を調整する

上記のままだと結局記事ページにしか飛ぶことができないので、z位置を調整してうまくリンクが配置されるようにする

わかりやすくクラス名をつけます
<div class="card">
<a href="記事に飛ぶ" class="card-link"></a>
  <a href="記事に飛ぶ" class="article-link">
    <img src="thumbnail.png" src="thumbnail">
    <h1>Title</h1>
    <p>Paragraph</p>
  </a>
  <a href="ユーザー情報に飛ぶ" class="user-link">Name</a>
</div>
a {
  -webkit-tap-highlight-color: transparent; /* ここで一旦ハイライトを全部なくす */
}
.card {
  position: relative;
}
.card-link {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: block;
  z-index: 2;
  -webkit-tap-highlight-color: rgba(77, 200, 220, .24); /* ここだけハイライトをつける */
}
.article-link {
  pointer-events: none;
  z-index: 3;
}
.user-link {
  z-index: 4;
}
図にするとこんな感じ

article-linkをタップするとpointer-events: none;だから、下のレイヤーにあるcard-linkがタップされたことになり、記事に飛ぶ
user-linkをタップすると一番上のレイヤーにあるから、そのままユーザー情報へ飛ぶ

ハイライトはcard-linkだけにつけてるから、user-linkをタップしても変にハイライトされない。

article-linkはdivでええやんって思うかもですが、pointer-events: none;が正しく動作しない場合などの保険にaにしています。
今はそう思ってるだけで多分そのうち設計方法は変えると思うのでこれが正ではないです。

あくまで、レイヤー構造を変更して、スマホのリンクのハイライトがうまく活用できる方法のひとつとして捉えてください。

　 Tweet
Qiitaで続きを読む

投稿日：2021-03-03T00:52:17+09:00

【JavaScript】クロネコヤマトの404ページでダンボールをこじ開けてみた

先日バズっていた以下のツイート↓

お探しのページが見つかりません Page not found https://t.co/WAMjFEzTEk

クロネコヤマトの404ページがめちゃ可愛かったのでみんなも見て
— たび (@mesotabi)March 1, 2021

どうやらクロネコヤマトのウェブサイトの404ページが面白いらしい

こんなことになっている。
そう、ダンボールを開けまくってクロネコを探すミニゲーム（制限時間30秒）が始まるのである。

30秒？俺には余裕だぜ...３秒で見つけ出してやる。

こいや！！！！

すみませんでした

い、いない...？！クソッ、どこに...
グッ...指がもげる...

（ラスト４箱目で発見）

赤文字に完全に煽られてしまった。
覚えてろよ！！！！

フロントエンジニアをなめるな

ここまで苔にされるのは久しぶりだ。このままじゃ引き下がれない。

要は箱を全部開ければいいんだろ？
やってやるさ。

ソースコード偵察

ふーん？

(↓/assets/js/notfound.jsから抜粋)

ほーん？（めっちゃコメントついてて読みやすいやんけ...）
わかった。つまり、これをこうして...
for(var i=1; i<=30; i++) {
    const className = `.box-game-item-${('00'+i).slice(-2)}>a`;
    $(className).eq(0).removeClass("disabled");
    $(className).eq(0).click();
}
こうじゃ

復讐の時

歯ァ食いしばれ！！！

オラァ！！！

おわり

（クロネコヤマトさんへ：純粋に楽しいゲームでした。ありがとうございました）

　 Tweet
Qiitaで続きを読む

投稿日：2021-03-03T00:16:51+09:00

超初心者向けざっくり学ぶWebフロントエンド入門 ~前編~

はじめに~これを書いた目的~

大学の後輩でwebプログラミングについて興味のある方が多かったので身内で簡単なwebの勉強会を開いたが、そのまとめ・補足用の資料を作りたかったため。

対象読者

プログラミング・Webデザイン初心者。Web制作の大枠を知りたい方向け。
それぞれの内容について深堀りするような記事ではないので、詳しく知りたい方は参考にならないかも。

後、HTML,CSSがほとんどなのでwebデザインの内容が比重高いです。
また、極力専門的な用語を省いて書くようにしています。

環境構築

HTML,CSS,JSは環境構築をする必要がありません。ブラウザとテキストエディタさえあれば十分なので、お好きなテキストエディタとブラウザを使用してください。ブラウザはGoogleChrome推奨です。テキストエディタに関して、私はVisualStudioCodeを使っています。

vscodeのダウンロードページへのリンク
https://azure.microsoft.com/ja-jp/products/visual-studio-code/

HTML・CSSとは？

HTMLはHyperText Markup Languageの略。すごいざっくり説明すると、webページの骨組みを作る言語。厳密にはプログラミング言語ではない。

CSSはCascading Style Sheetsの略。こちらは、HTMLで作った骨組みに装飾をするための言語。こちらも同じくプログラミング言語ではない。

JS(JavaScript)とは？

プログラミング言語の1つ。ブラウザ上で動かすことができる。webサイトのページをプログラム上から書き換える、イベント処理(クリックしたら〇〇を表示)、webサイトに複雑なアニメーションをつけるなどが可能。

HTML・CSS入門

文字だけのシンプルなサイト

文字だけが表示されているシンプルなwebサイト。ブラウザでファイルを開くと、「hello」とだけ表示される。
HTMLは<p>などのタグと呼ばれるもので文を囲んでいくことでwebページの骨組みを作る。
見出しや本文などwebページの内容は基本的に<body>と</body>の間に書く。ちなみに、pタグ（<p></p>）はparagraph(段落)の略。
<!DOCTYPE html>
<html lang="ja"> 
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>文字だけです</title>
</head>
<body>
  <p>hello</p>

</body>
</html>
装飾したサイト(シンプル)

HTMLに装飾をしたい場合、CSSを書く必要があると言ったが、CSSはHTMLファイルに直接書かず、別途ファイルを作りそれを読み込んでHTMLにCSSを適用するケースが多い。
sample1_00.html
<!DOCTYPE html>
<html lang="ja"> 
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>cssを読み込んでwebサイトを装飾する</title>
  <link rel="stylesheet" href="./css/style.css">
</head>
<body>
  <p>hello</p> 
</body>
</html>
style.css
/*pタグの文字色を青色に変えて、フォントサイズを20pxにする*/

p {
  color: blue;
  font-size: 20px;
}
<link rel="stylesheet" href="./css/style.css">は、ルートディレクトリ(1番上の階層のこと)のcssというフォルダのstyle.cssというスタイルシートを読み込むよという意味。タグの種類には、一番大きな見出しを表すh1タグ、要素をグループ化するdivタグなど他にも多数あるので必要に応じて是非自分で調べてみて欲しい。「HTML タグ　種類」などで調べてると出てくるかも。

cssでは基本的に、
cssを適用させたい場所{
どういう装飾をするか:色やサイズなどの細かいプロパティ;
}

という書き方をする。今回は、pタグに対して色を青に変えて、フォントサイズを20pxに変えたかったので上記のようになった。

別ページのリンクを貼るには

aタグにリンク先のURLを指定してあげることでwebサイトのリンクを貼ることができる。
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/style.css">
</head>
<body>
<a href="https://qiita.com/helloworld193/items/9aed3870be1e739c3ad2">過去に書いた別の記事。みてくれると嬉しいです。</a>
</body>
</html>
画像を表示させたい場合

画像を表示したい場合、imgタグを使う。cssファイル同様、表示させたい画像のパス(ファイルの置き場所)を書く。
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/style.css">
</head>
<body>
<img src="./img/sample.jpg" alt="">
</body>
</html>
cssを適用させる場所を細かく指定したい場合

前述の内容でcssの読み込み方や装飾方法を学んだ。しかし、このままだとある問題が発生する。

pタグやh1タグを直接指定した場合、ファイル内の全てのpタグもしくはh1タグにスタイルが適用されてしまうという問題だ。

じゃあ、どうするか。

独自に名前を付けて、スタイルを適用する場所でその名前を指定してあげればいい。そうすれば、〇〇という名前がついたpタグ、h1タグというように細かく指定できる。それを可能にするのが、id属性とclass属性だ。

class属性
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>class属性</title>
  <link rel="stylesheet" href="./css/style.css">
</head>
<body>
  <p class="give_class">class属性がついています</p>
</body>
</html>
style.css
.give_class{
  color: rgb(29, 117, 88);
  font-size: 20px;
}
id属性
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/style.css">
</head>
<body>
    <p id="give_id">id属性が付与されてます</p>
</body>
</html>
style.css
#give_id{
  font-size: 40px;
  color: rgb(255, 189, 109);
}
簡単にまとめると、idをcssで指定する場合は#id名、classを指定する場合は、.class名で指定してあげる。

idとclassの違い

ここで勘の鋭い方もそうではない方も1つ疑問に思ったかもしれない。
「名前をつけるためにidとclassの2つあるのはなぜ？　もし、名前をつけるためならどちらか１つで十分なはず。にもかかわらず2つあるのには何か理由があるのでは？」と。

実は、idとclassにはいくつか違いがあり、以下のようになっている。

idは同じwebページ内で何度も同じ名前(id名)を使うことができないのに対し、classは同じ名前(class名)を複数使用することができる。学生っぽく例えると、classは学科名でidは学籍番号みたいなイメージ。同じ学科の人はたくさんいるが、同じ学籍番号の人は存在しないはず。

cssが適用される優先順位はidの方が上
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/style.css">
</head>
<body>
    <p id="give_id" class="give_class">id属性につけたスタイルが優先されます</p>
</body>
</html>
style.css
#give_id {
    font-size: 40px;
    color: rgb(144, 202, 120); /* 緑 */
}

.give_class {
    font-size: 40px;
    color: rgb(123, 41, 255);  /* 赤 */
} 
idを使うとページ内リンク(同ページの特定箇所に移動できる)を貼ることができる
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/style.css">
</head>
<body>
    <p id="give_id">ここですここここここここ</p>
    <br>
    <p>テキスト</p>
    <p>テキスト</p>
    <br>
    <p>テキスト</p>
    <p>テキスト</p>
    <br>
    <p>テキスト</p>
    <p>テキスト</p>
    <br>
    <p>テキスト</p>
    <p>テキスト</p>
    <br>
    <p>テキスト</p>
    <p>テキスト</p>
    <br>
    <p>テキスト</p>
    <p>テキスト</p>
    <p><a href="#give_id">ここをクリックすると、give_idのidがついた箇所に移動する</a></p>

</body>
</html>
style.css
#give_id {
    font-size: 20px;
    color: rgb(144, 202, 120);
}

.give_class {
    font-size: 20px;
    color: rgb(123, 41, 255);
}
余白を設定したい場合

cssで余白を設定したい場合、paddingもしくはmarginを使って余白の指定をする。

簡単に説明すると、paddingは境界線の内側の余白、marginは外側の余白だ。
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/style.css">
</head>
<body>
<p class="content">要素</p>
<p class="content">要素</p>
<p class="content">要素</p>
</body>
</html>
style.css
.content{
    padding: 20px;
    margin: 10px;
    background-color: rgb(255, 194, 115);
    border: 2px solid#696969;
}
この場合、要素の境界線の外側に10px、内側に20px余白を入れている。

JS入門

HelloWorld!してみる

プログラミング初心者が必ず通る道と言われてるHelloWorldプログラムを作ってみる。
HelloWorldを知らない人がほとんどだと信じて軽く説明しておくと、「HelloWorld」という文字を表示するだけ。
余談だが、僕のアカウント名の由来もこれだったりする。当時、名前から全力で初心者感を出そうと思ってたらこれに行き着いたっていう。

JSを書く方法は主に2通り。

HTML内のscriptタグの中に直接書く方法

別ファイルで分けてそれをscriptタグを使って読み込む方法

HTML内のscriptタグの中に直接書く場合
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        console.log("HelloWorld")
    </script>
</body>

</html>
ブラウザで確認してみると、何も表示されていない。

これは上手く言ってないのではと思うかもしれないが、実はJSを実行することができている。

まず、ブラウザにはデベロッパーツールと言うものがあり、それを使ってページの動作のチェックなどができるのだが、キーボードのF12を押すと出てくるので確認してみよう。

すると、その中にConsole(画像の赤線で囲まれた箇所)という名前の箇所があると思うので、それをクリック

すると、Consoleの部分にHelloWorldと表示されているのがわかる。

ちなみに、気になった人もいるかもしれないので補足しておくと、scriptタグをbodyタグの最後に書くとwebページの表示速度が速くなるので、scriptタグはbodyタグの最後に書くことを推奨する。

別ファイルで分けてそれを読み込む場合
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>別ファイルで分けてそれを読み込む場合</title>
</head>
<body>
    <script src="./HelloWorld.js"></script>
</body>
</html>
HelloWorld.js
console.log("HelloWorld");
変数

変数とは、ざっくり言うと値につけるラベルのようなもの。

余談だが、変数は箱で例える派とラベルorタグで例える派がいるので、人によって若干説明は変わるかもしれない。でも、書いてたら自然とイメージできてくるのでとりあえずアウトプットすることを意識してほしい。

変数に数値を代入するとき
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

</body>
    <script>
        let password = 1234;  //変数の定義
        console.log(password);
    </script>
</html>
実行結果

このプログラムの場合、passwordという名の変数を定義していて、それに1234という数値を入れてConsoleに表示している。

では、数値ではなく文字になった場合はどうなるだろうか。

変数に文字（列)を代入するとき
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

</body>
    <script>
        let username = "SatoTaro";
        console.log(username);
    </script>
</html>
上記のプログラムでは、SatoTaroという文字列をConsoleに表示している。
変数に文字列を代入する場合は、代入するときに""で囲んで使う。ちなみに、数値を""で囲んだ場合も文字列扱いになる。

文字列の連結
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

</body>
    <script>
        let username = "SatoTaro";
        console.log("あなたのユーザー名は"+username+"です");
    </script>
</html>
文字列を連結させたい場合は、+記号を使って連結させる。

計算

演算子と言われるものを知っていれば、電卓みたいに計算できる。(Excel触ったことある人は理解しやすいかも)
indnex.html
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>計算</title>
</head>
<body>
    <script>
        console.log(1 + 1); //和
        console.log(5 - 3); //差
        console.log(2 * 3); //積
        console.log(6 / 3); //商
        console.log(7 % 3); //余剰
    </script>
</body>
</html>
条件分岐(if, else文)

これまでConsoleに文字を表示する方法、変数を使う方法を学んできた。でも、これだと毎回ほぼ同じ内容の処理しか書けない。じゃあ、皆さんならどうしたい？

そう、もし〇〇なら□□をさせるみたいな感じのことができると便利だと思っただろう。
それを可能にさせるのがif文、else文と言われるものだ。
長々説明を聞くのも疲れると思うので、早速書いていこう。
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        let age = 18
        if (age >= 18){
            console.log("高校卒業おめでとう!!ヾ(_ _)〃 ヾ(≧ー≦)ゞ ヾ(_ _)〃イェーイ");
        }
        else {
            console.log("残りの高校生活青春しようぜ！！");
        }      
    </script>
</body>
</html>
このプログラムでは、ageが18以上なら「高校卒業おめでとう(以下略)」、それ以外(つまり18より下)なら「残りの高校生活青春しようぜ！！」と表示されるようになっている。是非自分でコードを書き換えて試してみて欲しい。

age が18以上の時

そうではないとき

簡単にまとめると、if文は特定の条件を満たしたなら処理を実行したい場合、else文はif文で書いた条件を満たさなかったら処理を実行したい時に使う。

ちなみに、不等号は <　と >　を使って表し、等号つき不等号は >= 、 <= の様に書く。
等号は、= ではなく ==または、===を使う。

繰り返し(for文)

唐突だが、HelloWorldという文字を3回表示させたかったら、あなたならどう書く？
2回コピペしてコードを書き足す方法もあるかもしれない。
でも、もしこれが10000回になったら?
10000回近くコピペを繰り返すのは正直めんどくさい。だからといって、コピペ専門のアルバイトを雇うのはもっとめんどくさい。
そんな時に、繰り返し(for文)を使う。
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>繰り返し</title>
</head>
<body>
    <script>
        for (i = 0; i < 4; i++){
            console.log(i + ":HelloWorld")
        }
    </script>
</body>
</html>
このプログラムでは、iの値:HelloWorldという文字列を4回表示させている。
for文では「これは何回目の繰り返しなのか?」を数えるための変数が必要である。
なので、()の中に初期化式、条件式、加算式というものを書く。

初期化式は変数の値を何からスタートさせるかを書くもの。慣例で0を書くことが多いのでそっちで統一した方が楽。
条件式は、繰り返す条件を書くもの。今回はiが4より小さいなら繰り返すという条件。

さて、初期化式と条件式について話したが、この2つだけだとある問題が発生する。
それは、iの値が増えないのでループが永遠に終わらないという問題だ。
これを解決するためには、iの値をループを繰り返す度に変更してやる必要がある。
それが加算式と呼ばれるものだ。今回の場合、iに1を足すという処理をしている。

最後に、繰り返し処理にはwhile文と呼ばれるものを使う方法もある。今回は、内容簡略化のため説明を省くが必要に応じて使い分けが必要な文法なので、是非各自で調べてみて欲しい。

関数

プログラムを書く際、似たような処理が何度も必要になる場面があるかもしれない。そのような時、関数を作れば独自で機能を追加してプログラムを使い回すことができる。
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>関数</title>
</head>
<body>
    <script>
        function average(A,B,C){
            let average = (A + B + C) / 3;
            return average;
        }
        console.log("平均は" + average(3,4,8));
        console.log("平均は" + average(6,4,8));
        console.log("平均は" + average(3,10,8));
    </script>
</body>
</html>
関数を作るときは、function 関数名(引数){処理}という書き方をする。また、関数を使うときは関数名(引数);と書く。
引数とは、関数に渡す値のこと。今回は、受け取った3つの値の平均を求め、averageという変数に代入している。そして、return文を使って、その値を返すというのが今回作った関数だ。
少し説明が分かりにくかったと思うので、キャッチボールで例えよう。自分が相手にボールを投げた時が引数を渡した時、そして、受け取ったボールを返す時がその値を関数内で処理をして返す時だ。

HMTLをJSで操作してみる

ここから先が僕が書きたかった内容。ここまでConsole上で文字や数字を表示してきたが、ついにJSからHMTLを操作してみる。

要素を取得
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>要素を取得</title>
    <div id="text">
        <p>TextTextText</p>
    </div>
</head>
<body>
    <script>
        let el = document.getElementById("text"); //#textのHTML要素を取得
        console.log(el);
    </script>
</body>
</html>
JSでHTMLを操作したい場合、まず特定のidが入った要素を取得するという処理を行う。
その場合、getElementByIdを使えば、要素を取得することができる。

今回のプログラムを簡単に解説すると、getElementByIdで取得したtextというidの要素をelという変数に代入している。そして、それをConsole上に表示した。

使い方
document.getElementById("id名");
指定した要素の中の末尾に挿入
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>指定した要素の中の末尾に挿入</title>
</head>
<body>
    <div id="text">
        <p>TextTextText</p>
    </div>

    <script>
        let el = document.getElementById("text"); //#textのHTML要素を取得し
        let new_el = document.createElement('p');
        new_el.textContent = "New Text";
        el.appendChild(new_el);
    </script>
</body>
</html>
このコードをブラウザで開くと、divタグ内のpタグの文字に加えて、New Textという文字が追加で表示されているはずだ。

createElementを使うと、HTML内に要素(タグ)を追加することができる。
しかし、creteElementだけではプログラムとして不十分だ。
なぜなら、creteElementは新しく要素を生成するだけであってそれにテキストを生成するまではできないからである。

そこで、textContentを使う。
これを使うことで、生成した要素内にテキストを生成することができる。
そして、pタグ内にNew Textという文を生成したが、このままではこの要素をどこに挿入するかが決まらない。
そこで、appendChildを使う。これによって、どこに挿入するのかが決まる。
ちなみに、appendChildは親要素の最後だ。他にも、insertBeforeなどで要素の挿入場所を決めることができる。

少し応用編

繰り返し処理の話で、HTML内に同じテキストを大量に追加したいときを例として出していたので、実際にやってみたいと思う。
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>少し応用</title>
</head>
<body>
    <div id="text">
        <p>TextTextText</p>
    </div>

    <script>
        let el = document.getElementById("text"); //#textのHTML要素を取得してConsoleに表示
        for(i = 0; i < 100; i++){
        let new_el = document.createElement('p'); //pタグを生成
        new_el.textContent = "New Text"; //pタグ内にテキストを追加
        el.appendChild(new_el); //#textの末尾に挿入
        }
    </script>
</body>
</html>
表示の関係で全て表示されていないが、このプログラムではNew Textという文字を100回生成させている。
このように、JSで少しHTMLを操作できるだけで自分でコピペ作業をしたり、コピペ専用のバイトを雇う必要がなくなるのでかなり便利だ。

イベント処理

例えば、ボタンを押したらテキストを追加したり、アニメーションを追加するなど何かしらイベントを発生させたい時どうすればいいと思う？

そんな時に、いくつかイベント処理をさせる方法がある。
今回は、その一例としてクリックした時の処理を書いていく。
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>イベント処理</title>
</head>
<body>
    <button id="btn">クリック</button>
    <div id="text">
    </div>

    <script>
        let el = document.getElementById("text"); //#textのHTML要素を取得
        let btn = document.getElementById("btn"); //#btnのHTML要素を取得

        //btnがクリックされたらこの関数を実行
        btn.onclick = function() {
        let new_el = document.createElement('p');
        new_el.textContent = "ボタンを押したらテキストが増える";
        el.appendChild(new_el);
        };
    </script>
</body>
</html>
onclickを使うと、クリックされた時に行う処理を書くことができる。今回は、ボタンを押す度にテキストが増えるプログラムを書いた。もう少し補足すると、btnというidの要素がクリックされた時に、textというidの要素に対して<p>ボタンを押したらテキストが増える</p>という要素が追加されるという処理だ。

最後に

自分でも気が遠くなるくらいの分量なのに最後まで読んでくれた方ありがとうございました。

今回は、基礎の基礎の部分を知って欲しかったので、HTML・CSSから始めてJSの基本的な文法を少し紹介して終わってしまいました。なので、次回はアニメーションやもう少し応用的な内容に入りたいと思っています。また、今回の内容で触ることができなかったのでフレームワークと言われるものにも少しだけ触れてみる予定です。

最後に、訂正・質問もしくはこんな内容入れて欲しいなどあればコメント欄か、僕のTwitterの方にコメントくれると嬉しいです

　 Tweet
Qiitaで続きを読む