Go to Qiita Advent Calendar Top
LoginSignup
13
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

Day 22

NEXWAY Advent Calendar 2025

@jyascoin株式会社ネクスウェイ

Rubyしか学んでいなかった未経験エンジニアが Vue / Nuxt / TypeScript 開発をするにあたってやったこと

Last updated at Posted at 2025-12-22

こんにちは！
「株式会社ネクスウェイ Advent Calendar 2025」22日目担当の @jyasco です😺

今年4月に未経験エンジニアとして入社し、気づけば半年以上が経ちました。

入社当初の自分のスキルセットは、Railsを使った簡単な個人開発経験のみでした。
JavaScriptは最低限触ったことがある程度で、
現在実務で使用しているVue / Nuxt / TypeScript といったフロントエンドのフレームワークは未経験の状態でした。

そんな私がフロント開発を行うにあたってやってきたことを振り返っていきます📝

🌸4~6月

最初の1ヶ月は、サービス理解のための研修やバックエンドのタスクが中心で、
フロントの開発にはまだほとんど関わっていませんでした。
5月からはバックエンドだけでなく、簡単なフロントエンドのタスクをやらせていただく機会がありました。
簡単なタスクといっても、入社前までVueやNuxt、TypeScriptを触ってこなかったため、
タスクを進めながらキャッチアップしていく必要がありました。

① Udemy受講

Udemyからやり始めたのですが、今振り返ると、最初から公式チュートリアルをやり込む方が全体像を掴みやすかったかなと思います。

② Vue / Nuxt のチュートリアル

実際にコードを書いて試せるのでとてもわかりやすかったです。
また、ありがたいことに先輩にお時間をいただき、実務コードで例を見せていただきながら学習できたのでとても理解が深まりました。

🌻7~9月

この辺りからマイグレーション、API作成、画面作成、API連携といった新機能一連のタスクを任せていただく機会があり、フロントを書く機会が多くなりました。
一連の流れの中で、画面ができていったり、実際に動くものを作るフロント開発がとても楽しく、"好き"だと気づきました💡

①TypeScriptキャッチアップ

静的型付け言語の経験がなく、型の扱いやコンパイルエラーなどTypeScriptの知識不足を痛感し以下の書籍や動画教材でのキャッチアップを始めました。

初学者にとってもわかりやすい内容でした🫐
実際にコードを書いて試すことで理解が深まると思います。

全くの初学者の時に見た時は難しく感じたのですが、書籍を読み終えた後には理解できるようになっていました。

②とにかくコミット

学習したことは、実際に実務で使ってこそ身につくと実感しました。

そのため、なるべく多くのタスクに着手し、
フロントのコードを書く機会を意識的に増やすようにしました。

🍂10~12月

バックエンドの実装もありますが、フロントエンドの方をメインで任せていただけるようになってきました。
新機能開発においてフロント・バックエンドで担当を分ける際、
フロント側を担当させていただくことも増え、
入社して半年ほどですが 今が一番開発を楽しいと感じています☺️

一方で、フロントの難易度が高いタスクを
スピーディーにこなすにはまだまだ知識と経験が足りないと感じ、
「もっとフロントスキルを磨きたい🔥」と思うようになりました。

①0から作ってみる

またまたありがたいことに、先輩にペアプロなどフロント強化のためのお時間をいただけることになり、
その中でsandboxを使用して0からアプリを作ってみる機会がありました。

参考にするものを決めて、

  • ユースケース／エラーケースの洗い出し
  • 画面設計
  • 実装

までを一通り行ったのですが、
このとき自分に特に足りていなかった点に気づきました。

1️⃣言語の扱いに慣れていない🤯

入社前はほぼ Ruby しか触ったことがなく、実務では AI の補完に頼る場面も多かったため、
自力で書くと無意識に Ruby の書き方をしてしまう ことが多くありました。

後置ifを書いてしまったりundefinedとnilが混同したり配列への追加で<<を使ってしまったりと細かい混乱は色々ありましたが、
特に多かったのが次の2つです。

1.return忘れる問題

ruby
def admin_name(user)
  user.admin? ? "管理者" : "一般"
end

admin_name(user)
# => "管理者" or "一般"
typescript
function adminName(user: User): string {
  user.isAdmin() ? "管理者" : "一般";
}

adminName(user);
// => undefined

正しい書き方

function adminName(user: User): string {
  return user.isAdmin() ? "管理者" : "一般";
}

2.関数呼び出しで()忘れる問題

