個人開発でやらかした表示崩れたち

この記事はTECH PLAY女子部 Advent Calendar 2018 12日目の記事です。

TECH PLAY女子部さんのイベント等に参加したことはないのですが、
しれーーっとAdvent Calendarに登録させていただきました…
よろしくお願いしますm( _ _ )m

本当は「こんなことできるようになったでえどやあああ〜〜」な内容がよかったかもですが、、、
色々つまづくことが多かったので、あえて失敗談(?)的な内容で行こうと思います。

交わらないタグたち

Rails(というかerbファイル)でコーディングしていた時のこと。
最初tableのみを実装していたが、
一行をクリックするとプルダウンみたいに開いて別のコンテンツが現れるようにしたい!
と思い立った。
調べてみると、ul, liタグで実装されたサンプルコードがあったため、
サンプルコードをもとに、実装していたtableにul, liタグを混合してみた…。

<table class="table timetable">
    <ul class="list-group accordion-menu">
        <li class="list-group-item">
            <tr>
                <td class="col-1">Time</td>
                <td class="col-2">Session title</td>
                <td class="col-3">place</td>
            </tr>
        </li>
        <% for i in 1..3 %>
            <div class="dropdownlink">
                <li class="list-group-item">
                    <tr>
                        <td>10:00~11:00</td>
                        <td>Program<%= i %></td>
                        <td>@Coference room</td>
                    </tr>
                </li>
            </div>
        <% end %>
    </ul>
</table>

すると…

あれ、、、分離してる、、、??
デベロッパーツールで中身を確認すると、確かに分裂してそう

htmlベタ書きで同じように実装をしてみるとやはり分離しているみたい。

table関連のタグと、ul, liタグは交わらないのか…そりゃそうか…(^-^;)

違う、ループさせたいのはそこじゃない…

SpringBoot + Thymeleafで新規登録画面でプルダウンを作っていた時のこと。

  • 変数categories_incomeはリスト
  • each文でcategoryに値を渡してループさせて、categories_incomeの数に応じてプルダウンの選択肢を表示させたい

と思って実装したのがこちら。

<form th:action="@{/income_outgo/new}" th:method="post">
<!--中略--->
    <div class="form-group row">
        <label class="col-sm-2 col-form-label">カテゴリ</label>
        <div class="col-sm-6">
            <select class="custom-select" name="category_id" th:method="post" th:each="category:${categories_income}" th:object="${category}">
                <option selected disabled>選択して下さい</option>
                <option value="*{id}" th:text="*{name}"></option>
            </select>
        </div>
    </div>
</form>

違う、そうじゃない…
プルダウンそのものがループされている…!

何を思ったのか、次はoptionタグにeach文を設定してしまった。

 <select class="custom-select" name="category_id">
        <option selected disable th:each="category:${categories_outgo}" th:object="${category}">選択して下さい</option>
        <option th:value="*{id}" th:text="*{name}"></option>
    </select>

今度は「選択してください」がループされてしまった…
選択肢そのものがループされるように以下のように書き換えた。

<select class="custom-select" name="category_id">
    <option selected disable>選択して下さい</option>
    <div th:each="category:${categories_outgo}" th:object="${category}">
        <option th:value="*{id}" th:text="*{name}"></option>
     </div>
</select>

今度こそ…!

無事解決…。

「2018年12月」って出したかったんです

タイトルの通り、見出しに「2018年12月」って出したかったんです。
意気込んでビルドして、ブラウザをリロードして出てきたのがこちら!

思わず「ブフォオおおお」と吹いてしまいました

ちなみに原因はJavaのSimpleDateFormatのパターン設定ミス。

SimpleDateFormat thisMonthFormat = new SimpleDateFormat("yyyy年mm月");
String thisMonth = thisMonthFormat.format(today);

月のところをmmとしていたことにより、何時何分の「分」が入ってきていた。
月は大文字MM表記が正…

SimpleDateFormat thisMonthFormat = new SimpleDateFormat("yyyy年MM月");

超しょうもない…

まとめ(?)

以上、しょうもないミスによる表示崩れ集でした。

今回フロントよりのミスの紹介が多かったですが、これ以外にもあらゆるところでつまづいてきました…
何かにつまづいた時、問題・原因・解決策を記録しておくのは大事ですね。
なるだけ記録してきたつもりなのですが、この記事を書くにあたって自分のメモを見返してみると
記録が不十分な箇所が多いなあと感じました…

失敗からこそ色々学べるので、引き続きぶち当たって行こうと思います(笑)

最後までお読みいただきありがとうございました。


SNSでもご購読できます。

コメントを残す

*