https://blog.nflabs.jp/entry/2026/03/27/170000

はじめに

こんにちは。株式会社エヌ・エフ・ラボラトリーズ（以下、NFLabs.）で学生インターンをしている矢部です。

NFLabs.では事業の1つとして、セキュリティ人材の育成を目的とした学習コンテンツやプラットフォームの開発を行っています。私はその中で、主にシステム開発に取り組んでいます。

本記事では、NFLabs. の長期インターンシップについて紹介します。

バックグラウンド

修士1年から本インターンに参加しています。大学では情報工学を専攻しており、セキュリティやネットワークを主な研究対象とする研究室に所属しています。

研究では主にDNSに関するデータ収集と分析に取り組んでおり、本格的なWebアプリケーション開発経験はあまりありませんでした。

参加動機

将来の進路として、情報セキュリティ分野に関心があり、セキュリティエンジニア育成を目的とした学習プラットフォームの開発は自身の知見に直結すると考えました。

また、開発の実務経験に不足を感じていたため、アプリケーション開発やクラウド環境に触れる機会が欲しいと思っていたところ、社員の方との相談次第でシステム開発にも携われる柔軟さに魅力を感じ、このインターンに参加しました。

インターンについて

本インターンには、会社から貸与されたノート PC を使い、自宅からフルリモートで参加しています。勤務時間は自分で柔軟に設定・変更できるため、大学の授業や研究と両立しやすい点が非常に助かりました。私は週 2 日程度の勤務を基本とし、研究が忙しい時期には一時的に勤務を止めるなど、相談しながら勤務頻度を調整させていただきました。

コミュニケーションは MetaLife（バーチャルオフィス）と Slack が中心です。フルリモートではありますが、MetaLife 上で社員の方やインターン同士が常にオンラインで繋っており、通話や画面共有のハードルが低いため、ちょっとした相談がしやすい雰囲気でした。Slack でもチャンネルを使用しての情報共有が活発に行われており、インターン生からも質問や相談がしやすい環境でした。

平日の午前中には毎日デイリーミーティングがあり、自分の担当タスクの進捗や困りごとの共有をします。その場で社員の方からアドバイスをもらえたり、「この部分は自分が見ますよ」といった形でフォローしてもらえることも多く、悩みを解消しやすい仕組みになっていました。

業務

本インターンでは、GitHub の Issue から作業が割りあてられます。

社員の方がよしなに選んでくださる Issue を担当することもあれば、自身が取りたい Issue を相談して担当することもあります。

いくつか私が取り組んだ Issue を紹介しつつ、どのように開発に参加していたかを書いていきます。

本インターンにおける業務は、Purple Flairの「コンテンツ開発」と「システム開発」の二種類があります。私はオンボーディングではコンテンツ開発に、その後は主にシステム開発の方に取り組みました。

オンボーディングの段階では、コンテンツ開発に該当する Issue である「コンテンツの動作検証」や「レビュー」を通じて、プロダクト全体の雰囲気や Issue の取り方、作業の進め方などを学びました。

システム開発では、Purple Flairで利用している Django 本体や依存ライブラリのメジャーアップデートに伴うリスク評価、学習コンテンツの一覧画面の表示に関するタスクなど、既存の大きなコードベースに対して少しずつ変更を加えていく仕事が多かったです。（他にも様々な Issue がありますが、それらについては他のインターン生の方々も詳しくブログで紹介しているので、そちらもぜひご参照ください。）

ここでは、その中でも印象に残っている「サインアップ時の CAPTCHA の導入」のタスクについて紹介します。

サインアップ時の CAPTCHA の導入

それまでのサインアップ画面では、ユーザが新規登録に必要な情報を入力した後、アカウントの作成ボタンを押すと、そのままサインアップ処理が実行される仕様でした。私が担当したタスクでは、このフローに CAPTCHA を組み込み、「作成ボタン → CAPTCHA の問題表示 → 検証成功後にサインアップ処理へ進む」という流れに変更しました。

具体的には、次のような作業を行いました。

WebACL に CAPTCHA 用のルールを追加する
フロントエンド側で、ユーザが CAPTCHA を解くための表示コンポーネントを実装する
アカウントの作成ボタンが押された後に CAPTCHA モーダルを開き、検証成功後は今まで通りのサインアップ処理を呼び出すように変更する
GitHub Actions や Dockerfile を修正し、CAPTCHA の表示に必要となる環境変数を追加する

このタスクを通じて学んだこと

途中参加となる大きなアプリケーション開発のなかで、まず難しかったのは「どのファイルの、どのコードを触ればよいのか」を見つけることでした。個人や小規模の開発では、Issue を立てる時点でどのあたりのコードを変えるのか自分で把握していることが多かったのですが、既存の大きなコードベースだと、まず問題箇所を見つけ、どのような修正を行うのかを検討すること自体が一つの作業になりました。関連するファイル同士のつながりを追いながら処理の流れを読み解き、どこに修正を加えるべきなのかを探す良い練習になりました。