ruby
def allow_access
  puts "OK"
end

allow_access
# => "OK"
  • Ruby では () は省略可能
  • メソッド名を書くだけで呼び出しになる
typescript
function allowAccess() {
  console.log("OK");
}

allowAccess;
// => 何も起きない

やりがちな例

ruby
def can_access(user)
  user.admin?
end

if can_access(user)
  allow access
end
typescript
function canAccess(user: User) {
  user.isAdmin();   // return忘れ
}

if (canAccess) {    // ()忘れ
  allowAccess;      // ()忘れ
}
  • canAccessは関数オブジェクトなのでtruthy
  • if文は常にtrue
  • allowAccessは実行されない

正しい書き方

typescript
function canAccess(user: User): boolean {
  return user.isAdmin();
}

if (canAccess(user)) {
  allowAccess();
}

入社前に Ruby を学んでいた頃から「Ruby から入ると他の言語で苦労する」とよく聞いていましたが、当時は正直あまりピンときていませんでした。

実際にフロント開発を始めてからは
「Ruby ではよしなにやってくれてたのに！」
と思う場面もありましたが、

今では

  • コンパイル時に型をチェックしてくれる
  • 実行前にエラーを教えてくれる

そんな 紳士的な TypeScript にむしろ安心感と魅力を感じています🦸‍♂️✨

2️⃣CSS への苦手意識🎨

普段の実務では、共通の SCSS クラスを組み合わせて実装することがほとんどでした。

そのため、0から CSS を書こうとした際に、

  • どのクラスを自分で定義すればいいのか分からない
  • 子要素へのスタイル適用、セレクタの指定方法が分からない
    など、かなり手が止まってしまいました。

そこで、

  • ブラウザの開発者ツールで、どの要素にどのスタイルが当たっているかを確認する
  • 既存画面の CSS を読みながら真似して書いてみる
  • 分からないことは都度調べる

といったことを繰り返すことで、
「CSS は試しながら調整していくもの」 という感覚を掴めるようになりました。

結果的に、実務コードを読む際にも「なぜこのスタイルになっているのか」を開発者ツールで追いながら理解できるようになり、CSS に対する苦手意識がかなり減ったと感じています。

3️⃣リファクタリングの大切さ✨

実務ではすでにコンポーネントやコンポーザブルが整備されており、
それらを使いながら実装することがほとんどでした。

しかし、0から機能を作る際に、
ロジック・状態管理・表示処理をすべて1ファイルに書いてしまい、
コードがすぐに読みにくくなってしまいました。

そこで、

  • 型定義や状態管理（ref など）を、参照頻度の低いものからコンポーザブルに切り出していく
  • 表示用のコンポーネントとロジックを分離する
  • 複数で使用されているロジックは共通化する

といったリファクタリングの進め方を教えていただきました。

この経験から、
「最初から綺麗に書こうとするより、まず動かしてから整理する」 という意識を持つようになり、実務でも切り出せそうな箇所を自然と探しながらコーディングできるようになりました。

②ひたすらコミット精神は変わらず

実務でコードを書く機会を増やそうという意識は、10~12月に入ってからも変わりませんでした。

その結果、コミット数も以下のように増えていきました。

  • 4〜6月：平均 90コミット / 月
  • 7〜9月：平均 177コミット / 月
  • 10〜11月：平均 237コミット / 月

今では意識しなくても自然とコードを書く時間や機会が増え、
開発そのものを楽しめていると感じています。
また、コードを書く機会が多いほど学習した点と点が結びつき、身につく実感が得られる機会が増えたように思います。

自己研鑽の面においては、フロント関連で積読している書籍が多いため、今後も少しずつ消化していきたいと思います🔥

💁まとめ

入社当初は、全くの未経験から始めたフロントエンド開発がこんなに楽しいものだと思っていませんでした。
入社後すぐに幅広い経験をさせていただき「好き」をみつける機会をいただけたこと、「やりたい！」と言ったことを応援してもらえる環境にとても感謝しています。

同じ境遇の方の参考になれば幸いです🤝
最後まで読んでいただきありがとうございました！

株式会社ネクスウェイ Advent Calendar 2025では明日以降も、開発メンバーがそれぞれの「好き」と「学び」を自分の言葉で綴っていく予定です。

明日 23 日目の記事は、同じくネクスウェイ開発メンバーの @K-Chan41 さんです。

引き続き、お楽しみください🎄

13
3
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
13
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?