Web言語マスター復活への道/13日目

2021年8月3日 03:10

今日も1日過ぎていきました、ほんとあっという間。資料作成で終わりました🙄

目標

1日考えましたが、下の流れでいこうと思います。理由はサーバーサイドのが得意だからです。node.jsは少し勉強したことあるのでなんとなくわかりますが、他は需要度とか難易度が不明なので、軌道修正多分します。案件数とかも後で調べてみます。
1. jqueryをもう少し勉強
2. vue.js→node.jsでjavascriptの大枠を掴む
3. ポートフォリオを作成
4. 就活する
5. rubyを勉強する
6. ruby on rails勉強する

今日の目標
・jQueryベースでタブ作成

本日の作業

・jQueryでタブ作成
以下サイト参考に、作成しました。見ずに作成しようかと思いましたが、htmlのlist形式でないとなかなか表示が難しかったので、だいぶ見ました。

index.html

<!DOCTYPE html>
<html lang="ja">

<head>
   <meta charset="utf-8">
   <title>JavaScript Test</title>
   <link rel="stylesheet" href="main.css">
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
   <script src="main.js"></script>

</head>

<body>
   <div class="tab-test">
       <ul id="tab" class="list-tab">
           <li class="active">タブ1</li>
           <li>タブ2</li>

       </ul>
   </div>

   <div class="text-test">
       <div class="text active">
           <p>タブ1テキスト</p>
       </div>
       <div class="text">
           <p>タブ2テキスト</p>
       </div>

</body>

</html>

main.css

ul {
   margin: 0;
   padding: 0;
   list-style-type: none;
}

p {
   margin: 0;
}

.tab-test {
   overflow: hidden;
}

.list-tab {
   display: flex;
   margin: 0 -2px;
   border-bottom: aqua;
}

.list-tab > li {
   display: block;
   padding: 5px 1px;
   margin: 0 2px;
   width: 100%;
   color: white;
   text-align: center;
   background: grey;
   box-sizing: border-box;
}

.list-tab .active {
   background: aqua;
}

.text {
   display: none;
   padding: 1px;
   border-bottom: 1px solid aqua;
   border-left: 1px solid aqua;
   border-right: 1px solid aqua;
   color: grey;
}

.text.active {
   display: block;
}

main.js

$(function(){
   $("#tab li").click(function(){
     $("#tab li").removeClass("active");
     $(this).addClass("active");
     var index = $(this).index();
     
     $(".text").removeClass("active");
     $(".text").eq(index).addClass("active");
   });
 });

結果

・vue.js

最シンプルコード。yaml記載形式に似てきたような

index.html

<!DOCTYPE html>
<html lang="ja">
 <head>
   <meta charset="utf-8" />
   <title>Vue.js Test</title>
   <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
 </head>
 <body>
   <div id="example">{{ greeting }}</div>
   <script src="main.js"></script>
 </body>
</html>

main.js

var app = new Vue({
 el: "#example",
 data: {
   greeting: "Hello Vue.js!"
 }
});

・urlパターンとnameパターンも試しました。"el"ってのが現時点よくわかっていないままコーディングしてます。

所感

jQueryのタブづくりは、今までの難易度の数倍上がっているように思います。ここで1挫折した記憶あります。実際、list形式でない場合のコーディング方法がいまいちな状態です。
vue.jsも触りのみですが、v-xxxが難しいような気がします。2-3日で基礎部分の理解を目標にします🤓

この記事が気に入ったらサポートをしてみませんか？