6W1H

仕組みをわかりたい

3項演算子について

こんにちは

目には青葉山ほとどぎす初鰹の季節となります.
お忙しいかと存じますが,日記をお書きになりますよう何卒よろしくお願いします.
TwitterやらFaceBookやらインターネット,多くの人の目に触れる方法では駄目です.
社会性フィルターとプライドフィルターで先ほどのような文になります.
備忘録というかそんな感じの意味でそういう日記みたいなのはつけてみるのが良いかもしれません.
何かがわからないとか,誰かがムカついた,ぶち*したいとか…デトックス効果みたいなのがあるかもしれません.
ネットに書いたりすると人格を疑われたりします.
あとこんなご時世なのであまり過激なことを書くと早朝にポリスメンが訪ねてくるかもしれません.知りませんが.
構わない人はネットでやればいいと思います.
ちなみに筆者は日記は書いていません.面倒くさいからです.

この記事について

筆者がTwitterを眺めてるとFizzBuzz問題をやっている人がいました.

FizzBuzz問題が何かはググればわかります.
すごく簡単な問題です.
筆者もなんとなくやりたくなってきてしまったので,やることにしました.
ですがやるからには,特にSNSなんかで晒すからには,普通のことをするのは楽しくないと思ったので,いろいろ考えてたら3項演算子でやったら面白そうだと閃きました.
更にいろいろ考えたら3項演算子に3項演算子を入れられるんじゃないかと閃いたので,書いてみたら本当に動いたのでこの記事を書きました.
皆さんにとっては当たり前のことだと思いますが,僕にとっては画期的というかそんな感じだったのでこの記事を書きました. なのでこの記事には簡単な3項演算子についてと3項演算子の入れ子について書いてあります.
それと筆者が書き慣れている言語がC++なのでこの記事はC++での3項演算子について書いてあります.

3項演算子

構文はこんな感じです.

<条件> ? (条件が真の時に返す値) : (条件が偽の時に返す値)

個人的な意見ですが,あんまり可読性がよろしくないのでまったく使ったことがありません.

2つの値を比べて大きい方を返すプログラムを書いてみます.

3項演算子を使わずに書いた場合

#include <iostream>

int max(int a, int b){
    if(a > b){
        return a;
    }else{
        return b;
    }
}

int main(){

    std::cout << max(10, 20) << std::endl;

    return 0;
}

3項演算子を使って書いた場合

#include <iostream>

int max(int a, int b){
    return (a > b) ? (a) : (b);

    // 括弧が無くても動きます.
    // return a > b ? a : b;
}

int main(){

    std::cout << max(10, 20) << std::endl;

    return 0;
}

3項演算子の入れ子

とりあえずコードを見てみてください. 3項演算子で解いたFizzBuzz問題です.

#include <iostream>
#include <string>

int main()
{
    for(int i = 1;i < 100;i++){
        std::cout << ((i%3 == 0)? ((i%5 == 0)? "FizzBuzz" : "Fizz") : ((i%5 == 0)? "Buzz" : std::to_string(i))) << std::endl;
    }

    return 0;
}

このコードはここで動かすことができます.
[Wandbox]三へ( へ՞ਊ ՞)へ ハッハッ

3項演算子を入れ子にするシーンが思いつかなかったのでこういう説明なってしまいました.
では,ちょっとずつ噛み砕きましょう.

まずは3の倍数かどうかを調べます.

    (i%3 == 0) ?

3の倍数であれば5の倍数かどうかを調べます.
3の倍数かつ5の倍数,つまりFizzBuzzであるかを調べます.
3の倍数かつ5の倍数であればFizzBuzzを返し,そうでなければFizzを返します.

    (i%3 == 0) ? ( (i%5 == 0) ? ("FizzBuzz") : ("Fizz") )

3の倍数でなくても5の倍数かどうかを調べます.
5の倍数,つまりBuzzであるかを調べます.そうでなければルールに従って普通に数字を返します.
(プログラムでは文字列に直すため数字をstring型に変換しています.)

    (i%3 == 0) ? ( (i%5 == 0) ? ("FizzBuzz") : ("Fizz") ) : ( (i%5 == 0) ? ("Buzz") : (i) )

まあこんなものができても業務に役立つとかないと思います.
パズルとかなんというか娯楽プログラミングみたいな感じで.

参考にしたページ

Fizz Buzz - Wikipedia
C,C++言語での三項演算子の正しい(?)使い方 - j○kerfin○たんの□グ

JavaScriptの読み込み位置について

こんにちは

