2020-07-19 学習記録

やったこと

• JavaScript30 18 - Adding Up Times with Reduce
• Linux標準教科書 1章〜３章

JavaScript30 18 - Adding Up Times with Reduce

Reduceを使って各要素のデータ属性に入っている値(時間)の合計を求めた。

// data-timeを持つ要素を全て取得
const timeNodes = Array.from(document.querySelectorAll('[data-time]'));

クラスやIDで指定する時と同じでシンプルなんだけど、データ属性でちょっと怯んだ。
[]で囲めば良いのを忘れないようにしないと。

// 1.データ属性(data-time)の値を取り出す
// 2.分と秒を:で区切ってわけ、文字列を数値に変換する
// 3.ビデオの長さを秒単位で取得する
// 4.取得した全てのビデオの秒数を足し合わせる
const seconds = timeNodes
  .map(node => node.dataset.time)
  .map(timeCode => {
    const [mins, secs] = timeCode.split(':').map(parseFloat);
    return (mins * 60) + secs;
  })
  .reduce((total, seconds) => total + seconds);

reduceが初期値なしでも動くことを知った。MDNで要復習！
Array.prototype.reduce() - JavaScript | MDN
mapにmap重ねて望んだ形で値を取り出し、reduceで合算しているの、
一つ一つのメソッドは知ってても、こういう使い方を自力で思いつかなかった。
欲しい値が決まってる時にどういう処理するか順序立てて考えられればいける？

あとは秒単位で求められている値を時間、分、秒にするだけ！

let secondsLeft = seconds; // reduceで求めた総時間(秒)
const hours = Math.floor(secondsLeft / 3600); // 時間を求める
secondsLeft = secondsLeft % 3600;

const mins = Math.floor(secondsLeft / 60); // 分を求める
secondsLeft = secondsLeft % 60;  //残りの数は秒になる

// 時間、分、秒で出力
console.log(hours, mins, secondsLeft);

調べたこと

• Element.data.key・・・data属性のkey名の値を取り出す
• parseFloat・・・文字列を数値に変換する

Linux標準教科書 第1章 Linuxとは

基本ソフトウェアと応用ソフトウェアについてとLinux誕生の歴史、
Linuxの基本ソフトウェアを構成するカーネルとユーザランドについて学んだ。

Linux標準教科書 第2章 Linuxのインストール

Linuxの導入方法。今自分はAWS EC2でクラウド上にCentOS環境があるため割愛。
いつか置き物状態のWinデスクトップちゃんに入れてみようかな。。。

Linux標準教科書 第3章 基本的なコマンド

ターミナル操作のためのコマンドいろいろ。
コマンド自体はなんとなく知っていてもオプションやワイルドカードというものをあまりわかってなかった。

ファイル操作

• ls [オプション] [ファイル名]
  ディレクトリの中身の一覧を取得できる。
  

  -a 隠しファイルも含めて出力
  -l 長い形式で出力
  -t 最終更新時間でソートして出力
  -r 逆順でソートして出力
  まとめて指定したり、同時に指定したりすることができる
  ls -l -a
  ls -la

  ワイルドカード(*, ?)

  ls *.jpg // jpgファイルを絞り込んで表示
  ls ????.jpg // ファイル名部分が４文字のjpgfファイルを絞り込んで表示

• cp [オプション] コピー元 コピー先 ファイルやディレクトリを複製することができる。

  -i // 処理を行う時に確認される
  -r // ディレクトリをコピーする時に使用
  -p // 作成者や更新履歴など過去の情報も含めてコピーする

• mv 移動元ファイル 移動先ファイル ファイルを移動することができる。
  移動先ファイルが存在しない場合はファイル名の変更コマンドとして使える

  -i // 処理を行う時に確認される
  -f // 強制的に処理を実行する

• rm ファイル名
  ファイルを削除する。

  -i // 処理を行う時に確認される
  -f // 強制的に処理を実行する
  -r // ディレクトリを削除する時に使用

  ディレクトリ操作

• pwd
  現在のディレクトリを表示(Print Working Directoryの略)
• cd [ディレクトリ名]
  ディレクトリを移動する。指定がない時は歩＝無ディレクトリに移動する。

• mkdir [ディレクトリ名]
  ディレクトリを作成できる。

  -p // 指定されたディレクトリの上位ディレクトリも作成する
  mkdir -p dir1/dir2/dir3
  // -pなしだと上位ディレクトリから順番に作らないといけない
  mkdir dir1
  mkdir dir1/dir2
  mkdir dir1/dir2/dir3

• rmdir [ディレクトリ名]
  中身が空のディレクトリを削除できる。

  -p // 指定したディレクトリまでのディレクトリを一括で削除する
  rmdir -p dir1/dir2/dir3

  中身があるディレクトリを削除する際はrm -rを使う！

• 絶対パスと相対パス
• 絶対パス・・・最上位のディレクトリから指定する

• 相対パス・・・自分がいる位置から指定する

  .. // 一つ上の階層

  ファイル内容の表示

• cat ファイル名
  ファイルの中身を確認する

  -n // 行番号を付加して表示

• ページャー
  たくさんの行があっても画面制御を行いスクロールを途中で止めるコマンド

  more ファイル名
  less ファイル名

  ファイルの検索

• find パス -name ファイル名
  ファイルがどこのディレクトリ に存在するか検索できる。

コマンドのパス

• which コマンド名
  コマンドのパスを表示する

  コマンドのヘルプ

• コマンド —help
  コマンドのオプションを調べることができる。

  マニュアルの使い方

• man コマンド名

  -k 単語 // 単語が含まれるエントリ一覧を出力

  気づきなど

• JSは読めるけど書けないみたいな感じになっている気がする。写経ではなく0の状態でやりたい処理を書く練習が必要。paizaとかの問題を解こう。
• ページャーを使ったことない気がする。ファイルの中身をコマンドで見るという機会がなかったので。。。大きいファイルを見る時に活躍してくれるかな。
• コマンドをブログにまとめ始めたらノート綺麗に描いて満足する感じのマインドになってしまった。自分用に見返せるのは良いことだけど、ほどほどにする。何よりも使って覚える方が大事！