Javaエンジニア3年目がVue.jsでMarkdownビューアを作ってみた話【Vite + Vue3】
🎯 はじめに：なぜJava以外を学ぼうと思ったのか
私はJavaエンジニアとして3年目になりますが、バックエンドだけでなくフロントエンドの技術もキャッチアップしたいと考えるようになりました。
理由は以下の通りです：
- 業務外でも技術の幅を広げたい
- フロント側の知識があれば、現場でのコミュニケーションや設計にも活かせる
- 個人開発にもチャレンジしたい
そこで今回は、JavaScript（以下JS）での開発に挑戦しました。
🤔 フロントエンドFWの選定
まず、JSで開発するならどのフレームワークを選ぶか？
以下のように比較して、最終的にVue.jsを選びました。
| フレームワーク | 特徴 | 評価 |
|---|---|---|
| React | 実務や転職に強い。Meta製。やや習得難 | ★★★★☆ |
| Vue.js | 学習コストが低く、HTMLに近い記法。日本語情報豊富 | ★★★★★ |
| Angular | Google製。大規模向け。学習コスト高め | ★★☆☆☆ |
| jQuery | もう古い。DOM操作が主で今は使われない | ☆☆☆☆☆ |
| Backbone.js | 完全にレガシー。使う理由がない | × |
✅ Vue.jsを選んだ理由
- HTMLに近くて書きやすい
- とりあえず動くものが作りやすい
- 後にReactにも移行できる応用力あり
- 個人開発にピッタリ
🔧 Vue.jsの構成選定（Vite一択！）
Vueのプロジェクト構築方法もいくつかありますが、今回は以下を選択。
| 方法 | 特徴 | 対象 |
|---|---|---|
| Vue CDN版 | HTMLに直接読み込み。お試し用 | 初心者・試すだけ |
| Vue CLI | Vue2/3対応。やや古い構成 | レガシー向け |
| Vite + Vue | モダン構成、ビルド爆速、ホットリロード | ✅ 今回はこれ！ |
| Nuxt.js | VueのSSR/SSGフレームワーク。本格派 | 中～上級者向け |
💠 作ったもの：Markdownブログビューア
✨ 概要
Markdownとはプレーンテキストで書ける軽量マークアップ言語で、QiitaやGitHubでも使われている書式です。今回のビューアは、そのMarkdownファイルをHTMLに変換して表示するシンプルなWebアプリです。
Markdownで書いた記事を、Vueアプリ上でHTMLとして表示するビューアを作りました。最終的には、Vercelで無料公開 → Qiita/Zennに成果を投稿という流れです。
📌 機能
-
*.mdファイルを読み込んでHTML表示（markedライブラリ使用） - Vite + Vue 3構成
- シンプルなブログUI
- Vercelでデプロイ
🔗 公開先
- 🌐 アプリ: https://vue-markdown-viewer-3fqph5e2f-monkshood00s-projects.vercel.app
- 💻 GitHub: https://github.com/monkshood00/vue-markdown-viewer
🧪 実装ポイント
npm create vite@latest
# フレームワークに Vue を選択
cd プロジェクト名
npm install
npm install marked
🔍 MarkdownViewer.vue
<template>
<div v-html="htmlContent"></div>
</template>
<script setup>
import { ref, onMounted } from 'vue'
import { marked } from 'marked'
const htmlContent = ref('')
// マークダウンファイルを取得して、HTMLに変換
onMounted(async () => {
const res = await fetch('/posts/sample.md') // ここでファイルを取得
const md = await res.text()
htmlContent.value = marked(md) // markedライブラリを使ってMarkdownをHTMLに変換
})
</script>
MarkdownViewer.vueでは、VueのonMountedフックを使ってマウント時に非同期でMarkdownファイルを取得し、markedライブラリでHTMLに変換しています。
🧩 App.vueへの組み込み
<template>
<MarkdownViewer />
</template>
<script setup>
import MarkdownViewer from './components/MarkdownViewer.vue'
</script>
App.vueでは、MarkdownViewerコンポーネントをインポートして使っています。
🧑💻 async と await の解説
async と await は非同期処理をシンプルに扱うためのキーワードです。
-
asyncを関数の前に付けると、その関数は非同期関数として定義され、必ずPromiseを返します。 -
awaitはasync関数内で使うことで、非同期処理の完了を待ってから次の処理を実行します。
例:
async function fetchData() {
const response = await fetch('https://api.example.com/data');
const data = await response.json();
console.log(data);
}
非同期処理のエラーハンドリング
async function fetchData() {
try {
const response = await fetch('https://api.example.com/data');
const data = await response.json();
console.log(data);
} catch (error) {
console.error('エラーが発生しました:', error);
}
}
🚀 デプロイ：Vercelで一瞬公開
- GitHubにコードをpush
- Vercel公式サイトでGitHubと連携
- 対象リポジトリを選ぶだけで即デプロイ完了！
URLが自動発行され、SSLもついています。
🎁 まとめ
- Javaエンジニアでも、フロントに挑戦すべき！
- Vueは学習コストが低く、最初の一歩に最適
- Markdownビューアは個人開発にちょうどよい題材
- 成果は必ず「発信」することで価値が上がる！
🙌 最後に
同じように「JavaだけじゃなくてJSもやりたい」「Vue触ってみたい」という方の参考になれば幸いです。
ご質問・感想などあればコメントください！