tableタグのtdタグのクラス名が同じの時に特定の列の背景色を変える方法

業務でHTML、JavaScript、Perlを使っていた時に一つ問題が起きました。

HTMLのテーブルで一つの列のみの背景色をある条件を満たすと黄色に染めるというものでした。

普通にコードを書くと簡単ですが、その時のtdタグのクラス名は同じクラス名にしなければなりませんでした。例えば以下のような感じです。

HTML側

途中省略

<td class="td_class"><input type="hidden" name="count" value="--COUNT--">--COUNT--</td>

<td class="td_class"><input type="hidden" name="check" value="--CHECK--">--CHECK--</td>

<td class="td_class"><input type="hidden" name="about" value="--ABOUT--">--ABOUT--</td>

大文字で記述しているところはPerlでCGIを実現して、DBから引っ張ってきたデータを入れています。それはさておきtdタグのクラスが上記のように全く同じ状態でname=countの列で5以上の数字を持っている箇所のみ背景色を黄色にしなければなりませんでした。

name=countのところをgetElementsByName('count')で対応しようと思いましたが、文字の周りが黄色く変わるだけで背景色全体が変化しませんでした。

なのでJavaScriptで以下のように書きました。

function checkCount(){

    var count = document.getElementsByName('count');

    var msgFlg = false;

    var counter = 0;

    var changeInt = "";

    for(var i = 0; i < count.length; i++){

        var parentEle = count[i].parentNode;

        if(count[i].value){

            changeInt = parseInt(count[i].value, 10);

        } else {

            continue;

        }

        if(changeInt > 4){

            msgFlg = true;

            parentEle.className = parentEle.className + "_target";

            parentEle.style.backgroundColor = "#ffff00";

            parentEle.style.fontSize = "x-small";

            counter++;

        }

    }

    if(msgFlg == true){

        alert(counter + "人");

    }

}

まず背景色を変えたい列のクラスを取得します。そしてDBに存在する分だけデータをHTMLで表示するのでその件数分をfor文でまわしていきます。

parentNodeのところですがここがポイントの一つです。countクラスの列を取得した後にその要素の親クラスを特定していきます。上記ではtd_classになるわけですが、countクラスを先に取得したので同じtd_classという名前でもcountクラスのtd_classを指していることになります。

changeInt = parseIntの箇所はvalueに存在する値は文字列なので数字に変換するためにあります。

そして数字が4より大きければ背景色を黄色にしたいのですが、countクラスのtd_classに限定しても条件を満たさなくても黄色に染まってしまうので、クラス名を少し変えてあげます。

それがparentEle.className = parentEle.className + "_target";の部分で数字が4より大きい箇所のtd_class名に_targetを加えてtd_class_targetという名前にしてあげます。

こうすると条件を満たしたところのみの背景色が黄色に変化します。

最後にcounter++で背景色が黄色になったのはいくつか数えていき、alertで何人いるかを出していきます。

これがお役にたてれば幸いです。

オブジェクト指向とは何なのか自分なりに考えてみました

Javaからプログラミングを学び始めてずっとオブジェクト指向って何のことなのか自分なりに考えてきました。

「オブジェクト指向でなぜつくるのか」という本を購入してオブジェクト指向とは何なのか、その答えがみつかればと思いましたが概要についてはあまり良いとは言えませんでした。

何か自分で納得できる分かりやすいものはないか考えていた時にそういえば今はないと思うけど昔はテレビデオっていうものがあったことを思い出しました。（下の画像）

今の若い人は知らないかもしれませんが、テレビとビデオデッキが一体化したものがありました。オブジェクト指向のメリットはテレビデオではなくテレビとビデオデッキを分けることにあると思いました。

テレビデオは修理するときにビデオデッキに原因があるのか、テレビに原因があるのかすべて分解しないと原因が特定できないというデメリットがあります。そうなると修理が完了するのにめちゃくちゃ時間がかかることが分かります。しかも特定できたとしてもすべての部品が一つにつながっているので本来は一カ所だけ修理すればいいところをその箇所に関連したところの部品等を置き換えたりものすごく手間がかかってしまいます。

でもこれがテレビとビデオデッキに分かれていたらどうでしょうか？

どちらの調子が悪いかテレビデオに比べてはるかに早い時間で特定できますし、テレビとビデオデッキが別々なのでどちらか片方だけ修理すればいいので手間がかかりません。

これをプログラミングにおきかえるとテレビデオのような構成のコードを想像してみてください。。

不具合が出ただけで何万行もあるコードを上から順にみていって原因を特定するだけでも一日で済んだらラッキーではないでしょうかというくらいのレベルだと思います。

修理だけで何日もかかっていたらメンテナンスとしては最悪な状況になってしまいます。

ではこれがテレビとビデオデッキに分かれているようなコードの構成になっていたらどうでしょうか。

どちらかに原因があるわけだからコードを見ていって原因を特定するための時間が大幅に削れます。メンテナンスとしては有効です。

オブジェクト指向が何なのかを私が自分で納得できる対象を見つけられたのは良かったと思います。今後分かりにくい用語やシステムを分かりやすく説明できるようにしていくことも一つのテストと思いますので精進していきます。

JavaでのCSV出力でつまんないことでつまづいたこと

JavaでファイルをCSV形式で出力する時にちょっとつまづいたことについてです。

客先のビューを参照してデータを整形してCSV形式でファイルを作るというものですが、当然ビューの中にはレコードによって表示する必要がないカラムが出てきます。
何の値も入っていないところを空白スペースすら入れずにファイルに書き出そうとするとうまくいきません。
値のないところに空白スペースか何かをいれないとそれ以外に値が入っていたとしてもファイルへ書き出す対象レコードでなくなり、弾かれてしまいます。

