大学生からの Web 開発

会社の人に見つかってぽよぽよしてきた

JavaScript で小数点を切り捨てたいときはどうするか

  • 仕事のコード読んでたら parseInt(foo / bar) ってのが出てきた
    • WebStorm が「あかんで」って教えてくれた
  • やりたいこととしては「小数点の切り捨て」
  • parseInt() - JavaScript | MDN

parseInt()関数は、第1引数の文字列を解析(パース)し、第2引数に与えられた基数(数学的記数法の底)にもとづく整数を返します。 第一引数は文字列

  • まあキャストされるから動くけど良くない
  • parseInt の挙動

Math.floor でええやん(?)

  • よくない
  • Math.floor では、負の数のとき parseInt とは戻り値が異なる

どうするか

  • ES2015 では Math.trunc() - JavaScript | MDN という関数がある

    Math.trunc() 関数は、引数として与えた数の小数部の桁を取り除くことによって整数部を返します。

  • ただし IE はサポートしていない!!!!!!!
    • IE であっても、 parseInt という名前の関数に突っ込むのはよくない
  • 素朴に以下のような関数を定義しよう
  function truncateDecimal(n) {
     if (n >= 0) {
        return Math.floor(n)
     } else {
        return Math.ceil(n)
     }
  }

  • Math.trunc のポリフィル使ったほうがいいな
// Math.trunc() - JavaScript | MDN https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Math/trunc

Math.trunc = Math.trunc || function(x) {
  return x < 0 ? Math.ceil(x) : Math.floor(x);
}

参考

function の文・式、そして即時関数について調べた

こんなコードが会社 Slack にポッと投稿されたのだけど分からないことがあった

!function() {
  window.dribble = 0;
  var elem = document.querySelector("body > div.new_identity > ul > li:nth-child(2) > a > div");
  elem.addEventListener('mouseover', function() {
    window.dribble += 1;
    this.innerText = window.dribble;
  });
}()
  • これ即時関数なんだけど、先頭の ! はナニ???となった
  • :@furuk4wa: 僕の知ってる即時関数は (function () { console.log('hoge') })() だった

そもそも即時関数として実行するには

  • function () をつけるなどして呼び出す
    • 式な

JavaScript における の違い

文(Statement)を簡潔に述べると、処理を実行する1ステップが1つの文といえます。 JavaScriptでは、文の末尾にセミコロン(;)を置くことで文と文に区切りを付けます。

関数の

よって

  • 前述したコードの ! は 続く function を式とするためのものである
!function() {
window.dribble = 0;
var elem = document.querySelector("body > div.new_identity > ul > li:nth-child(2) > a > div");
elem.addEventListener('mouseover', function() {
  window.dribble += 1;
  this.innerText = window.dribble;
});
}()
!function(){}();
+function(){}();
-function(){}();
~function(){}();
(function(){}()); // Grouping Operator
0,function(){}();
a=function(){}();
[function(){}()]; // Array Literal
new function(){}; // 正確にはCallExpressionではなく、NewExpression だが
1+function(){}();
0|function(){}();
0&function(){}();
0||function(){}();
1&&function(){}();
++functtion(){}(); // 実行後エラーがでるけど
--functtion(){}(); // 実行後エラーがでるけど
void function(){}();
typeof function(){}();
delete function(){}();

アロー関数 ( Arrow function ) の場合

通常の関数式の場合、

(function () { / 関数本体 / }());

と書いても

(function () { / 関数本体 / })();

の様に書いてもどちらも即時実行されるのですが、アロー関数の場合は

(() => { / 関数本体 / })();

の様に記述しなければならないようです。

  • とのこと :@furuk4wa:

日曜

  • ぜったいに ブ 2049 観に行くつもりだったんだけどだるくて昼寝したら時間直前でいかなかった
  • 近所の映画館、毎月10日は 1100 円でぜったい行こうと思ったのにだるかった
  • ブ、 170 分って聞いたら腰重い
  • かわりにホームセンター充した
  • 家の風呂場、棚的なモノがなくてシャンプーボトルとか地べた的なとこに置いてる
  • 暮らしにおける見た目の丁寧さが低いので風呂場の雑貨をおけるのを欲しくなってホームセンターに行った
  • うちの風呂場、浴槽とシャワーとタオル掛けがあるのみです

f:id:karur4n:20171211180826j:plain

  • 「シャンプーボトル 置き場」で検索して
  • フックを買って
  • これみたいにした

f:id:karur4n:20171211180839j:plain

  • 日記っすわ

※ 会社の Qiita:Team に書いたやつ