JavaScript | takeHo（たけほ）のへなちょこ台帳 https://blog.takeho.com いわゆる自由帳ってところです。 Tue, 09 Dec 2025 01:28:45 +0000 ja hourly 1 https://wordpress.org/?v=6.6 https://blog.takeho.com/wp-content/uploads/2024/08/icon-150x150.png JavaScript | takeHo（たけほ）のへなちょこ台帳 https://blog.takeho.com 32 32 初心者必見！Vue.jsで超簡単にWeb開発を始める方法！ https://blog.takeho.com/how-to-start-web-development-with-vue-js-very-easily/ https://blog.takeho.com/how-to-start-web-development-with-vue-js-very-easily/#respond Wed, 12 Mar 2025 03:48:53 +0000 https://blog.takeho.com/?p=852 Vue.jsは、シンプルで柔軟なフレームワークとして、多くの開発者に愛用されています。本記事では、Vue.jsを初めて学ぶ方に向けて、基本概念の説明や動作サンプル、開発をスムーズに進めるための推奨ツールを紹介します。

Vue.jsとは？なぜ選ばれるのか？

Vue.jsは、ユーザーインターフェースを構築するためのJavaScriptフレームワークです。ReactやAngularと並ぶ人気のフレームワークであり、以下の特徴があります。

Vue.jsのメリット

  • シンプルな構文で学びやすい
    直感的な記述ができ、初心者でもすぐに習得可能。
  • コンポーネントベースの開発が可能
    再利用可能な部品を作成し、コードを効率的に管理。
  • 軽量かつ高速
    必要最小限のサイズでパフォーマンスも抜群。
  • 強力なリアクティブ機能
    データと画面を同期し、スムーズなUIを実現。
  • 豊富なエコシステム
    Vue RouterやVuex、Piniaなど便利なライブラリが充実。

Vue.jsは、「シンプルさ」と「パワフルさ」を兼ね備えたフレームワークで、初心者からプロフェッショナルまで幅広く支持されています。

Vue.jsを始める準備

Vue.jsを動作させるには、以下のいずれかの方法で開発環境を準備します。

CDNを利用する方法

最も簡単に試す方法は、CDNを利用することです。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue.js 入門</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@3/dist/vue.global.js"></script>
</head>
<body>
    <div id="app">
        <p>{{ message }}</p>
    </div>
    <script>
        const app = Vue.createApp({
            data() {
                return {
                    message: 'こんにちは、Vue.js！'
                };
            }
        });
        app.mount('#app');
    </script>
</body>
</html>

このコードをブラウザで開くだけで、Vue.jsが動作します。

Vue CLIを利用する方法

より本格的に開発を進める場合、Vue CLIを使用します。

npm install -g @vue/cli
vue create my-vue-app
cd my-vue-app
npm run serve

Vue.jsの基本概念とサンプルコード

1 データバインディング

Vueでは、データをHTMLと紐付けることができます。

<div id="app">
    <input v-model="message" placeholder="入力してください">
    <p>あなたが入力した内容: {{ message }}</p>
</div>
<script>
    const app = Vue.createApp({
        data() {
            return {
                message: ''
            };
        }
    });
    app.mount('#app');
</script>

v-modelディレクティブを使うことで、双方向データバインディングが実現できます。

2 条件分岐

<div id="app">
    <button @click="isVisible = !isVisible">表示切替</button>
    <p v-if="isVisible">このテキストは表示・非表示を切り替えられます。</p>
</div>
<script>
    const app = Vue.createApp({
        data() {
            return {
                isVisible: true
            };
        }
    });
    app.mount('#app');
</script>

v-ifを使うことで、条件に応じて要素を表示・非表示にできます。

3 ループ表示

<div id="app">
    <ul>
        <li v-for="(item, index) in items" :key="index">{{ item }}</li>
    </ul>
</div>
<script>
    const app = Vue.createApp({
        data() {
            return {
                items: ['りんご', 'バナナ', 'ぶどう']
            };
        }
    });
    app.mount('#app');
</script>

v-forを使用すると、リストデータを簡単に描画できます。

4 イベント処理

<div id="app">
    <button @click="increment">カウント: {{ count }}</button>
</div>
<script>
    const app = Vue.createApp({
        data() {
            return {
                count: 0
            };
        },
        methods: {
            increment() {
                this.count++;
            }
        }
    });
    app.mount('#app');
</script>

@clickを使ってボタンをクリックしたときにカウンターを増加させることができます。

Vue.js開発におすすめのツール

Vue DevTools

  • Vue.jsの状態を視覚的にデバッグできるブラウザ拡張ツール
  • ChromeおよびFirefoxで利用可能

Vite

  • 高速な開発環境を提供するツール
  • npm create vite@latest my-vue-app --template vue で簡単にセットアップ可能

Vue Router

  • シングルページアプリケーション（SPA）のルーティングを管理するライブラリ

Pinia

  • Vuexの後継として注目される状態管理ライブラリ

まとめ

