【フリーランス】リモートに強いエージェント5社
フリーランスエージェントのおすすめ30社をランキング 気になる1位は？
50,000円がもらえる！フリーランスエージェントの紹介キャンペーン

フリーランスフロントエンドエンジニアの面談対策：Vue.js,Nuxt.js周りの知識棚卸し

本ページにはプロモーションが含まれます

フリーランスになる

以下のように 「機能・概念別」＋「よく聞かれる切り口」 に分けて整理しておくと、スッと出せるようになるよ！

  1. 🚀 Nuxt3の基本構成・設計
    1. ✅ Nuxt3とは？
    2. 📁 Appディレクトリ構成
    3. 📌 ファイルベースルーティング
    4. 🧩 Layoutの使い方
      1. 基本の流れ：
      2. ページ側で指定：
      3. Layout内では <slot /> でページ内容を差し込む
    5. ✅ 補足ポイント（まとめ）
  2. 💡 状態管理（Pinia・useState）
    1. ✅ 状態管理とは？
    2. 🧩 Pinia を使う理由と使い方
      1. 🔹 Piniaとは？
      2. なぜPiniaを使うの？
      3. 🔧 Piniaの使い方（構成要素）
    3. 🔁 useStateとの違い（ローカル vs グローバル）
    4. 🌐 SSR環境でのPiniaの扱い（状態保持の工夫）
    5. Nuxt3ではどうしてる？
      1. 🛡️ 状態を永続化したい場合
    6. ✅ 面談で話す例（まとめ）
  3. 🔄 データ取得とAPI連携
    1. 🧠 SSR・SSG・CSRの違いと使いどころ
    2. 🧩 Composables と Plugins
    3. 🔐 認証・認可
    4. 🎨 UI周り（Vuetifyなど）
    5. 🧱 TypeScript
    6. 🔧 開発・構築・デプロイ関連
    7. 📊 Core Web Vitals / パフォーマンス対応（最近よく聞かれる）
    8. 📌 その他
    9. 🎯 面談での答え方のコツ
  4. 🌍 SSR・SSG・CSRの違いと使いどころ
    1. 🔁 SSR（サーバーサイドレンダリング）
      1. ✅ メリット
      2. 🧠 Nuxt3での実装例
    2. 📦 SSG（静的サイト生成）
      1. ✅ メリット
      2. 🧠 Nuxt3でのやり方
    3. 🖥️ CSR（クライアントサイドレンダリング）
      1. ✅ メリット
      2. 🧠 Nuxt3での使い方
    4. ⚙️ defineNuxtConfig の ssr: true / false の違い
  5. 🛠️ Composables と Plugins の違いと役割
    1. 📦 composables/ ディレクトリ
      1. 使いどころ：
      2. 例：
    2. 🔌 plugins/ ディレクトリ
      1. 使いどころ：
      2. 例：
    3. ✅ まとめ（面談で語れるポイント）
  6. 🔐 認証・認可（Auth）
    1. ✅ Middlewareの使い方（defineNuxtRouteMiddleware）
    2. ✅ 認証トークンの管理（cookie, localStorage, SSRの注意点）
      1. SSR対応なら cookie を推奨
    3. ✅ 認可チェックとルーティングガード
  7. 🎨 UI周り（Vuetifyなど）
    1. ✅ Vuetify3との統合
      1. SSR・SSGでの注意点
    2. ✅ スロット・コンポーネント設計
    3. ✅ スケーラブルなUI設計：Atomic Design
  8. 🧱 TypeScript活用
    1. ✅ Typeの書き方（Props, store, composables）
      1. Propsの型
      2. Piniaの型付き
      3. Composablesの型
    2. ✅ APIレスポンスの型定義と分割
    3. 🎯 まとめ：このあたり面談で語れるとGOOD！
  9. 🔧 開発・構築・デプロイ関連
    1. ✅ Nuxt3のNitroサーバの特徴
    2. ✅ build・開発関連コマンド
    3. ✅ AWSへのデプロイ経験（例：S3 + CloudFront）
      1. ✅ 静的ホスティング（SSGの場合）
      2. ✅ SSR（動的）なら…
      3. ✅ Amplify でもデプロイ可
    4. ✅ サーバー側API作成（server/api/xxx.ts）
  10. 📊 Core Web Vitals / パフォーマンス対応
    1. ✅ 代表的な指標と改善策
    2. ✅ Nuxt3の最適化Tips
  11. 📌 その他：実務でよく聞かれるやつ
    1. ✅ ESLint / Prettier（コードスタイル統一）
    2. ✅ バックエンドとの連携
    3. ✅ テスト（unit / e2e）
      1. Unit Test：Vitest（Vue3に相性◎）
      2. E2E：Cypress