また、実装の際には AWS WAF の CAPTCHA JavaScript API を使用しました。その API 仕様を理解するために、公式ドキュメントや参考記事を探して読み込み、実装に落とし込むことも求められました。公式ドキュメントで仕様を掴みつつ、他の開発者の使用例を参考に開発を進めていきました。

実装中には、エラーや UI の細かい挙動など、さまざまな問題でつまずくことも多くありました。印象に残っているのは次のような場面です。

TypeScript の型エラーへの対応
- AWS の CAPTCHA を利用する際、window オブジェクトに AwsWafCaptcha というプロパティがあることを前提としたコードを書いたところ、TypeScript の標準の型定義には AwsWafCaptcha が存在せず、型エラーになりました。このときはエラーメッセージを手がかりに原因を特定し、型定義を追加することで解決しました。
CSS による意図しない表示崩れ
- 実装したモーダルが意図せず半透明になってしまい、原因をすぐに特定することができませんでした。社員の方に相談し、ブラウザの開発者ツールで実際に適用されている CSS を一つずつ確認した結果、親要素に指定されていた opacity が子要素の描画にも影響していることが原因だと分かりました。このことから、表示が崩れたときは開発者ツールで適用されている CSS を辿り、どのスタイルが効いているのかを確認していく方法が有効であると学びました。
モーダルを閉じて開き直すと CAPTCHA が表示されない問題
- CAPTCHA は AWS WAF が提供する JavaScript ファイルを <script> 経由で読み込み、読み込み後に利用できる window.AwsWafCaptcha の API を通して描画する仕組みでした。しかし、モーダルを閉じて再度開いた際、外部スクリプトはすでに読み込み済みのため、スクリプト読み込み完了時に呼ばれる onload が期待通り発火せず、CAPTCHA の描画が正常に行われないことがありました。そこで、window.AwsWafCaptcha の有無でスクリプトが読み込み済みかどうかを判定し、onload に依存しない形で描画処理を行うようにしました。あわせて、モーダルの open/close に合わせて描画用コンテナの DOM と内部状態をリセットして、再度モーダルを開いた時も安定して再描画できるようにしました。

また、CAPTCHA の検証でユーザにわずらわしさを感じさせない工夫として、CAPTCHA の検証に失敗した場合、画面全体をリロードするのではなく、一定時間経過後に CAPTCHA を再描画して新しい問題にそのまま再チャレンジできるようにしました。セキュリティ対策をしつつ、ユーザに不快感を与えない実装について考える良いきっかけでした。

さらに、コードレビューでは実装意図を質問されることが多く、他の人が読んだときに意図が汲み取りづらい部分は、リファクタリングした上で必要に応じてコード内にコメントで補足を入れるようにしました。チームでアプリケーションを開発するうえで、コードの書き方だけでなく、後から開発中の思考の流れを把握できるようにプルリクエストで適宜コメントやメモを残しておくことが重要であるということもこの開発を通して知ることができました。

インターンシップを振り返って

本インターンを通して、技術面とチーム開発面の両方で実践的な経験を積むことができ、自身の成長に繋がったと実感しています。

技術面においては、TypeScrpt や React を用いたコーディングや、Dockerを活用したアプリケーション開発といった技術的な実務経験を積むことができました。インターン前は、簡単な実装をやったことがある・触ったことがある程度でしたが、実際のプロダクト開発で継続的に触れたことで、これらの技術に対する心理的なハードルが大きく下がったと感じています。また、未経験であった AWS の API を用いた開発に携わらせていただけたことも、とても貴重な経験となりました。

加えて、本格的な Web アプリケーション開発に関わるなかで、チーム開発を円滑に進めるための工夫や実践的なやり方を学ぶことができました。GitHub の Issue を起点にタスクを進める流れや、GitHub Actions などの開発ツールの使い方、そしてコードレビューを通じた指導により、意図の伝え方やコーディングに関するアドバイスもいただき、個人開発では得られない多くの学びがありました。

今回の実際の開発現場での経験を通して、セキュリティエンジニアとしてだけでなく、エンジニア全般に求められる実践的なノウハウを学ぶことができました。ここで得た学びを、今後の自身の活動に活かしていきたいと考えています。

おわりに

本記事では NFLabs. の長期インターンシップについて学生視点からの紹介をしました。本インターンは、フルリモートかつ柔軟な勤務体系で、学業や研究と両立しながら開発実務にチャレンジしたい学生にとって、とても参加しやすい環境だと思います。この記事が、NFLabs. のインターンシップに興味を持っている方や、長期インターンを検討している学生の参考になれば幸いです。

(代理投稿: hysnf)