読者です 読者をやめる 読者になる 読者になる

やるしかなっちゃん

やるしかない!

JavaScriptの型判定

JavaScript

typeof

typeofは色々と使いにくいです
特にnew Hoge()したものは'object'になってしまいます

// 正しく判定できるパターン
typeof 1         // 'number'
typeof '1'       // 'string'
typeof true      // 'boolean'
typeof undefined // 'undefined'

// 'object'になってしまうパターン
typeof null            // 'object'
typeof []              // 'object'
typeof new String('1') // 'object'
typeof new Date()      // 'object'

Object.prototype.toString()

typeofが使いにくいのならばどうすれば?と思うかもしれませんが実は素晴らしいメソッドがあるのです
Object.prototype.toString() - JavaScript | MDN
MDNにも記載されている様にオブジェクトクラスの検出にObject.prototype.toString()を使うということができます

Object.prototype.toString.call(1)               // '[object Number]'
Object.prototype.toString.call(null)            // '[object Null]'
Object.prototype.toString.call(undefined)       // '[object Undefined]'
Object.prototype.toString.call([])              // '[object Array]'
Object.prototype.toString.call(new String('1')) // '[object String]'
Object.prototype.toString.call(new Date())      // '[object Date]'

まとめ

以上より型判定を行い時はObject.prototype.toString()を使いましょう
ちなみに↓のようにsliceをしておけば型名だけを取り出せます

Object.prototype.toString.call(1).slice(8, -1) // 'Number'

ここまで書いておいてなんですが、少し不安になったので幾つか調べてみましたがやはり出来る人たちはもう少し丁寧にやってますね
便利関数として自作する場合は↓を参考にして下さい
JavaScriptでオブジェクトの型を判別するのにtypeof演算子使うとツラいよね - Qiita
jQueryはどうやって型判定してるのか - Qiita]

おまけ(NaNの判定)

NaN判定もやりたい時ってありますよね
Object.prototype.toString.call(NaN).slice(8, -1)は実は'Number'になります
なのでisNaNを使うしかないのですが、トップレベルのisNaN関数はあまり厳密ではないです

isNaN(NaN)       // true
isNaN(undefined) // true
isNaN("hoge")    // true

一番最後の例は文字列から数値への変換が失敗してNaNになってしまっています
文字列は数値ではないので(Not a Numberなので)正しいのでは?とも思いますが求めているものとは少し違いますよね
これを回避するためにはNumber.isNaNを使いましょう
Number.isNaNは純粋にNaNであるかどうかを判定できます

Number.isNaN(NaN)       // true
Number.isNaN(undefined) // false
Number.isNaN("hoge")    // false

Pythonの割り算で結果を小数で得る方法

Python

以下のようにやってもダメだった

>>> float(10 / 3)
3.0

割る方か割られる方をfloatにするのが正解だった😭

>>> 10 / float(3)
3.3333333333333335

ビットの多数決

アルゴリズム Python ビット操作

当たり前だけどif文は使わないよ

x y z output
0 0 0 0
0 0 1 0
0 1 0 0
0 1 1 1
1 0 0 0
1 0 1 1
1 1 0 1
1 1 1 1
def majority(x, y, z):
    return (x & y) | (y & z) | (x & z)

a and bが1になるのは両方とも1の時なのでa and b が1になった時点で1が多いので最後にorを取ってしまえばいい

ほんとは入力がn(nは奇数)個の関数を書きたかったんだけどねむみが凄いのでまたいつか追記する

Java/Pythonの同値性/同一性比較

Java Python

この2つの言語の同値性と同一性の違い

Java

Javaの同一性比較は==

"hoge" == "hoge" // -> false(この程度だと多分trueになるけど...)

Javaの同値性比較はequals

"hoge".equals("hoge") // -> true

Python

Pythonの同一性比較はis

"hoge" is "hoge" // -> false(この程度だと多分trueになるけど...)

Pythonの同値性比較は==

"hoge" == "hoge" // -> true

JavaPythonの違い

==の意味が逆になってる
僕はJava脳なのでいつもPythonを書いていると一回Javaで考えてから逆に考えないといけなくなるので非常に苦痛

