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

やるしかなっちゃん

やるしかない!

PHPのstr_replaceは配列が使えて滅茶苦茶便利だった

PHP初心者だから知らなかった

// str_replace ( 探したい値(ここに配列が使える), 置き換える値(ここにも使える) , 対象文字列)
$search = array("h", "o", "g", e);
$replace = "(´・ω・`)";
$subject = "hello, world";
echo str_replace($search, $replace, $subject); 
// =>  (´・ω・`)(´・ω・`)ll(´・ω・`), w(´・ω・`)rld

$search配列の中の文字どれか一つにでも一致すれば置き換えることができる

lessのcalcに死ぬほどハマった件

題名の通りのlessのcalcにとんでもない落とし穴があって今日見事にハマってしまった。
どんな落とし穴かというと下のようなよくあるcalcを書くとする。

width: calc(100% - 90px);

これをCSSコンパイルすると下のようになる

width: calc(10%);

100% - 90%になっとる(;´Д`)(;´Д`)(;´Д`)

どうやらコレは有名な不具合らしくて既にみんな知っていることだったらしい
ひょっとしてしらないのは僕だけだったのだろうか?

解決策としては以下のようにエスケープすれば良い

width: calc(~"100% - 90px");

いや〜この世は不思議なことだらけですねぇ

jQuery: inputやtextareaの文字数カウントの方法

そりゃあ僕だって最新のフレームワークを使ってもっとスマートにやりたい
でも男にはjQueryでやらなければいけない時がある

最初にコードを載せる

これはHTML
<textarea id="textarea" cols="30" rows="10"></textarea>
<p id="text"></p>
<p id="length"></p>


ここからJavaScript
$(function() {
  $('#textarea').bind('keydown keyup keypress change', function() {
    var text   = $(this).val();
    var length = text.length
    $('#text').text(text);
    $('#length').text(length);
  });
});

jsfiddle.net

簡単だけどこれが意外に一から書き始めるとアレ?ってなる

一応自分用に解説するとtextareaとかの入力欄の要素にkeydownとかkeyupとかのイベントをバインドしてやればいい
値は$(this).val()で取れるので後はお好きなように

[WordPress] Wordpressでformを作成した時のname属性に果てしなくハマった

こんな時代だからformを作ることはよくあると思う
そうなれば↓のようなformができあがる

<form method="post">
  <input name="name" type="text">
  <input type="submit" value="送信">
</form>

この時PHPならばPOST処理として以下のようなコードを書くだろう

$name = $_POST['name'];
// $nameを使ってほげほげ

説明は不要だと思うがinputタグのname属性が"name"のものから値を取得しているだけだ

だが、WordPressだと上のコードは動かない 絶対に動かない
今日これにハマりまくったので断言できる

原因はなにかいうとこれだ

// wp-includes/class-wp.php
// ソースコードの一番最初の方にある
public $public_query_vars = array('m', 'p', 'posts', 'w', 'cat', 'withcomments', 'withoutcomments', 's', 'search', 'exact', 'sentence', 'calendar', 'page', 'paged', 'more', 'tb', 'pb', 'author', 'order', 'orderby', 'year', 'monthnum', 'day', 'hour', 'minute', 'second', 'name', 'category_name', 'tag', 'feed', 'author_name', 'static', 'pagename', 'page_id', 'error', 'attachment', 'attachment_id', 'subpost', 'subpost_id', 'preview', 'robots', 'taxonomy', 'term', 'cpage', 'post_type', 'embed' );

そう、WordPressのコアのソースコードに既にnameが取られてしまっている
これにより正しく動作しなかったのだ
なのでWordPressでformを作るときはこれに要注意だ!!!

[JavaScript]文字列がある文字を含むかどうかを調べる方法

これいつもわからなくなるのでまとめる

indexOf

indexOfを使うとある文字列がある文字(列)を含むかどうか調べられる

const str = "hoge"
str.indexOf('g') // 2
str.indexOf('og') // 1
str.indexOf('ou') // -1

特に説明不要がだindexOfの名前の通りその文字(列)のインデックスを返す
なので見つからなかったときは-1が返る
まぁこれは別にいいでしょう

ある文字列の中に幾つかの文字(列)が含まれるかどうか

この時indexOfしか知らないと以下のような産業廃棄物が生まれてしまう

const str = "hogefugapiyo"
// strの中にa, b, cのいずれかが含まれるかどうか
if (str.indexOf('a') != -1 
    || str.indexOf('b') != -1 
    || str.indexOf('c') != -1) {
  // ...
}

これは誰がどう考えても正規表現の出番だと考える
(ちょっと良い例が思い浮かばないのでこれでもいいわって思ったならすいません もっと複雑な例を頭の中で補完して下さい)  

正規表現

↑の例と同じことをやりたいなら以下の様なコードに鳴る

const str = "hogefugapiyo"
const pattern = /[abc]/
const result = str.match(pattern)
if (result != null) {
  // ...
}

で、何がいつもわからなくなるの?

indexOfは存在しなければ-1が返る
matchはマッチしなければnullが返る
普通に考えればわかるのだが知能指数の低い僕はいつもmatchを使っているのに-1チェックをしてしまう
長々と書いたけど言いたいことはそれだけ

[jQuery]要素の取得とクラスの付け方

2016年も終わりが近づいているが最近まで生JSでDOM操作をする機会があった 。

そしてついに今日jQueryを使ったDOM操作をするハメになったので備忘録として残しておく。

要素の取得の仕方

例えばid名で取得したい場合は以下のようにするだけ

$('id名')

document.getElementByIdなんていう長ったらしいものが必要ない簡潔さに涙がでますよ
まぁ内部ではgetElementByIdを使っているんだろうけど
(厳密には$('id名')[0]ってやらないとgetElementByIdと等価にならない)

当然だけどid名以外にも要素名/クラス名もいける
素晴らしい

クラスの付け外し

$('id名').addClass('クラス名')
$('id名').removeClass('クラス名')

属性の付け外し

$('id名').attr('属性名', 値)
$('id名').removeAttr('属性名')

まとめ

特に説明することもないので以上。

[Python]文字列の末尾からN文字消す方法

文字列のインデックスに負の値を用いれば簡単にできた

hoge = 'hoge++'
print(hoge[0:-2]) # 末尾2文字の'++'が消えて'hoge'と出力される
# hoge[:-2]でもいいよ

----以下メモ----
文字列のインデックスに負の値を指定すると末尾から数えてN文字目にアクセスできる

abc = 'abc'
print(abc[-1]) # 'c'
print(abc[-2]) # 'b'
print(abc[-3]) #  'a'

また、文字列のインデックスでのアクセスには以下のような記法もある(主にスライスするときに使うやつ)

文字列[開始位置:終了位置]  

なので開始位置を先頭(0)にして、終了位置に消したい位置までの負の値(-N)を指定すれば末尾N文字を消せる
ちなみに開始位置を省略すると開始位置の値は0(先頭), 終了位置を終了すると値はlen(文字列)(つまり末尾)になる