necco Note
髙木 菜美
necco Note
neccoに実務未経験で入社し、アシスタントエンジニアとしての2年間で身につけたスキルと意識の変化
- Careers
アドベントカレンダー19日目は、エンジニアの髙木です。
実務未経験でneccoにアシスタントエンジニアとして入社してから2年が経過し、現在はエンジニアとして勤務しています。
今回の記事では、業務を通してスキルアップできていると感じていること、意識が変わったことなどについてまとめました。
- アシスタントエンジニアで応募したい
- アシスタントエンドエンジニアの仕事が気になる
- neccoに入社したらどのようなプロジェクトに携われるか知りたい
など、少しでもneccoへの採用応募に興味がある方の参考にもなると嬉しいです。
アシスタントの2年間を振り返ろうと思った理由
エンジニアに昇格し、早いもので８ヶ月になりました。
最近では、メインで実装を担当するプロジェクトも増え、より責任感を感じながら仕事をしています。
アシスタントエンジニアの時には、実装しても社内の実装レビューをなかなか通過できず、「エンジニアに向いていないかも」と、心が折れそうになったことも何度もありました。
しかし、アシスタントエンジニアとして過ごした2年間の経験が、現在の自分を作る大きな支えとなっていることを、今改めて実感しています。その経験を振り返ることで、自身の成長を再確認し、これからのさらなるステップアップに繋げたいと考えています。
そこで自身のターニングポイントと感じるプロジェクトを振り返りながら、今までの意識の変化とスキルについてまとめることにしました。
ターニングポイントとなったと感じるプロジェクト4選
neccoに入社してから携わったプロジェクトは、WordPressや、Astro、Next.jsなどのフレームワークで構成したサイトなどさまざまです。
その中から、自分自身のターニングポイントとなったと感じる4つのプロジェクトに触れながら反省点と学びについてまとめました。
1. NPO法人「アーツセンターあきた」コーポレート・オウンドメディアサイト
関連：【制作実績】NPO法人「アーツセンターあきた」コーポレート・オウンドメディアサイト
neccoに入社して初めて実装に参加し、特に思い入れがあるプロジェクトです。このプロジェクトは、WordPressを使用しており、記事や実績ページなどのCMSを活用したページやプライバシーポリシーの実装を主に担当しました。
特に、データ同士の紐付けに苦戦しました。
例えば、メンバープロフィールを管理するカスタムポストのデータとWordPressのユーザー情報を関連付ける処理で、投稿者のプロフィールを取得・表示したり、メンバープロフィールの詳細ページにはそのメンバーが関わった実績や記事を表示する機能を実装しました。
反省点
反省点として、以下が挙げられます。
- 公開後の運用のことを考えて実装できていなかったこと
- メンバープロフィールの出力条件が複雑であり、ローカル環境では検証を行ったが、テストサイトに反映していなかったため、実装レビューが円滑に進まなかったこと
- 更新マニュアルの作成も担当したが、読む人のことを考えられていない書き方になっており、何度もフィードバックをいただいたこと
公開後の運用のことまで考えられていない実装をしていたため、実装後に行われる、実装レビューを通過するのに苦労しました。何度もフィードバックをいただきながら改善しました。
プロジェクトを通して学んだことから、心がけていること
このプロジェクトを通してウェブサイトを見る人のことだけではなく、運用する人が運用しやすい構成にする大切さを学びました。この学びから、現在は以下を気をつけて実装するようにしています。
- 運用のことを考慮し、管理画面の見やすさなど、カスタマイズで改善できる箇所は改善する
- WordPressの場合、エディタはできる限り、フロント側の表示に合わせる
- 社内レビューでは、特定条件の表示・非表示を一目で確認できるよう準備してから依頼し、円滑に進められるようにする
- 更新マニュアルは、WordPressを知っているという前提を忘れ、初めて操作する人でもわかるように作成する
2. 「CYDAS PARTY 2023」イベントサイト
関連：【制作実績】「CYDAS PARTY 2023」イベントサイト
初めて1人で任せていただいたLPの実装です。LPのトップページとお問い合わせ完了画面の2ページの実装を担当しました。
ページ数自体は少ないものの、セクションの境目にある円形のデザインや、最大値を設定した際のパーツの位置調整など、細かな部分で苦戦しました。また、セクションごとの出現アニメーションやクラッカーの表現などはライブラリを利用しながら実装しています。
イベント用のLPということで公開までのスケジュールが限られていましたが、最終的にはエンジニアの佐藤さんにフォローしていただきながら、なんとか完成させることができました。
反省点
反省点として、以下が挙げられます。
- レスポンシブに対応するレイアウト調整に時間がかかった
- イベントサイトの特性上、タイムテーブルの追加が想定されたものの、単に追加するだけでは対応できない構造で実装していたため、追加する際に調整が必要になった
- スケジュール通りに進めることができなかった
ほぼ1人での実装でしたが、レイアウトの実装に苦戦し、時間がかかってしまったことでスケジュールギリギリになりました。実務での実装経験も足らず、neccoのデザインパターン（左右の余白など）も掴めていなかったことも原因と考えています。
プロジェクトを通して学んだことから、心がけていること
このプロジェクトを通して、サイトの特性を理解し、項目の追加など想定される更新を予測し、その上でコードを組む配慮が大切なことなどを学びました。この学びから以下を気をつけるようにしています。
- タイムテーブルなど途中での追加に対応できる実装を検討する
- デザインをしっかり見渡すことで実装のイメージを先に立てる、特にスマホとPCの中間サイズなど、デザインデータを作成していないサイズのものは特に注意する
- 自分を過信しない、余裕をもったスケジュールを立てる
スケジュールに関しては、デザインとの兼ね合いもあるため、プロジェクトによりけりなので都度調整していますが、心がけとして持つようにしています。
3. AWS活用・DX支援「Serverless Operations」コーポレートサイト
関連：【制作実績】AWS活用・DX支援「Serverless Operations」ブランドデザイン・コーポレートサイト・会社資料
初めてAstroで実装したプロジェクトです。CMSには、microCMSを採用しています。microCMSの設定はCTOの佐藤さん、WebGLの表現は代表の阿部さん、レイアウトの実装は当時アシスタントエンジニアだった私ともう1人が担当し、総動員で実装しました。
見出しなどテキストに白や青の帯が引かれているデザインがあり、CMSから取得している箇所は、どんなテキスト数が入っても綺麗に見えるように注意するなど、CMSで取得したコンテンツに留意した上で実装する場面もありました。線を使ったグリッドデザインで、デザイン通りに再現するのに苦戦しました。
現状、今まで実装した中では一番レイアウトが難しい実装だったと感じています。
反省点
反省点として、以下が挙げられます。
- set:html を使用せずに slot を多用した結果、コンポーネント側の条件分岐が増え、構造が複雑化してしまった
- 似たレイアウトのパーツを1つのコンポーネントで処理したことで、パターンや props が増え、他のエンジニアにとって把握しづらい構成になってしまった
- 特定の条件でしか使用できないコンポーネントを作成していた（例：<ul> や <ol> の直下でしか使用できない <li> のコンポーネントなど）
「2回以上繰り返すコードは基本的にコンポーネント化する」というのを意識して実装を進めていましたが、コンポーネント化を意識するあまり、構造がやや複雑化してしまった点を反省しています。
関連
プロジェクトを通して学んだことから、心がけていること
コンポーネント化はパーツを再利用でき、便利では反面、使い方次第で把握しづらくなるというのは学びでした。この学びから、現在は以下を気をつけて実装するようにしています。
- slotは極力使用せず、propsやset:htmlとして値を渡す構造する
- 似たレイアウトでも、複雑化を避けるため一旦検討する。条件分岐が多い場合や構造変更が必要なら、統一せず別コンポーネントとしての作成も検討する
- コンポーネントはどこでも使える構造にする（例：<ul>や<ol>の直下でしか使えない<li>はコンポーネントとして作成しない）
4. 株式会社 Sさま WordPressサイト
【制作実績】非公開
実績は残念ながら非公開のため掲載することはできませんが、メインで実装を担当し、もう1人のアシスタントエンジニアと2人で実装したプロジェクトです。主にサイト全体の実装、構成の検討などを担当しました。
当時、12月の体調を崩しやすい時期の実装で、1人がダウンしてしまい、担当箇所をフォローしながら途中からは1人でレイアウトの実装〜アニメーションの設定、マニュアルの作成まで担当しました。よりプロジェクトに対する責任感を高めることができたプロジェクトです。
反省点
反省点として、以下の点が挙げられます。
- メンバー間での WordPress 知識の差を正確に把握できておらず、適切なフォローが遅れたこと
- デザインのない中間サイズの余白などメンバーごとで異なる実装をしており、調整が必要になったこと
- 各担当ページごとに実装を進めた結果、一部で他のページに影響を与えてしまう構成となり、その問題に気づくのが遅れて修正が必要になったこと
- メンバーの体調不良などの不測の事態を想定したバッファを設けていなかったため、休日出勤を含むスケジュール調整が必要になったこと
とある構成が、他のページに影響を及ぼしていることに気がついたのは、実装がほぼ完了した段階でした。このため、広範囲にわたる修正が必要となりました。また、デザインを作成していないスマホとPCの中間サイズの余白などが実装段階で担当者によって揺れており、調整が必要になりました。
早い段階で声を掛け合っていれば気づけたことであり、パーツや構造に関する情報共有が十分ではなかったこと、実装を先導する立場としてスケジュールや実装のフォローなどが足りていなかったことなど、当時はまだアシスタントエンジニアとしてではありましたが、後輩への配慮が足りていなかったと反省しました。
プロジェクトを通して学んだことから、心がけていること
このプロジェクトでは、主にチームワークやスケジュール管理などの学びがありました。その学びから、現在は以下のことを気を付けて実装をするように心がけています。
- 他のメンバーによる実装部分も定期的に確認し、その実装方法も把握しながら、必要に応じてレイアウトを統一しておく。
- 他のメンバーの実装方法で「これはわかりやすい！」と思ったものは積極的に取り入れる
- スケジュール通りに進めるのはもちろんのこと、体調管理もしっかり気を付ける。（特に冬は要注意！）
2年間の実装経験を経て、意識の変化とスキルアップしたと感じる4つのこと
1. 実装前に全体像を把握し、仕様の検討・工数管理するようになった
以前は闇雲に、「まずはやってみよー！」と実装を開始していたため、全体像を把握できておらず、スケジュール管理がうまくできていませんでした。
neccoでは、デザインと実装が同時に進行する場合もあるため、毎回できているルーティンではありませんが、新規のプロジェクトであれば、下記のような流れで進めるようにしています。
- 定例ミーティングの議事録やプロジェクトシートなどを確認し、概要を把握する
- Figmaでデザインをざっと確認し、作業用のメモを作成
- Notionに実装の際に必要になると思われる情報をまとめておく。Slackでのやりとりなど、個人的なメモ感覚で作成。
- 整理した情報の中で仕様についてなど、不明点があればディレクターやデザイナーに事前に確認する
- 実装工数をざっと立てる（Notionでデータベース化してスケジュールを整理する or Asanaで期日を設定する）
- 実装を開始する
全体像を把握することで、コンポーネントできそうなパーツの事前確認や、仕様について事前に社内で相談することができ、把握できていない時に比べ、スムーズに実装を進められるようになりました。
2. サイトを運用する人のことを考えて、使いやすさも考慮した上で実装できるようになった
以前は「デザインを再現できていて公開できればOK！」と運用のことまで考えた実装を行えておらず、配慮が足りていなかったと思います。WordPressの実装を経験して、更新しやすくすることでウェブサイトが生きると感じています。
特にCMSを使用したウェブサイトでは、管理画面の使いやすさを考慮し、ウェブサイトを更新しやすいような実装を心がけるようにしています。
例えば、以下のような点を配慮して実装しています。
公開後の運用を考え配慮していること
- 複雑な構成はできるだけ避ける。入力の手間が増えそうなページは入力方法も想定した上で実装する
- 入力項目は、わかりやすい名前を検討する（客観的に考えることが大切）
- 更新マニュアルを作成するときは、できるだけ無駄を省く（情報の混乱を防ぐ）
更新マニュアルの作成のコツとポイントについては、以下のブログでまとめています。ぜひこちらもご覧いただけると嬉しいです！
関連：ウェブサイト運用の不安を軽減する更新マニュアル作成のコツとポイント
WordPressの場合に配慮していること
- エディタとフロントの表示をできる限り合わせる
- エディタのブロックには見出しをつけて分かりやすいようにする
- 管理画面の記事一覧など管理画面をカスタムして、必要に応じて表示条件を変更する（例えば、メンバープロフィールは写真設定漏れがないようにサムネイルを管理画面一覧に表示するなど）
- カスタムポストや特定のページで使用するカスタムタクソノミーが、他のページに影響しないような作りにできているか注意して確認する（複数人で実装する場合は特に注意する）
先ほどご紹介したプロジェクトの中でも、特に「アーツセンターあきたさま」は公開後も記事の更新をマメにしていただいており、当時社内レビューを乗り越えるのが大変だったことなど吹き飛ぶほど、嬉しく拝見しています！
今後も公開後の運用のことまで考えた実装を心がけていきたいです。
3. ターミナルなどのエラーに動じず、解決策を調査・検証できるようになった
以前はエラーが発生すると、すぐに焦って「どうしよう、何をすればいいのか分からない…」と混乱しがちでした。
問題が発生した経緯や試行錯誤の内容をメモせず、手当たり次第に解決を試みるという非効率な方法を取ることが多かったため、「何を試して、どうなったのか」を正確に言語化できませんでした。その結果、先輩エンジニアに質問しても状況を適切に伝えることができず、解決が遅れることもよくありました。
しかし今では、「まずはエラーメッセージを読む」という基本から取り組んでいます。エラーメッセージには、問題の原因が隠されており、内容をしっかり読むことで解決策に近づくことができます。英文のエラーに直面してもパニックになることはなくなり、冷静に対処できるようになっています。
また、ひとつひとつ考えられる原因を地道に潰していくことが、エンジニアとして重要な姿勢だと実感しています。以前は「エラーは悪いものだ」と捉えていましたが、今ではエラーを怖がることなく、前向きに向き合えるようになりました。
公開前にエラーを解消することの大切さを意識し、日々の実装ではコンソールのエラーメッセージを確認する習慣が身についています。
時々、ローカル環境でビルドを行わずにそのままGitHubへプッシュしてしまうことがあります。もし、その時にビルドが通らなければ、赤い警告ラインとともにエラー通知がSlackへ流れる仕組みにしています。
このような場合、あえて明るいリアクションをSlackの通知に付けるようにしています。
エラーに気づいて調査・対応していることを他のメンバーにさりげなく伝えるという意図もありますが、何より自分のモチベーションを維持するためです。
エラーで落ち込むことなく、前向きな気持ちで対応するよう心がけています。
4. 実装レビューでのフィードバックが減り、以前よりもスムーズに通過できるようになった
neccoではウェブサイトの実装後に「実装レビュー」「デザインレビュー」「コンテンツレビュー」など、複数の社内レビューが実施しています。
以前は実装レビューをなかなか通過できず、何度もフィードバックをいただいては修正を繰り返す日々でした。何度直しても通過できず、正直、心が折れそうになることもありました。
しかし最近では、その苦戦していた実装レビューをスムーズに通過できるようになり、1回で「OK」をもらえた時には自分自身の成長を感じます。neccoに入社してからの中で、一番と言っていいほどの嬉しい変化です。
「OKです🚀 実装お疲れ様でした！」と言っていただけるたびに「ほっ」とします。
実装レビューだけではなく、デザインレビューでのフィードバックも以前より指摘が減ったと感じています。デザインを実装でしっかり再現できるようになってきているという自信につながっています。
また、デザインを忠実に再現した実装は、レビュー担当者の負担も減らすことができるため今後も着実に実装をしていきたいと思います。
さいごに
入社してから実装した4つのプロジェクトでの反省点を振り返り、意識できるようになったこととスキルアップできたと感じることについてまとめました。
正直何度も心が折れそうになりましたが、メンバーの支えもあり、今までneccoでエンジニアとして続けることができました。これからも今まで学んだことを意識しながらプロジェクトに関わり、さらに意識を高めて精進したいと思います！
また、プロジェクトの実装以外にも、運用・保守業務や、入社課題などについてまとめた記事もあります。ぜひ併せてご覧いただけると嬉しいです。
明日のアドベントカレンダーもお楽しみに🎉
📮 お仕事のご依頼やご相談、お待ちしております。
お仕事のご依頼やご相談は、お問い合わせ からお願いいたします。
🤝 一緒に働きませんか？
下記の職種を募集中です。より良いデザイン、言葉、エンジニアリングをチームで追求していける方をお待ちしております。詳細は 採用情報 をご覧ください。
🗒 会社案内資料もご活用ください。
弊社のサービスや制作・活動実績、会社概要、ご契約など各種情報をまとめた資料をご用意しています。会社案内資料 からダウンロード可能ですので、ぜひご活用ください。
（2024年11月時点）
髙木 菜美
Nami Takagi
秋田県大仙市生まれ。小さい頃から花火の音を聞いて育つ。高校卒業後、地方銀行へ就職。6年目を迎えた頃、友人が店を持ったタイミングでウェブ制作の勉強を始める。neccoの存在を知り、阿部さんにTwitterでDMを送ったことがきっかけで2022年4月より参画。好きなものはライブ、V系、舞台、お酒、猫。憧れは神田沙也加。ダイエットはいつもやるやる詐欺で延期している。