🚀 Nuxt3の基本構成・設計

  • Nuxt3とは？ → SSR・SSG・SPAを統一的に扱えるVue3ベースのフレームワーク

  • Appディレクトリ構成（pages/, components/, layouts/, composables/, plugins/, middleware/）

  • ファイルベースルーティングの仕組み

  • Layoutの使い方（default, error, custom layouts）

 

✅ Nuxt3とは？

Nuxt3は、Vue3をベースにしたフレームワークで、SSR（サーバーサイドレンダリング）、SSG（静的サイト生成）、SPA（クライアントサイド描画）を柔軟に切り替えて使えるのが特徴です。

  • Vue3 + Viteベースで高速開発可能

  • TypeScript・Composition API・Piniaが標準サポート

  • APIエンドポイントもserver/api/内で完結（Nitroサーバー搭載）

  • モジュールシステムが強力（例えば認証やi18nの導入が簡単）

👉 ポイント

  • 単なるVueアプリではなく、「フルスタックVueアプリケーション」を構築できる

  • SSRやSSGなどの描画方式をプロジェクトごと、ページごとに最適に選べるのが強み

📁 Appディレクトリ構成

|– pages/ # ルーティングと対応
|– components/ # UIコンポーネント（.vue単位）
|– layouts/ # ページレイアウトの定義（共通部分）
|– composables/ # ロジックの再利用（useXxx.ts）
|– plugins/ # 外部ライブラリやAPIの初期化
|– middleware/ # 認証やアクセス制御などのルートガード
|– app.vue # アプリ全体のルートコンテナ
|– nuxt.config.ts # 設定ファイル

👉 よくある質問：「Vueと何が違うの？」
→ Nuxtはこの構成が「ルールとして決まっている」ことで、ルーティングや状態管理、API連携まで全部統一された設計になる。

📌 ファイルベースルーティング

pages/ ディレクトリにファイルを置くだけでルーティングが自動生成されます。

例：

/pages/index.vue => /
/pages/about.vue => /about
/pages/blog/index.vue => /blog
/pages/blog/[id].vue => /blog/:id （動的ルート）
/pages/blog/[...slug].vue => /blog/aaa/bbb（キャッチオール）

特徴：

  • definePageMeta() でページごとのメタ情報や認証要件を設定可能

  • middleware を definePageMeta({ middleware: 'auth' }) で適用も可

🧩 Layoutの使い方

layouts/ ディレクトリでページ全体のレイアウト構造を定義します。

基本の流れ：

  1. layouts/default.vue：全ページに適用されるデフォルトレイアウト

  2. layouts/error.vue：エラー時に表示されるレイアウト

  3. layouts/admin.vue：特定ページだけ別レイアウトを使いたい場合

ページ側で指定：

ts
definePageMeta({
layout: ‘admin’
});

Layout内では <slot /> でページ内容を差し込む

vue
<!-- layouts/admin.vue -->
<template>
<div class="admin-layout">
<Header />
<main><slot /></main>
</div>
</template>

👉 面談での言い方例：

「Nuxt3ではレイアウトをファイルで分けて、例えば管理画面とユーザー画面で異なる見た目にする時に使っています。デフォルトレイアウトと、必要に応じてcustom layoutを定義して、ページごとに切り替えられるのが便利です。」

✅ 補足ポイント（まとめ）

機能役割・用途
pages/ルーティングを定義、ファイル名がURLになる
layouts/共通のページ枠組み（header/footerなど）を定義
components/再利用可能なVueパーツを定義
composables/ロジックを再利用する（API処理やデータ操作など）
plugins/外部ライブラリの初期化・グローバル登録など
middleware/ページ遷移時のガード処理（例：認証チェック）

