【WEB系】プログラミングがめんどくさい人はVuetifyを使おう

2020-03-24
- Pg

プログラミング初心者の方でHTML/CSSを最初に学習する方もいると思います。

ある程度、知識がついてきたらアウトプットのために「自分で何かを作る」というのをするでしょう。

そのときにこんな風に思う人もいるでしょう

「こんなにコード書いたのに、これだけか。なんかコード書くのめんどくさいな」

私もウェブサイトを作るときにコードを書きますが、途中でめんどくさくなることもあります。

しかし、フレームワークというものを使い始めてからサイト作成スピードがめっちゃ上がりました。

しかも綺麗なデザインのサイトが簡単に作れるようになったんですよね。

今回は私が使ってみて「すげえ！」と思ったフレームワークをご紹介します。

フレームワークを使うとどれくらい変化するか

まず、私が使用したのはVue.jsとVuetifyというフレームワークです。

普通にHTML/CSSを書くのとどれくらい違いがあるのかを示したいと思います。

今回はウェブサイトのヘッダーメニューを作るのを例にします。

HTML/CSSの場合

<header class="header">
    <div class="header-inner">
        <nav-icon>
            <div>+</div>
        </nav-icon>
        <nav class="header-nav">
            <ul class="header-nav-list">
                <li><a href="">213123</a></li>
                <li><a href="">123123</a></li>
                <li><a href="">12321</a></li>
                <li><a href="">123123</a></li>
                <li><a href="">12312</a></li>
                <li><a href="">123123</a></li>
            </ul>
        </nav>
    </div>
</header>

.header {
    background: black;
    height: 80px;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 10;
    &-inner {
        max-width: 1180px;
    }
    &-nav {
        &-list {
            display: flex;
            justify-content: center;
            list-style-type: none;
            margin: 0;
            li {
                background-color: black;
                /* padding: 0 10px; */
                line-height: 80px;
                a {
                    color: #fff;
                    text-decoration: none;
                    padding: 20px 25px;
                }
                &:hover {
                    a {
                        color: black;
                    }
                    background-color: white;
                    animation: header-menu-color 1s;
                }
            }
        }
    }
}

表示されるヘッダー

正確にはHTMLとSCSSですが、これだけ書いてやっとこんなもんです。

これからレスポンシブ対応もしないといけないのでヘッダー部分だけでさらにコードを書かないといけません。

Vue.js+Vuetifyの場合

<v-app-bar
    app
    color="blue darken-3"
    dark
>
    <v-app-bar-nav-icon />
    <v-toolbar-title
    style="width: 300px"
    class="ml-0 pl-4"
    >
    <span class="hidden-sm-and-down">Google Contacts</span>
    </v-toolbar-title>
    <v-text-field
    flat
    solo-inverted
    hide-details
    prepend-inner-icon="mdi-magnify"
    label="Search"
    class="hidden-sm-and-down"
    />
    <v-spacer />
    <v-btn icon>
    <v-icon>mdi-apps</v-icon>
    </v-btn>
    <v-btn icon>
    <v-icon>mdi-bell</v-icon>
    </v-btn>
    <v-btn
    icon
    large
    >
    <v-avatar
        size="32px"
        item
    >
        <v-img
        src="logo.svg"
        /></v-avatar>
    </v-btn>
</v-app-bar>