Vue.jsは、シンプルな構文で学びやすく、柔軟な開発が可能なフレームワークです。本記事では、基本概念をサンプルコードとともに紹介しました。Vue.jsを活用することで、開発効率を向上させ、素早く美しいWebアプリを作成できます。ぜひ、実際にコードを書きながらVue.jsを習得してください！

]]> https://blog.takeho.com/how-to-start-web-development-with-vue-js-very-easily/feed/ 0 知らなきゃ損！jQueryの便利テクニック5選で開発効率UP https://blog.takeho.com/qo9uc1535pc9w64io9ywgucogkeg2jlw/ https://blog.takeho.com/qo9uc1535pc9w64io9ywgucogkeg2jlw/#respond Thu, 31 Oct 2024 16:03:00 +0000 https://blog.takeho.com/?p=509
  1. .on() メソッドで複数のイベントを一度に設定
  2. $.each()で簡単にループ処理
  3. フェードイン・フェードアウトで要素を滑らかに表示/非表示
  4. $.ajax()でシンプルな非同期通信
  5. .toggleClass()で複雑なスタイルの切り替え

.on() メソッドで複数のイベントを一度に設定

jQueryの.on()メソッドを使うと、複数のイベントを一度に設定することができます。特に似たようなイベントが複数必要な時に便利です。

$("button").on("mouseenter mouseleave", function() {
    $(this).toggleClass("hovered");
});

この例では、ボタン要素にマウスが乗ったり離れたりするたびにクラスがトグルされます。

.on() | jQuery API Documentation
api.jquery.com

$.each()で簡単にループ処理

jQueryの$.each()メソッドを使えば、配列やオブジェクトのループ処理が簡単に行えます。

const fruits = ["apple", "orange", "banana"];
$.each(fruits, function(index, value) {
    console.log(index + ": " + value);
});

$.each()は、DOM要素だけでなく配列にも使えます！

jQuery.each() | jQuery API Documentation
api.jquery.com

フェードイン・フェードアウトで要素を滑らかに表示/非表示

jQueryには.fadeIn()と.fadeOut()メソッドがあり、要素の表示/非表示にアニメーション効果を付けられます。使い方も簡単です。

$(".btn").click(function() {
    $(".content").fadeToggle(500);
});

この例では、ボタンをクリックするたびに500msかけて要素がフェードインまたはフェードアウトします。

$.ajax()でシンプルな非同期通信

jQueryの$.ajax()メソッドは、APIなどからデータを取得する際に便利です。直感的に書けるので、非同期通信が苦手でも簡単に使えます。

$.ajax({
    url: "https://api.example.com/data",
    type: "GET",
    dataType: "json",
    success: function(data) {
        console.log("取得したデータ:", data);
    },
    error: function(error) {
        console.error("エラーが発生:", error);
    }
});

非同期通信に関する設定がまとまっているので、管理がしやすいのも魅力です。

jQuery.ajax() | jQuery API Documentation
api.jquery.com

.toggleClass()で複雑なスタイルの切り替え

.toggleClass()メソッドを使うと、あるクラスが存在しない場合は追加し、存在する場合は削除します。スタイルの切り替えやボタンの状態変化などに使えます。

$("button").click(function() {
    $(this).toggleClass("active");
});

ボタンをクリックするたびにactiveクラスが付与/削除され、CSSを使って見た目や挙動を変えられます。

.toggleClass() | jQuery API Documentation
api.jquery.com
 ]]> https://blog.takeho.com/qo9uc1535pc9w64io9ywgucogkeg2jlw/feed/ 0 JSでDOMの要素の変化を監視してイベントを発生させる https://blog.takeho.com/5vbjbjkot1jxy6g9urii90twi24lub3n/ https://blog.takeho.com/5vbjbjkot1jxy6g9urii90twi24lub3n/#respond Fri, 23 Aug 2024 17:50:00 +0000 https://blog.takeho.com/?p=225 <div id="navi" class="nav-header">

ページをある程度スクロールすると

<div id="navi" class"nav-header header-fixed">

など、クラス名が動的に追加される場面があります。

ここでは要素を監視し、クラス名にheader-fixedが追加されたらイベントを発生させる方法を説明します。

使用する機能

ここではMutationObserverのクラスを使用します。

MutationObserverとは

MutationObserver（ミューテーションオブザーバー）は

  • Mutation　→　突然変異
  • Observer　→　観察者

という意味があり、DOMに変化が加わったことを監視し、変更があった場合にコールバックを起動する組み込みのオブジェクトになります。

使い方

トリガーの指定

次のように監視するDOMを指定します。

var target = document.getElementById('navi');

オブザーバーの作成

次のように変化が発生したときの処理を指定します。

var observer = new MutationObserver(records => {
  if (jQuery('#navi').hasClass('header-fixed')) {
    alert('header-fixed exists.');
  } else {
    alert('header-fixed is not exists.');
  }
});

監視を開始する

次の記述で監視を開始します。

observer.observe(target, {
  attributes: true,
  attributeFilter: ['class']
});

これでheader-fixedのクラスが動的に追加・削除を監視してアラートを出す事ができます。

監視を停止

次の記述で監視を停止します。

observer.disconnect();
]]> https://blog.takeho.com/5vbjbjkot1jxy6g9urii90twi24lub3n/feed/ 0