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

プログラミング

プログラミング初心者の方で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>

表示されるヘッダー

Vue.js+Vuetifyであれば、これだけのコードでこんな綺麗なヘッダーを作ることができます。

しかもレスポンシブ対応してるので画面にあわせて最適化してくれます。

まとめ

ひとつの例しか紹介していませんが、Vue.js+Vuetifyがスゴイことはなんとなくわかってもらえたかと思います。

また、HTML/CSSの場合はアイコンをクリックされたときのアニメーションをCSSで書いたり、JavaScriptでイベント処理を書いたりしないといけません。

しかし、Vue.jsとVuetifyを使えば、綺麗なアニメーションが自動で設定されていて、イベントも簡単に書けるのでオススメ。

Vuetify 始め方」などで検索するとすごくわかりやすい解説が出てくるので、興味がある人はVuetifyに触れてみてくださいね

コメント

タイトルとURLをコピーしました