みなさんは権利を行使していますか?
日本国憲法によると私達は健康で文化的な最低限の生活を営む権利を有しているそうです.
多くの人が権利を行使していると思います.
筆者も休日は電気を煌々とつけて日が昇るまでコンピューターを弄ったりなどして権利の行使をしています.
行使というよりかは濫用に近いでしょう.
権利の濫用は,最大限に文化的で不健康な生活を営むということです.
権利の濫用は,世間でもよく取り沙汰され問題になります.よくないことで,罰を受けたりします.
悪いことをしたらそれ相応の罰を受けるべきです.
筆者は先程言ったコンピュータを一晩中弄ることで地球の大切な資源を消費し破壊しました.
見えざる力が働き,頭痛持ちになりました.自律神経をぶっ壊しました.みなさんも気をつけましょう.
世の中がいくら文化的になっても身の程に合った生活もしくは健康で文化的な最低限の生活を営みましょう.
というのはどうでもいい話で本題はここからです.

この記事について

この記事は名前通り,HTMLの中でのJavaScriptの読み込み位置について書いてあります.
もっと掘り下げて言うと,HTMLのhead内で読み込む場合の挙動とbody内(bodyタグ閉じタグ直前)で読み込む場合の挙動について書いてあります.
あと間違ってるかもしれないので間違いがあれば教えてください.あと別の方法があれば教えてください.

遭遇した問題

jQueryプラグインを作っていたら,いくらコードを直してもエラーは出ないくせに動かないのでハマってしまいました.
そのまんま書くとよくわからなくなるので例として,
「指定したクラスの要素をクリックすると要素がちょっと動くプラグイン
を作るとしましょう(コードは違いますが筆者と同じ問題に遭遇します).

例として作ったjQueryプラグイン

(function($){
    $.fn.Move = function(Options){
        var element = this;
        var options = $.extend({
            seconds : 5000
        }, Options);

        element.click(function(){
            element.animate({
                left : "50px",
                top : "50px"
            }, options.seconds);
        });
    }
})(jQuery);

動きません

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8"/>
    <title>Sample Code</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/>
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
    <script src="script.js"></script>
    <script>
        $(".move").Move({});
    </script>
</head>

<body>
    <div class = "container">
        <h1>Sample Code</h1>
        <div class="row">
            <div class="move col-md-6">
                <h2>Move!!</h2>
            </div>
        </div>
    </div>
</body>
</html>

何がいけないのでしょうか?

この問題の解決方法には10種類くらいあります.

1個目

~~~ 省略 ~~~

    <script>
        $(document).ready(function(){
            $(".move").Move({});
        });
    </script>

~~~ 省略 ~~~

10個目

~~~ 省略 ~~~

    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
    <script src="script.js"></script>
    <script>
        $(".move").Move({});
    </script>
</body>

~~~ 省略 ~~~

だれも10進数で10個くらいなんて言ってません.

2つの違いはなんでしょうか?

問題のコードとも照らし合わせてブラウザの動きを見ていきましょう.
ちなみにかなり大雑把です.中身はもっと複雑なことをしてます.

順序 問題のコード 解決方法 1 解決方法 10
1 サイトにアクセスする サイトにアクセスする サイトにアクセスする
2 CSSとかJavaScriptのダウンロードが始まる[1] CSSとかJavaScriptのダウンロードが始まる[1] CSSのダウンロードが始まる
3-1 JavaScriptの実行[2] HTMLの読み込みが終わったら実行するという命令があるため実行されない それ以降(bodyの中身)のダウンロード
3-2 それ以降(bodyの中身)のダウンロード~ それ以降(bodyの中身)のダウンロード 描画
4-1 描画 描画 JavaScriptのダウンロード
4-2 JavaScriptの実行

[1]このときダウンロードしたJavaScriptのコードが実行されるまでそれ以下のHTMLの描画が止まります.
[2]HTMLが完全に読み込まれないまま何か処理を行うので動かないことが多いそうです.

この図はたぶんよくわからないと思うのでこちらを参照してください.
JavaScript - jQueryやJSライブラリ等をbodyタグで読み込むことによるデメリットってあるんでしょうか?(14600)|teratail
1024倍くらいわかりやすいです.

JavaScirptのファイルの大きいなどなどあると描画が遅くなってしまうっぽいのと,$(document).ready(function(){云々を書くのが面倒なので解決方法10の方法がおすすめかもしれません.
どうでもいいですがサイトの表示がトロいと帰っていく確率が高いそうです.
筆者もせっかちなので遅いとブラウザバックしがちです.
グーグル、“ページ表示が遅い”を解消する「AMP」プロジェクト–7秒が1秒に短縮 - CNET Japan

参考にしたページ

JavaScript - jQueryやJSライブラリ等をbodyタグで読み込むことによるデメリットってあるんでしょうか?(14600)|teratail

jQueryの基本 - $(document).ready - Qiita

グーグル、“ページ表示が遅い”を解消する「AMP」プロジェクト–7秒が1秒に短縮 - CNET Japan