💡 状態管理（Pinia・useState）

  • pinia を使う理由と使い方（defineStore, state, getters, actions）

  • useState との違い（ローカル vs グローバル、永続性）

  • SSR環境でのpiniaの扱い（状態保持の工夫）

✅ 状態管理とは？

コンポーネント間で 共通して使う「データ」 を一元管理する仕組み。

例えば：

  • ログインユーザー情報

  • カート内商品情報

  • 言語設定

など、どこからでもアクセス・変更したい状態が対象。

🧩 Pinia を使う理由と使い方

🔹 Piniaとは？

Vue3公式の状態管理ライブラリで、Vuexの後継として推奨されてるもの。
Nuxt3では @pinia/nuxt が標準で組み込まれてるから、すぐ使える。

なぜPiniaを使うの？

  • グローバルな状態を扱える（どのコンポーネントからでも使える）

  • Composition APIベースで書きやすい

  • devtools対応、型サポート、SSR対応もバッチリ

  • storeをファイル単位で分離できてスケーラブル（例：useUserStore, useCartStore）

🔧 Piniaの使い方（構成要素）

import { defineStore } from ‘pinia’;

export const useUserStore = defineStore(‘user’, {
state: () => ({
user: null,
}),
getters: {
isLoggedIn: (state) => !!state.user,
},
actions: {
setUser(user) {
this.user = user;
},
logout() {
this.user = null;
},
},
});


使う側（ページやコンポーネント）で：

ts
const userStore = useUserStore();
userStore.setUser({ name: 'Taro' });
console.log(userStore.isLoggedIn); // true

🔁 useStateとの違い（ローカル vs グローバル）

特徴useStatePinia
対象単一コンポーネント or ページ内アプリ全体で共有する状態
永続性ページ遷移やリロードでリセットリロード時も維持（※localStorage併用など）
構文Composition APIdefineStore()でストア作成
分離・再利用あまりしないストアファイルに分けて再利用・整理しやすい
SSR対応自動でされる少し工夫が必要（次で解説）

🌐 SSR環境でのPiniaの扱い（状態保持の工夫）

SSRではサーバーで一度描画した状態をクライアントにシリアライズして引き継ぐ必要がある。

Nuxt3ではどうしてる？

→ NuxtがPiniaとNitroサーバーを統合してるため、基本的には自動で動く
（※ただし一部のケースで状態リセットが発生しやすい）

🛡️ 状態を永続化したい場合

bash
npm install pinia-plugin-persistedstate

そして、ストア側で：

ts
// plugins/piniaPersisted.client.tsimport { defineNuxtPlugin } from ‘#app’;
import piniaPluginPersistedstate from ‘pinia-plugin-persistedstate’;

export default defineNuxtPlugin(({ $pinia }) => {
$pinia.use(piniaPluginPersistedstate);
});


これで状態が localStorageに保存されて、SSRやリロード後も保持 できる！

✅ 面談で話す例（まとめ）

「Nuxt3ではコンポーネントローカルな状態にはuseState、アプリ全体に共有するグローバルな状態にはPiniaを使います。PiniaはVue公式の状態管理ライブラリで、SSRや永続化にも対応していて、ログイン情報や共通設定の管理に向いています。Nuxtでは最初から使える状態なので、使い分けも簡単にできます。」

🔄 データ取得とAPI連携

  • useFetch（SSR対応、キャッシュ、状態管理つき）

  • $fetch（軽量、単発通信向き、Composableやstoreでも使用可）

  • useAsyncData との違いと使い分け

  • クライアント専用API（onMounted内での処理など）

  • middlewareやserver/apiディレクトリとの連携

🧠 SSR・SSG・CSRの違いと使いどころ

  • SSR（useFetch, SEO, 初期描画）

  • SSG（静的化、再利用性、ビルド時取得）

  • CSR（完全にクライアントだけで動くケース）

  • defineNuxtConfig の ssr: true/false の違い

🧩 Composables と Plugins

  • composables/ に置くことで自動インポートされる

  • API分離・共通ロジック（例：useUser, useAuth など）

  • plugins/ を使った外部ライブラリの登録・実行タイミング

