1. CSSレイアウト関連

Flexboxを使用したレスポンシブレイアウトの実装方法について説明します。

2. JavaScriptの主要操作

変数代入

• result = obj?.property: objがundefinedまたはnullの場合、エラーを発生させずにresultに代入
• result = value ?? defaultValue: valueがundefinedまたはnullの場合、defaultValueを代入
• result = value || alternative: valueがfalsyな値の場合、alternativeを代入

配列操作メソッド

// 要素の追加
const newArray = originalArray.concat([4, 5]);

// 要素の削除
const removed = array.splice(2, 1);

// 配列のフィルタリング
const filtered = users.filter(user => user.name !== '田中' && user.name !== '佐藤');

// 配列の変換
const doubled = [1, 2, 3].map(x => x * 2);

// 要素の検索
const found = items.find(item => item.id === 123);

// 配列の畳み込み
const total = [1, 2, 3, 4].reduce((accumulator, current) => accumulator + current, 0);

// 文字出現回数のカウント
const characters = ['a', 'b', 'a', 'c', 'b', 'a'];
const count = characters.reduce((acc, char) => {
  acc[char] = (acc[char] || 0) + 1;
  return acc;
}, {});

3. Vue CLIプロジェクトの設定

環境設定

// vue.config.js
const { defineConfig } = require('@vue/cli-service');

module.exports = defineConfig({
  transpileDependencies: true,
  devServer: {
    port: 8080,
    host: 'localhost'
  },
  chainWebpack: config => {
    config.plugin('html').tap(args => {
      args[0].title = '管理システム';
      return args;
    });
  }
});

ルーティング設定

// router/index.js
import Vue from 'vue';
import Router from 'vue-router';
import Home from '../views/Home.vue';

Vue.use(Router);

export default new Router({
  mode: 'history',
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home
    }
  ]
});

メインアプリケーション

// main.js
import Vue from 'vue';
import App from './App.vue';
import router from './router';
import './assets/css/global.css';

new Vue({
  router,
  render: h => h(App)
}).$mount('#app');

4. Element UIコンポーネントの統合

インストールと設定

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI, { 
  size: 'small',
  zIndex: 3000
});

レイアウトコンポーネント

<el-container>
  <el-aside width="200px">
    <div class="logo-area">
      <img src="@/assets/logo.png" alt="Logo">
      <span v-if="!collapsed">システム名</span>
    </div>
    
    <el-menu 
      :collapse="collapsed"
      router
      default-active="/"
    >
      <el-menu-item index="/">
        <i class="el-icon-s-home"></i>
        <span>ホーム</span>
      </el-menu-item>
    </el-menu>
  </el-aside>
  
  <el-container>
    <el-header>
      <div class="header-content">
        <i :class="collapseIcon" @click="toggleCollapse"></i>
        <el-breadcrumb separator="/">
          <el-breadcrumb-item>ホーム</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
    </el-header>
    
    <el-main>
      <router-view></router-view>
    </el-main>
  </el-container>
</el-container>

5. AxiosによるAPI通信

HTTPクライアントの設定

// utils/request.js
import axios from 'axios';

const httpClient = axios.create({
  baseURL: process.env.VUE_APP_API_BASE_URL || 'http://localhost:8081',
  timeout: 30000
});

httpClient.interceptors.request.use(config => {
  config.headers['Content-Type'] = 'application/json';
  const token = localStorage.getItem('auth-token');
  if (token) {
    config.headers['Authorization'] = `Bearer ${token}`;
  }
  return config;
});

httpClient.interceptors.response.use(
  response => response.data,
  error => Promise.reject(error)
);

export default httpClient;

6. 認証機能の実装

ログインコンポーネント

export default {
  data() {
    return {
      credentials: {
        username: '',
        password: '',
        verificationCode: ''
      },
      validationRules: {
        username: [{ required: true, message: 'ユーザー名を入力してください' }],
        password: [{ required: true, message: 'パスワードを入力してください' }]
      }
    };
  },
  methods: {
    async submitLogin() {
      try {
        const response = await this.$http.post('/auth/login', this.credentials);
        localStorage.setItem('user-token', response.data.token);
        this.$router.push('/dashboard');
      } catch (error) {
        this.$message.error('ログインに失敗しました');
      }
    }
  }
};

7. ファイルアップロード機能

async uploadFile(file) {
  const formData = new FormData();
  formData.append('file', file);
  
  try {
    const response = await this.$http.post('/files/upload', formData, {
      headers: { 'Content-Type': 'multipart/form-data' }
    });
    return response.data;
  } catch (error) {
    throw new Error('ファイルアップロードに失敗しました');
  }
}