このたび、クリアコードのインターンシップに参加する機会をいただきました三宅です。プログラミングを学び始めて間もない私にとって、実際の開発現場を体験するのは初めての経験でした。
この記事では、インターンに参加した理由や取り組んだ内容、実際に感じたこと、そして学んだことについて紹介します。
インターンに参加した理由
私が今回のインターンに参加した一番の理由は、プログラミング初心者として実際の開発業務に触れてみたいと思ったからです。
普段は学習サイトや個人でプログラミングを学んでいましたが、実際の現場ではどのような流れで開発が進み、どのようにチームでコミュニケーションを取りながら仕事をしているのかを知りたいと考えていました。本や教材だけでは学べない「実際の開発現場」を経験したいという思いが、インターンへの参加を決めた大きなきっかけです。
また、Linuxの学習を始め、コマンドラインでの操作を練習している中でOSS（オープンソースソフトウェア）の存在を知りました。OSSについて調べていくうちに、多くのソフトウェアが世界中の開発者によって協力して開発されていることを知り、その仕組みや開発の進め方に興味を持つようになりました。
さらにOSSについて調べている中で、クリアコードがOSSに積極的に取り組んでいることや、インターンシップを実施していることを知りました。インターンシップの最初の面談では、新型コロナウイルスの流行をきっかけに、現在はフルリモートで実施しているという説明がありました。対面でなくても、実際の開発現場と同じようにコミュニケーションを取りながら開発を進める経験ができることを知り、OSSについてさらに理解を深めるとともに、実際の開発の進め方を学びたいと思い、クリアコードのインターンに応募しました。
今回のインターンでは、Edge拡張機能の開発をテーマに取り組みました。このテーマは、事前の面談で、私がこれまでJavaScriptをある程度学習してきたことをお伝えしたことがきっかけで決まりました。
クリアコードの方から、EdgeやChromeの拡張機能はJavaScriptを使って開発できることに加え、ちょうど社内でEdge拡張機能を開発する計画があるというお話を伺いました。Edge拡張機能は技術的にChrome拡張機能と共通する部分が多いため、今回開発するものはChromeでも利用できる拡張機能になるとのことでした。
そこで、開発を予定している機能の一部をタスクとして切り出し、インターンシップの課題として取り組むことになりました。これまで学んできたJavaScriptの知識を活用しながら、実際の開発計画に関わる課題を通して、開発の流れを体験することになりました。
インターンで取り組んだこと
インターンの最初のヒアリングでは、これまでの学習経験や使用したことのある技術について確認がありました。
私は、それまでにHTMLファイルをブラウザで表示し、JavaScriptでおみくじを実装するといった簡単なプログラムを作成した経験はありました。しかし、JavaScriptを使った本格的な開発には取り組んだことがなく、Node.jsも使用したことがありませんでした。また、GitHubのアカウントは持っていたものの、Gitを使ったコミットやプッシュなどの基本的な操作も未経験でした。
そのため、Edge拡張機能の開発に取り組む前に、まずは必要な基礎知識として、GitとGitHubの使い方、そしてEdge・Chrome拡張機能の開発方法を学ぶことになりました。EdgeとChromeの拡張機能は技術的に共通する部分が多いため、拡張機能開発の基礎についてはChrome向けの公式チュートリアルを利用しました。
クリアコードの方から案内していただいたのは、GitHub公式の「Hello World」チュートリアルと、Chrome for Developersの拡張機能開発チュートリアルです。まずは、この2つのチュートリアルを最後まで完走することを目標に学習を進めました。
取り組みを始める際には、「分からないことがあれば、一人で長時間悩むよりも、疑問を解決して先へ進むことが大切」というアドバイスをいただきました。また、人に質問することに抵抗がある場合は、ChatGPTやGeminiなどの生成AIを活用して考えを整理するのも有効な方法であると教えていただきました。
GitHubのチュートリアルでは、リポジトリやブランチの作成、ファイルの変更、コミット、プルリクエストといった基本的な開発の流れを学びました。それまでGitを使ったことがなかったため、変更内容を記録し、共有するまでの一連の流れを実際に体験できたことは、その後の開発を進めるうえで大きな助けとなりました。
拡張機能開発のチュートリアルでは、最初に「Hello World」を表示するシンプルな拡張機能を作成し、Edge・Chrome拡張機能の基本的な仕組みを学びました。このチュートリアルを通して、拡張機能の設定を記述する manifest.json の役割や書き方、開発中の拡張機能をブラウザへ読み込む「パッケージ化されていない拡張機能」の利用方法など、開発の基礎を身に付けました。
チュートリアルを一通り終えた後は、すぐに実際の開発へ進むのではなく、学習内容を振り返る時間が設けられました。
チュートリアルの手順どおりに拡張機能を作ることはできていましたが、その時点ではChrome Extension APIが全体の中でどのような役割を果たしているのかを十分に理解できていませんでした。公式ドキュメントを読みながら実装を進めていたものの、イベントの発生からAPIの呼び出し、処理の実行までの流れをうまくイメージできず、「なぜこのAPIを使うのか」「どのような役割を担っているのか」が曖昧なままでした。
そこで、メンターの方から身振り手振りを交えながら、拡張機能全体の仕組みについて説明していただきました。また、「処理の流れを図で考えると理解しやすい」というアドバイスもいただき、イベントの発生からAPIの呼び出し、処理の実行までを図にして整理してみました。
すると、それまで個別に覚えていたAPIが一つの流れとしてつながり、拡張機能全体の仕組みをイメージできるようになりました。私の中では、**「APIは拡張機能とブラウザをつなぐ司令塔のような存在」**というイメージを持てるようになり、その後もう一度チュートリアルを読み返すと、それぞれの処理がどのような役割を持っているのかを以前より理解しやすくなりました。この経験から、コードだけを読むのではなく、処理の流れや全体の構成を理解することの大切さを学びました。
その後は、本格的なEdge拡張機能の開発に取り組みました。私が担当したのは、ブラウザで開けるタブ数を制限する拡張機能です。Edge拡張機能として開発を進めましたが、技術的にはChromeでも共通して利用できるため、実装ではChrome Extension APIを使用しました。
まず、ユーザーが設定した最大タブ数を超えて新しいタブを開けないようにする機能を実装しました。その後、拡張機能が読み込まれた際の初期処理や、システム管理者が設定値を外部から制御・管理するためのマネージドストレージの実装にも取り組みました。また、拡張機能の読み込み時に、すでに設定した上限を超える数のタブが開かれていた場合は、現在開いているタブ数を通知で表示する機能も追加しました。
開発を進める中で特に苦労したのは、現在表示しているウィンドウで開いているタブ数だけを取得する処理です。最初は単純にタブ数を取得していたため、別のウィンドウで開いているタブまで数えてしまうという問題がありました。
最終的には、chrome.tabs.query と windowId を利用して対象のウィンドウを指定することで、現在表示しているウィンドウのタブ数だけを取得できるようになりました。この実装を通して、Chrome Extension APIには用途に応じてさまざまなオプションが用意されており、それらを理解して適切に使い分けることの重要性を学びました。
インターンを通して感じたこと・学んだこと
今回のインターンを通して、自分はまだまだ勉強不足だと実感しました。
特に、処理の制御フローを考えることやDOM操作、Chrome Extension APIを利用した処理の実装には苦労し、思い描いた処理をすぐにコードへ落とし込むことができない場面が何度もありました。
一方で、分からないことは公式ドキュメントやサンプルコードを読み返しながら、一つずつ理解を深めていきました。思うように動作しないときは、処理の流れを整理したり、原因を切り分けたりしながら試行錯誤を繰り返しました。
今回のインターンを通して、分からないことをすぐに答えだけ求めるのではなく、自分で調べて考えながら解決していくことの大切さを学びました。また、実際の開発では、一つの機能を実装するにも設計や処理の流れを意識して進めることが重要であると実感しました。
今回の経験から、JavaScriptの基礎や制御フロー、DOM操作についてさらに学習を続ける必要があると感じました。同時に、実際の開発業務を体験できたことで、エンジニアとして必要な考え方や問題解決の進め方を学ぶことができ、自分にとって大きな成長につながる経験となりました。
おわりに
初めてのインターンは、不安も多く、思うように進まないこともありました。しかし、その分だけ多くのことを学び、実際の開発現場でしか得られない貴重な経験をすることができました。
今回学んだことを今後の学習に活かし、JavaScriptやChrome拡張機能開発への理解をさらに深めるとともに、OSSにも積極的に触れながら、より実践的な開発に挑戦していきたいと思います。
このインターンを通して、実際の開発現場で学ぶことの楽しさと難しさを知ることができました。これからも学習を継続し、エンジニアとして成長できるよう努力していきたいと思います。
メンターからのコメント
今回メンターとしてインターンシップ実施を担当した結城です。
可能であれば実際にオフィスに通勤して頂いて、対面で密にコミュニケーションを取りながら学んで頂けるとよかったのですが、現在のクリアコードはフルリモート勤務が主流となっているため、インターンシップもフルリモート形式で実施させていただきました。 随時質問できるようにチャットを使ってもらったり、週1回のペースで相談のための通話の時間を設けてみたりと、コミュニケーションの機会を意識的に作るようにしてみたものの、双方の活動可能な時間帯の兼ね合いもあって、三宅さんにはほぼお一人で作業して頂き、その結果を後からレビューする形とならざるを得ませんでした。
そのような状況下でこのインターンシップを完遂して頂けたのには、三宅さんの質問したいタイミングで質問をして的確な回答を返してもらえる生成AIチャットの存在が欠かせなかったと思います。 独習しやすい時代になったと言える一方で、人間はどうやって存在意義を示していけばよいのか、ということをこちらとしても改めて考える機会になりました。
すでに述べたとおり、クリアコードは現在全社的にほぼフルリモート勤務となっています。 コミットログやコミットの差分、チャットなどを通じた非同期コミュニケーションで互いに状況を把握して連携しつつ、作業自体は個々人のペースで行うという今回のやり方は、当社で現在一般的な業務の仕方とほぼ同じものでした。 これは、バザール開発形式のオープンソース開発プロジェクトでもよく見られる光景です。 このようなやり方を体験して頂いたことが、三宅さんの今後のキャリアにとって有益な経験となれば何よりです。