🔐 認証・認可

  • Middlewareの使い方（defineNuxtRouteMiddleware）

  • 認証トークンの管理（cookie, localStorage, SSRでの注意点）

  • 認可チェックとルーティングガード

🎨 UI周り（Vuetifyなど）

  • Vuetify3との統合（SSGとの相性、カスタマイズ）

  • スロット・コンポーネント設計のベストプラクティス

  • スケーラブルなデザイン実装（Atomic Designなど）

🧱 TypeScript

  • Typeの書き方（Props, storeの型付け, composablesの戻り値など）

  • APIレスポンスの型管理（型ファイルの分割など）

🔧 開発・構築・デプロイ関連

  • Nuxt3の nitro サーバの特徴（サーバーレス、Edge対応）

  • buildコマンド（nuxi, nuxt dev, nuxt build, nuxt preview）

  • AWSなどへのデプロイ経験（S3+CloudFront、Amplify、Lambdaとの連携）

  • サーバー側API作成（server/api/xxx.ts）

📊 Core Web Vitals / パフォーマンス対応（最近よく聞かれる）

  • LCP、FID、CLSなどの指標と改善経験

  • Lazy Load、SplitChunks、画像最適化

  • Nuxt3のパフォーマンス最適化Tips（definePageMeta, nuxt-img, etc）

📌 その他

  • ESLint, Prettier などコードスタイル管理

  • バックエンドとの連携（認証、REST/GraphQL、S3連携など）

  • テスト（unit, e2e: vitest, Cypressなど）

🎯 面談での答え方のコツ

  1. 「概要」→「具体的にやったこと」→「成果 or 工夫」 という流れで話すと説得力UP

  2. 質問が広くても「僕が実際やったケースだと…」で話すと自然

  3. どう忘れても「調べながら最適解を見つけてきた経験」が伝えられればOK！

 

🌍 SSR・SSG・CSRの違いと使いどころ

🔁 SSR（サーバーサイドレンダリング）

  • サーバーでHTMLを生成 → クライアントに配信

  • クライアントはHTMLを受け取って、JSを後からバインド（Hydration）

✅ メリット

  • SEOに強い（GoogleがHTMLを読める）

  • 初回表示が速く感じやすい（HTML先に届く）

🧠 Nuxt3での実装例

  • useFetch()（サーバーでデータ取得 → クライアントに引き継がれる）

ts
const { data: user } = await useFetch('/api/user');

📦 SSG（静的サイト生成）

  • ビルド時にページをHTMLとして書き出す（CDNで高速配信）

✅ メリット

  • 超高速表示（LCP良し）

  • 負荷がサーバーにかからない（スケールしやすい）

🧠 Nuxt3でのやり方

  • defineNuxtConfig で prerender: true にする

  • ページ単位で useStatic() や useAsyncData() で静的取得もOK

ts
// SSGされるページ例
export default defineNuxtConfig({
nitro: {
prerender: {
routes: ['/about', '/posts/1'],
},
},
});

🖥️ CSR（クライアントサイドレンダリング）

  • 初期表示は空のHTML（Loading…）、JSが全部動いてから描画

✅ メリット

  • サーバー関与なし＝自由（API設計や動作が柔軟）

  • SPA的な体験（ページ遷移も滑らか）

🧠 Nuxt3での使い方

  • defineNuxtConfig で ssr: false にすると 完全CSR

  • フォーム送信画面や、認証後の管理画面などに向いてる

⚙️ defineNuxtConfig の ssr: true / false の違い

設定意味
ssr: true（デフォ）SSR + SSGモード。SEOや速度が必要な画面に適する
ssr: false完全SPAモード。NuxtをVue SPAとして使いたいとき
ts
export default defineNuxtConfig({
ssr: false, // 完全CSR（SPA）モード
});

🛠️ Composables と Plugins の違いと役割

📦 composables/ ディレクトリ

  • 共通ロジックを再利用するための関数群

  • 自動インポートされる（useXXX()でどこでも使える）

使いどころ：

  • API取得ロジック → usePosts.ts, useAuth.ts

  • 入力バリデーション → useFormValidation.ts

  • 状態保持・ユーティリティ的な処理