nullチェックは?

Javaのnullチェック

obj == null

Pythonのnull(Noneだけど)チェック

obj is None

同一性が異なるので当然こうなる

まとめ

😩

ライブラリを使わない生のJavaScriptだけで作るドロワーメニュー

css JavaScript コーディング html

めちゃくちゃシンプルなやつだけど作った
最早jQueryさえも使わない縛り
jsfiddle.net

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" type="text/css" href="index.css" />
  <script type="text/javascript" src="index.js"></script>
</head>

<body>
  <header class="header">
    <div id="open-btn" class="open-btn show" onclick="openMenu();"><span></span></div>
    <div id="close-btn" class="close-btn hide" onclick="closeMenu();"><span></span></div>
  </header>

  <div class="wrapper">
    <div id="content" class="content">
    </div>
    <div class="menu back">
    </div>
  </div>

</body>
</html>
body {
  margin: 0;
}

.header {
  width: 100%;
  height: 50px;
  border-bottom: 1px solid black;
  position: relative;
}

.header .open-btn {
  font-size: 30px;
  position: absolute;
  top: 0;
  right: 10px;
}

.header .close-btn {
  font-size: 30px;
  position: absolute;
  top: 0;
  right: 10px;
}
// ↑ ここまでは見た目整える用の関係ないCSS

// ↓ ここから必要なCSS
.show {
  display: block;
}
.hide {
  display: none;
}

.back {
  z-index: -999
}

.wrapper {
  position: relative;
  width: 100%;
  height: 900px;
}

.wrapper .content {
  width: 100%;
  height: 100%;
  background: blue;
  position: absolute;
  top: 0%;
  right: 0%;
}

.wrapper .menu {
  width: 30%;
  height: 100%;
  background: red;
  position: absolute;
  top: 0%;
  right: 0%;
}
function openMenu() {
  // メニューボタンの切り替え
  var openBtn = document.getElementById("open-btn");
  var closeBtn = document.getElementById("close-btn");
  openBtn.classList.remove('show');
  openBtn.classList.add('hide');
  closeBtn.classList.remove('hide');
  closeBtn.classList.add('show');

  // メニュー開く
  var content = document.getElementById("content");
  var position = 0;
  var timerId = setInterval(function() {
    if (position == 30) clearInterval(timerId);
    content.style.right = position++ + '%';
  }, 10);

}

function closeMenu() {
  // メニューボタンの切り替え
  var openBtn = document.getElementById("open-btn");
  var closeBtn = document.getElementById("close-btn");
  openBtn.classList.remove('hide');
  openBtn.classList.add('show');
  closeBtn.classList.remove('show');
  closeBtn.classList.add('hide');

  // メニュー閉じる
  var content = document.getElementById("content");
  var position = 30;
  var timerId = setInterval(function() {
    if (position == 0) clearInterval(timerId);
    content.style.right = position-- + '%';
  }, 10);
}

開く/閉じるボタンはただclassの付け替えで表示<->非表示の切り替えをしているだけ。
肝心のコンテンツエリアとメニューエリアは初期表示時はメニューエリアのz-indexに負の値を指定しておき裏側に忍ばせておく(.back)。
コンテンツエリアは絶対位置で配置しておいて、開くボタンを押したらsetIntervalを利用して一定間隔で少しずつ左にずらしていく(rightプロパティの値を一定値ずつ加算していく)というだけのシンプルな作り。
閉じるボタンはその逆の操作を行えばよいだけ。

コーディングTIPS集

html css JavaScript jQuery less コーディング

1. 画像の縦横比維持

CSSで画像の縦横比を維持したまま縮小する方法 - やるしかなっちゃん

2. 文字数カウントフォーム

jQuery: inputやtextareaの文字数カウントの方法 - やるしかなっちゃん

3. ドロワーメニュー

ライブラリを使わない生のJavaScriptだけで作るドロワーメニュー - やるしかなっちゃん

PHPの対話環境(REPL)の起動の仕方

PHP

凡人は下のようにコマンドを打てば起動すると考えてしまう

$php

でも本当は下が正解なのである

$php -a
Interactive shell

php > 

これがわかれば全てOKと言っても良いだろう