値をJava側でセットする時に値が入っていない箇所は、ダブルクォーテーションのみ入力するのではなくダブルクォーテーションのなかに空白スペースを入れて対処していきます。

Javaのstatic

自分はプログラミングはJavaから始めた。

始めたというより会社の方針でOCJP-Silverを取得することを義務付けていたので、

必然的にJavaから始まりました。

正直全く分かりませんでした。

後ほど身をもって知りましたが、プログラミングを始めるならまずはC言語から

始めるべきだなと思いました。

それはさておきプログラミングやPCのことを全く分からなかった自分がまずプログラミングとは何ぞやから始めずにいきなりJavaから始まったのはしんどかったです。

特に？？？となったのがstaticでした。（今は少しずつ分かってきました）

これは本当に分かりませんでした。静的？性的？　どっちでもええわ！と独りで発狂していました。

ただ最近仕事でJavaを使う機会が出てきたおかげで少しずつ分かってきました。

まずstaticを訳すと静的とでますが、要するに処理することが完全に決まっていて変化することがないということです。

まずは静的の意味を押さえていきます。

次にstatic修飾子の特徴ですが以下のようなコードがあったとします。

class User {
    private String name;
    private static int count = 0; 

    public User(String name) {
        this.name = name;
        User.count++;
    }

    public static void getInfo() { 
        System.out.println(User.count);
    }

}

public class MyApp {

    public static void main(String[] args) {
        User.getInfo(); // 0
        User tom = new User("tom");
        User.getInfo(); // 1
        User bob = new User("bob");
        User.getInfo(); // 2
    }

}

UserクラスにあるgetInfo()メソッドを呼び出すには通常、User 変数 = new User();

という風に記述しますがstatic修飾子を付けた場合はインスタンス化する必要がなくなります。

あとstatic同士では値を保持しあう関係になります。

例えばfor文を使うとダメな状況下で1、2、3、4....と番号を増やしていくときに

static変数で値を保持しつつ番号を増やしていくという方法が私の時は有効でした。

staticを使いこなすとなると、もっと練習が必要だと感じました。

railsチュートリアル１章を終えて

Ruby on railsのチュートリアルを毎日ではないが、時間を作って少しでも進めています。

第１章はGitやBitbucketでのソースのバージョン管理とHerokuによるデプロイの方法でしたが、慣れないうちは色々と迷走しました。

ただデプロイの箇所でHerokuにユーザー登録したらすぐにでもHerokuコマンドが使えるような書き方をしているのでここは修正する必要があるかと思いました。

実際はHeroku Toolbeltをインストールしてからコマンドが使えます。

blog.infinity-dimensions.com

Herokuのことを勉強してるとPaaSについて知る必要が出てきました。

PaaSが出る前のアプリ開発では一通り開発が終われば一般公開するためにサーバを準備していきます。サーバの準備だけではなく、サーバの管理もしなければならないので本来開発に必要な時間がサーバ管理をするための時間により奪われてしまうという悪循環に陥っていました。

そこで上記の手間を解消したのがPaaSというサービスでサーバの準備と管理を一手に引き受けてくれるので余計な作業時間を取られずにすみました。

ではHerokuはどういう仕組みなのかというと、まず開発側では開発したソースコードファイルと依存関係を示したファイルなどがあります。

Heroku側ではそれらのファイルを元にSlugというソースコードと依存関係にあるライブラリをパッケージ化したファイルを作ります。

そして次にDynoという仮想サーバを立ち上げてSlugをそこに読み込ませます。

このDynoというHerokuの仮想サーバは負荷を分散させるために2～3ほど増設も可能です。

ただしこのDynoは破棄されることが前提なのでずっとデータを残したいということはできないので、もし永続的に残したいのであればAdd-Onか外部サービスで対応する必要があります。

Herokuにはまだまだ機能が色々あるようなのでそれらは追々使いこなしていきます。

GraphQLとは

先日にMeteorとApolloについて紹介しましたが、

それらの原動力になっているGraphQLについて復習を兼ねて

話していきたいと思います。

その前にGraphQLと比較に出されるRESTについての問題点を

挙げていきますと、

・クライアント毎に異なるAPIを用意する必要があること

・APIを変更するにしてもコストがかかってしまうこと

気軽に異なるSQLへ移行もできないし、メンテも大変そうだなという印象です。

対してGraphQLは、

・クライアントが異なっていても対象のクライアント毎に必要な情報を

個別のクエリでリクエストができること

・通信の回数が1回で済むこと（1回で済まなくても確実にRESTより）

・可読性が高く、拡張もしやすいこと

さらっと紹介しましたが、もっと知りたい勉強したい方には下記のリンクを

紹介しておきます。

https://learngraphql.com/　⇒　Let's learn GraphQL

graphql.org

github.com

substringで末尾側から文字列を抜き取る

Javaでsubstringを使って文字列の末尾側から3文字を抜き出す箇所があったのでそれのメモです。

下のコードは例です。

String a = "abcdefg";

int len = a.length();

a = a.substring(len - 3, len);

関数化すると

public static String FromRight(String moji, int len){

    try{

        if(moji.length() >= len){

            return moji.substring(moji.length() - len);

        } else {

            return;

        } catch(Exception e){

            return moji;

            e.printStackTrace();

        } 

    }

}

うまく抽出できなかった場合も起こりうるので、

例外処理を設けています。

因みにprintStackTrace()メソッドは例外がなぜ投げられたのかを

説明してくれるデバッグではよく使われる便利なメソッドです。

※GraphQLの説明は次回にまわします。