例：

ts
// composables/useUser.ts
export const useUser = () => {
const user = useState('user', () => null);
const setUser = (u: any) => user.value = u;
return { user, setUser };
};

🔌 plugins/ ディレクトリ

  • 外部ライブラリの導入や、Nuxtの起動時に実行したい処理を記述する場所

  • 自動で登録される（.client.ts, .server.tsで実行環境も指定可）

使いどころ：

  • axios, firebase, dayjs などライブラリのインスタンス設定

  • カスタムディレクティブやユーティリティの登録

  • ピニアのプラグイン追加

例：

ts
// plugins/axios.ts
export default defineNuxtPlugin(() => {
const instance = $fetch.create({ baseURL: '/api' });
return {
provide: {
axios: instance
}
};
});

// 使う側では
const { $axios } = useNuxtApp();
$axios('/user');

✅ まとめ（面談で語れるポイント）

  • Nuxt3では SSR/SSG/CSR を柔軟に切り替えられ、ページや要件に応じて最適化できる

  • 状態管理は useState（ローカル）と Pinia（グローバル）で整理

  • 共通処理は composables/ に、外部連携や初期処理は plugins/ に配置する

🔐 認証・認可（Auth）

✅ Middlewareの使い方（defineNuxtRouteMiddleware）

  • ページ遷移時に毎回呼ばれる関数

  • 認証チェックやリダイレクト処理に使える

ts
// middleware/auth.global.ts
export default defineNuxtRouteMiddleware((to, from) => {
const user = useState('user');
if (!user.value && to.path !== '/login') {
return navigateTo('/login');
}
});

  • .global.ts → すべてのルートに適用

  • .ts → ページ側で definePageMeta({ middleware: 'auth' }) で適用

✅ 認証トークンの管理（cookie, localStorage, SSRの注意点）

方法特徴
cookieSSRでも読める。セキュリティ◎（httpOnly推奨）
localStorageクライアントのみで使用可能。簡単だがSSR非対応

SSR対応なら cookie を推奨

ts
// クライアント側でログイン時にcookieを設定（例: JWT）
useCookie('token').value = 'xxx';
ts
// サーバー側のAPIで読み取る（SSR時でもOK）
const token = useCookie('token').value;

httpOnlyのcookieはJSからはアクセスできない（XSS対策になる）

✅ 認可チェックとルーティングガード

  • 管理者ページなどで権限に応じたチェックが必要な場合

ts
export default defineNuxtRouteMiddleware(() => {
const user = useState('user');
if (user.value?.role !== 'admin') {
return abortNavigation();
}
});

🎨 UI周り（Vuetifyなど）

✅ Vuetify3との統合

bash
# インストール
npm install vuetify@next
ts
// plugins/vuetify.ts
import { createVuetify } from ‘vuetify’
import * as components from ‘vuetify/components’
import * as directives from ‘vuetify/directives’

export default defineNuxtPlugin(nuxtApp => {
const vuetify = createVuetify({ components, directives })
nuxtApp.vueApp.use(vuetify)
});


SSR・SSGでの注意点

  • CSSバンドルの設定に注意（nuxt.config.ts の css: ['vuetify/styles']）

  • SSRでレイアウト崩れが起きやすい → サーバー/クライアント両対応の設定が必要

✅ スロット・コンポーネント設計

vue
<!-- BaseButton.vue -->
<template>
<v-btn :color="color">
<slot />
</v-btn>
</template>
vue
<!-- 利用 -->
<BaseButton color="primary">保存する</BaseButton>

  • slot の活用で拡張性と再利用性を両立

✅ スケーラブルなUI設計：Atomic Design

レイヤー役割例
Atoms最小要素Button, Input, Text
Molecules複合要素SearchBar, CardHeader
Organisms意味あるUIの塊UserCard, PostList
TemplatesページのレイアウトBlogLayout.vue
Pages実ページpages/index.vue

🧱 TypeScript活用

✅ Typeの書き方（Props, store, composables）

Propsの型

ts
defineProps<{
title: string
count?: number
}>();

Piniaの型付き

