FF14の青魔導書って、ゲーム内で目的のスキルを探そうとすると意外と大変なんですよね。
当時の私はそれが面倒になり、「だったら検索できるように作ればいいじゃん」と思い立ちました。
ちょうどその頃、Vanilla JavaScriptを勉強していた事もあり、自分用の青魔導書検索ツールを作り始めます。
そして完成したのが……
と書ければ良かったんですが、途中で原因不明の不具合に遭遇。
結局解決できないまま放置し、3年以上経過していました。
先日ふと思い出して当時のコードを発掘してみたのですが、今となってはVanilla JavaScriptの書き方なんてほとんど覚えていません。
読んでもちんぷんかんぷんでした。
VSCodeでLive Serverを使っていた事すら忘れていました。
今回はそんな、3年前の自分が作ったFF14青魔導書検索ツールを復活させた話です。
更新履歴
2026/06/25
- ホットバー機能追加
- ドラッグアンドドロップ対応
- ローカルストレージ対応
- 右クリックでスキル削除に対応
2026/06/24
- レスポンシブ対応
2026/06/23
- for文修正
- 青魔導書復活
- アクセスカウンター追加
- No.001 水鉄砲を初期表示
※当記事では『ファイナルファンタジーXIV』のゲーム画面を掲載しています。
画像等の著作権は © SQUARE ENIX に帰属します。
FF14の青魔導書が探しづら過ぎた
青魔法って属性だけではなく、攻撃タイプが魔法・斬・打・突の4種類と、更にエーテルコピーといってコピーしたロール（タンク・ヒーラー・DPS）で使用すると強化される技など、とにかく絞り込みが大変なんですよね。
青魔導士専用コンテンツでは、その敵の弱点属性を一々探してスキルにセットしないと攻略できません。
ゲーム上UIでも十分検索は可能ですが、私はどうも使いづらくて、攻撃タイプが打の技…打の技…と探して魔導書を一周する、みたいなことがとにかくざらでした。
でもそういうちょっと癖のあるコンテンツが好きだったので、青魔導士の更新パッチでアチーブメントを取得するくらいにはやってました。
「だったら自分で作るか」と思った経緯
FF14にはまっていた当時、ちょうどFF14に関するブログもやっていました。
今思えばその頃は実際のゲーム時間よりブログをいじってる時間の方が長かったです。
そして何か1つ目的を持ってアクセスしてもらうために、しかも自分でも使いたいツールとして青魔導書内のスキルを簡単に検索できるツールを作ったらいいのでは！？と閃き作り始めたんですね。
パッチ6.5対応ですｗ
今現在は恐らくパッチ7.5程ですが、青魔導書の更新はまだ来てないはずなので現役で使えるはずｗ
当時の私はVanilla JavaScriptを勉強していた
先述しましたが当時はWordpressを使ってみたかった事もあり、FF14のブログを運営してました。
（今ではもう消えてしまいましたが）
私の性格上、ブログの本質は”記事”だという事も忘れ、ひたすらかっこいいサイドバーやら、フロントページでスライドする”よく読まれている記事”のボックスやら、記事内でついてくるヘッダーと目次だとか、そういう事に拘り過ぎて記事が全然増えていかない事態になりがちなんですよねｗ
ほどよくPC生活ではそうならないよう100記事書くまではフロントページを作らない方針ですｗ
まぁとにかくそういう事もあり、当時の私はCSSやVanillaJSも勉強していました。
コピペだと自分の好みの動きにならないとか、そういうのが嫌だったので「自分で1から作りたい」という気持ちから始めたんですね。
初心者向け参考書1冊分を網羅できたあたりで、いよいよ作ってみるか…！！と動き始めます。
結果、このツールは完成目前で放置される事になります。
今見ると意外と頑張っていた（ChatGPT談）
最近人との会話でよくAIが出てきます。
ほどよくPC生活のサムネイルのほとんどはAI出力ですが、ひと昔前にこのクオリティのサムネイルなら一枚あたり数千円払って作ってもらう様な相場観だったと思います。
私は動画制作のオプションとして、千円頂いて作ってました。
今ではお金がかからずに、当時の私よりクオリティの高いサムネイルが数十秒で出力される。
これじゃこういう仕事はなくなっちゃうね、といった感じの会話をしていたところ。
（・・・あれ、前に作ったFF14の検索ツール、直してもらえんじゃね？・・・）
めっちゃめちゃSSD内探索して、なんとデータが残ってたので（ブログ消失とともに消えたと思ってた）チャッピーに評価とついで修正してもらってみよう！！と思い立ちました。
私自身、今となってはJavaScriptなんてほとんど覚えていません。
自分で書いたコードのはずなんですが、ふわっとしか内容が理解できません。
ところが、チャッピーに言わせると意外としっかり作ってあったそうで。
スキル情報はJSONで管理していて、（このデータづくりは結構ちゃんと覚えてる）
- スキル一覧の自動生成
- 属性による絞り込み
- 攻撃タイプによる絞り込み
- エーテルコピーによる絞り込み
- 詳細情報の表示
など、一通りの機能は実装されていました。
そして何より、自分らしいなと思ったのが見た目への拘りです。
私はFF14ブログでのやらかしと同じように、UIや操作感に無駄に拘る癖があります。
このツールも単なる検索ツールではなく、FF14の青魔導書そのものをブラウザ上で再現しようとしていた形跡がありました。
タイトルも「青魔導書セットスキルジェネレータ」となっていますし、ドラッグ＆ドロップでスキルをセットするような構想だったんだと思います。
（検索する機能しか実装されていませんでしたがｗ）
なんとなく思い出したのが、スキル画像を選択した際に画像がへこんだり、D＆Dで移動すると元のスキル位置が空欄になる構想があったと思います。
今見るとかなり背伸びしているように感じますが、3年前の自分なりに本気で作ろうとしていた事だけは伝わってきました。
UIにとにかく拘った
今改めて見返して思ったのですが、当時の私はとにかくUIに拘っていたようです。
配色も青魔導書にかなり寄せてますし、スキル情報なんかはおそらくマウスホバー時に出てくるスキル情報ウィンドウを再現しようとしたんだと思います。
「攻撃タイプ」や「攻撃属性」の緑色も恐らくゲーム内で使われている色を参考にしていたんだと思います。
思います、思いますで情報が不確かで申し訳ないんですが、何分もう3年以上前の事なので全然覚えてませんｗ
と思っていたらそうであろう画像が出てきました。
結構健闘していますね！
やはりマウスホバー時のポップアップのデザインをパクってました！
こういう所に妙に拘り過ぎて、力尽きる…
自分で書いててあぁ、俺っぽいなぁと思うのでした。
原因不明の不具合で挫折
ここまで見ると、「じゃあ完成したんだね」と思われるかもしれません。
ところが完成しませんでした。
当時の私はVanilla JavaScriptを勉強しながら作っていた事もあり、途中で発生した不具合を解決できなかったのです。
何が原因だったのかはもう覚えていません。
ただ、動く時と動かない時があった記憶だけは残っています。
一覧表示はできていた気もする。
検索も途中までは動いていた気がする。
でも何かがおかしい。
そんな状態だったような気がします。
当時は今のようにChatGPTもありませんでした。
エラーメッセージを見ても意味が分からず、Google検索を繰り返しても解決しない。
プログラミング経験も浅かったので、どこが悪いのか検討もつきませんでした。
そして最終的に、「まぁ使わなくても困らないか」となり、そのまま放置。
気付けば3年以上が経過していました。
今思えば、あと少しだったんですけどね。
当時の私にそんな事を知る由もありませんでした。
久しぶりにコードを開いた結果
せっかく発掘したので、久しぶりに動かしてみる事にしました。
index.htmlをダブルクリックでEdgeで動かしてみました。
うんともすんとも言いません。
…なんで？
チャッピーになんで？と聞いたらVSCodeのLive Server使わないとダメじゃない？との事。
あーーーーそうだ、そうだった気がする！
VSCodeっていうMicrosoftから出てる無料の開発環境で作ってて、その拡張機能を使わないとうまく動かないんだ。
そこから無事プロジェクトを開く事には成功したのですが、今度はコードが読めません。
本当に読めません。
自分で書いたコードのはずなのに、
「これ何してるんだろう……？」
JavaScriptなんて最後に触ったのが3年以上前です。
変数名や処理の流れを追いながら、
「なるほど、当時の俺はこういう事をやりたかったのか」
と、他人のコードを読むような感覚で解析する羽目になりました。
それでも見返しているうちに、当時の記憶が少しずつ蘇ってきます。
ドラッグ＆ドロップでスキルをセットしたかった事。
FF14の青魔導書そのものを再現したかった事。
検索ツールのはずなのに、いつの間にか大掛かりなツールを作ろうとしていた事。
これ、あと少しで完成してたんじゃ…？
当時は原因不明だと思っていた不具合も、今なら何とかなるかもしれません。
そう思い、試しにChatGPTへコードを貼り付けてみる事にしました。
ChatGPTにコードを見せてみた
正直、最初はそこまで期待していませんでした。
3年以上前に書いたコードですし、自分で見ても何をしているのか分からない部分が沢山あります。
それでも駄目元で、当時のJavaScriptコードをChatGPTへ貼り付けてみました。
すると最初に返ってきたのは意外な言葉でした。
「思っていたよりちゃんと作れている」との事。
おお、マジで？
「根本が間違ってるので作り直しましょう」とか言われるかと思った。
しかし実際には、
- JSONでスキル情報を管理
- 一覧を自動生成
- 検索機能を実装
- 詳細画面を表示
と、基本的な部分は既に完成していました。
「じゃあ原因直してコード出力して」
あっという間にコードが出力されました。
どこが直ったのかさっぱりわからん。
どこ直したの？
3年放置させられた原因はコイツ
問題のコードがこちら。
for (i = 0; sInfos.magicInfo.length; i++)当時の私は（今の私も）全く気付いていませんでしたが、よく見ると条件式がおかしいんです。
正しくはこちら。
for (let i = 0; i < sInfos.magicInfo.length; i++)簡単に言うと、sInfos.magicInfoには青魔法の一覧が入っています。
そしてこのfor文は
「1番目のスキルを確認」
↓
「2番目のスキルを確認」
↓
「3番目のスキルを確認」
↓（省略）
「最後のスキルを確認」
という処理を繰り返すための命令です。
本来なら”最後のスキルに到達したら終了する”命令文なんです。
ところがその終了条件を書き間違えていたため
「まだ次のスキルある？」
↓
「まだ次のスキルある？」
↓
「まだ次のスキルある？」
の無限ループに陥っていました。
初歩的なミスですが、当時の私は数日頭を悩ませた挙句、放置しました。
修正したら普通に動いた
修正後。VSCodeのLive Serverを起動して実際に開いてみます。
すると…
普通に動きました。
本当に普通にｗ
一覧表示も問題無し。
検索機能も問題無し。
スキル詳細も問題無し。
3年以上放置していた原因が、たった数行の修正で解決してしまいました。
当時の私は数日悩み、Googleで検索を繰り返し、コードを書き直したりとにかく試行錯誤しても届かなかったんです。
それが2026年、AIが台頭してきた今。
ChatGPT「コードを貼ってね」
↓
ChatGPT「ここおかしいから直したよ」
↓
動いた。
鼻で笑っちゃいましたね。
ふふって。
3年前の自分に伝えたい。
2026年。
なんの努力もしなかったけど、動いたからね。
今見るとレスポンシブ未対応がもったいない
ただし、今見るとかなりもったいない部分もあります。
それがレスポンシブ対応です。
当時の私はデュアルディスプレイ環境でFF14を遊んでいたため、
メインディスプレイにFF14、サブに青魔導書ジェネレータ。
その使い方しか想定していませんでした。
そのため、PCの横長画面ではそれなりに使いやすいのですが、スマホで見るとかなり厳しいです。
今考えると、FF14を起動しながらスマホで攻略情報を見る人も多いはずなので、ここは最初から考えておくべきでした。
ただ、これはこれで記事のネタにもなりそうです。
せっかく3年ぶりに復活したツールなので、そのうちスマホでも使いやすい形に直してみたいと思います。
もちろん、当時やりたかったであろうドラッグ＆ドロップでスキルをセットできる機能も添えて。
まとめ
3年以上前に作ったFF14青魔導書検索ツールを、久しぶりに発掘してみました。
当時は原因不明の不具合に悩まされ、結局完成できないまま放置してしまいましたが、実際の原因はたった1行のfor文でした。
今となってはVanilla JavaScriptの書き方もほとんど忘れてしまいましたが、コードを見返してみると意外と頑張って作っていたようです。
UIをFF14風に寄せたり、ドラッグ＆ドロップによるスキルセット機能を構想していたり、今見ると「いかにも自分らしいな」と思う部分が沢山あります。
挫折、そして放置まで含めてね。
そして何より驚いたのは、3年前に挫折したコードが今でもちゃんと動いた事です。
当時の自分があと一歩の所まで作っていたと思うと、少し嬉しくなりました。
今後はレスポンシブ対応や、当時やろうとしていたドラッグ＆ドロップによるセットスキル機能の実装にも挑戦してみたいと思います。
3年越しに復活した青魔法検索ツール、良かったら使ってみてください。
OR検索のみ対応だけどねｗ
コメント
青魔導書ジェネレータは昔の個人サイト感出してみましたw
レスポンシブ対応✌