ts
export const usePost = (id: number): { post: Ref<Post | null> } => {
const post = ref<Post | null>(null);
// fetch logic...
return { post };
};

Composablesの型

ts
export const usePost = (id: number): { post: Ref<Post | null> } => {
const post = ref<Post | null>(null);
// fetch logic...
return { post };
};

✅ APIレスポンスの型定義と分割

  • 型ファイルを /types/ にまとめておくと管理がラク

ts
// types/user.ts
export type User = {
id: number;
name: string;
email: string;
};
ts
// composables/useUser.ts
import type { User } from ‘~/types/user’;

export const useUser = async () => {
const { data } = await useFetch<User>(‘/api/user’);
return data;
};


🎯 まとめ：このあたり面談で語れるとGOOD！

  • 認証では middleware + cookie の使い分けが鍵

  • UIは Vuetify + Atomic Design で拡張性高く

  • 型の分離管理や types/ ディレクトリでの整理が実務感を出す

🔧 開発・構築・デプロイ関連

✅ Nuxt3のNitroサーバの特徴

  • 軽量なバックエンドランタイム

    • API・SSR処理をNodeだけでなく Edge functions（Vercel/Cloudflare）でも動作可能

    • デフォルトでサーバーレス構成向き（server/api/*.ts はLambdaライクに動作）

Nitro の特徴：

  • ノンブロッキングで高速

  • デプロイ先に応じた出力（output.public, output.serverなど）

  • preset: 'aws-lambda' などプリセットあり

✅ build・開発関連コマンド

コマンド内容
nuxi dev開発サーバー起動（ホットリロード）
nuxi build本番用ビルド
nuxi previewビルド後の本番プレビュー起動
nuxi generateSSG（静的サイト）出力

nuxi = NuxtのCLIツール（v3系から標準）

✅ AWSへのデプロイ経験（例：S3 + CloudFront）

✅ 静的ホスティング（SSGの場合）

  • nuxi generate で静的ファイル出力 → S3にアップロード

  • CloudFrontでCDN配信 + HTTPS

✅ SSR（動的）なら…

  • nuxi build で出力 → Lambda + API Gateway

  • output: { preset: 'aws-lambda' } 設定でOK

✅ Amplify でもデプロイ可

  • amplify init → amplify add hosting → amplify publish

✅ サーバー側API作成（server/api/xxx.ts）

ts
// server/api/hello.ts
export default defineEventHandler((event) => {
return { message: 'Hello from server API!' }
});

  • /api/hello にアクセスするとJSONが返る

  • サーバーレス的に使えるのでバックエンドなしでAPI構築可能

📊 Core Web Vitals / パフォーマンス対応

✅ 代表的な指標と改善策

指標意味対策例
LCP（Largest Contentful Paint）メイン要素の描画速度nuxt-imgで画像最適化、SSR活用
FID（First Input Delay）初回操作への応答時間JSの最小化、不要なクライアント処理削減
CLS（Cumulative Layout Shift）レイアウトの揺れ高さ指定、フォント遅延防止、画像比率指定

✅ Nuxt3の最適化Tips

  • nuxt-img コンポーネントで画像最適化（遅延読込・サイズ調整）

  • definePageMeta({ keepalive: true }) でページの状態維持

  • nuxt.config.ts で以下の最適化も設定可能：

ts
export default defineNuxtConfig({
components: true,
experimental: {
componentIslands: true // 必要なコンポーネントだけ部分的にSSR
},
vite: {
build: {
chunkSizeWarningLimit: 500,
}
}
})

📌 その他：実務でよく聞かれるやつ

✅ ESLint / Prettier（コードスタイル統一）

bash
npm install -D eslint prettier eslint-config-prettier eslint-plugin-vue
json
// .eslintrc
{
"extends": ["eslint:recommended", "plugin:vue/vue3-recommended", "prettier"]
}

  • CIに組み込んで PR単位で自動チェックすることも多い

✅ バックエンドとの連携

  • 認証：Cookieベース、JWT、OAuthなど（APIでtoken発行＆保持）

  • REST API：useFetch, $fetch で呼び出し

  • GraphQL：Apollo Client連携も可能（plugin化）

  • S3連携：プリサインURLをAPIで取得してアップロード

ts
// APIで署名URL取得 → クライアントから直接S3へアップロード

✅ テスト（unit / e2e）

Unit Test：Vitest（Vue3に相性◎）

bash

npm install -D vitest vue-test-utils


ts
// example.test.ts
import { mount } from ‘@vue/test-utils’;
import Hello from ‘../components/Hello.vue’;

test(‘renders text’, () => {
const wrapper = mount(Hello);
expect(wrapper.text()).toContain(‘Hello’);
});


E2E：Cypress

  • 実ブラウザでの操作確認に◎

  • ログイン処理や遷移などをシナリオテスト

フリーランスエージェントの登録者数が多いランキング｜当サイト調べ
ギークスジョブ
対応エリア・地域東京都・神奈川県・千葉県・埼玉県・愛知県・大阪府・福岡県
支払いサイト25日（月末締め翌月25日支払い）
手数料（マージン）非公開
最高単価150万円
平均単価71.8万円

ギークスジョブの特徴は以下です。

  • 業界実績15年以上、取引企業数3,000社、登録エンジニア数12,000名の実績
  • コンサルタント、営業、参画後のサポートと、3名によるサポート
  • 福利厚生サービスが充実してる
  • 総額最大160,000円の紹介キャンペーンがある
詳細ページ
公式ページ
Midworks
対応エリア・地域東京・神奈川・埼玉・千葉・関西
支払いサイト20日
手数料（マージン）非公開
平均年収238万円UP

Midworksの特徴は、以下です。

  • 福利厚生が半端ない
  • リモートや週３、４案件もあり
  • マージン率が低い

フリーランスとして働きながら充実した福利厚生も受けたい人はおすすめです。

詳細ページ
公式ページ
レバテックフリーランス
対応エリア・地域東京・神奈川・埼玉・千葉・大阪・兵庫・京都・愛知・福岡
支払いサイト15日(月末締め翌月15日支払い)
手数料（マージン）非公開
最高単価125万円
平均単価65.6万円

レバテックはフリーランス仲間からも高評価な安心できる転職支援サービスです。
大きな特徴は何といっても大手エージェントとしての安定感にあります。
求人数は他社を圧倒しています。

  • 登録者数：107,000人※レバテックサービス登録者数(2019年3月)
  • 認知度：業界No.1※2017年4月 クロスマーケティング調べ
  • 年間提案数：103,953件
  • 月間新規案件数680件以上

自分は、単価上げの交渉をしていただき最終的に最初の提示額より15万上げてもらいました。
必須で登録すべきエージェントです。

詳細ページ
公式ページ
エンジニアルート
対応エリア・地域東京・神奈川・埼玉・千葉
支払いサイト30日（月末締め翌月末日支払）
手数料（マージン）10％以下
最高単価180万円
平均単価/平均年収68.9万円/826.8万円

特徴は、

  • 最先端からレガシーな案件まで扱ってるため案件や年代の幅が広い
  • 直接のユーザーや大手企業も多いため、高単価が可能
  • 他社と比べて圧倒的にマージン率が低い

などの特徴があり、アットフォームな雰囲気なので業務委託が初めての人でも安心です。
人気急上昇中のエージェントです。

詳細ページ
公式ページ
フリーランスになる フロントエンドエンジニア
フォローする
プロフィール
hoshi

フロントエンドのフリーランスとして週5フルリモートで働いてます。

営業
↓
Webデザイナー（アルバイト）
↓
Webデザイナー（正社員）
↓
フロントエンドエンジニア（正社員）
↓
フリーランスとして独立しました。

詳細なプロフィールはこちらを参照ください。

フリーランスエージェントとは28社と面談・取材してきました。
↓
【完全版】フリーランスエージェント28社面談を受けた現役が比較・おすすめランキングを作った

このブログでは、自身の経験からフリーランスを目指す方や駆け出しエンジニアの方に向けてWebを仕事にする方法やトレンド情報をアウトプットしています。

・フリーランスエージェント紹介キャンペーン
・転職やプログラミングの悩み相談
・仕事の依頼

など、各種お問い合わせはこちらからお願いします。

フォローする
hoshi
hoshilog

コメント