学生がエンジニアとして仕事をして知識を増やすこと

この記事は,はてなエンジニア Advent Calendar 2017の11日目の記事です.

前日はid:nanto_viさんによる通知機能って何を作ればいいの?でした.

概要

はてなにシステムプラットフォーム部のアルバイトとして入社して一ヶ月弱が経ちました.

エンジニアとしてアルバイトをするのはこれで2社目になりますが,いい機会なのでこれまで経験した「学生がエンジニアとして仕事をして知識を増やすこと」についてまとめていきます.

働く前

大学に入学してからは色んな言語の機能に興味を持ち,特にScalaに対して調べるようになりました.

その後関数型方面の勉強会などに参加しつつ言語機能を理解していき,大学が落ち着いたらScalaで仕事したいと考えていました.

その頃は特に業種は何も考えていませんでした.

最初のアルバイト

そうしているうちに大学が落ち着いたので,Scalaを使う会社を探しエントリーし,初めてのエンジニアアルバイトが始まりました.

社内で使うWebアプリケーションの機能追加の仕事で,サーバサイドがScalaでした.

このときまでWebアプリケーションを作ったこともなく,大規模なプログラムを目にすることも初めてでした.

最初はやっていけるか心配になりましたが,品質の良いコードばかりだったため,すぐに理解してどんどん機能追加をすることができました

Webアプリケーションなので当然フロント側も追加する必要があり,Angularもこのときに覚えることができました.

また,一度プロジェクトの移動があり,使用するフレームワークの変更がありましたが,一度Webアプリケーションの構造を学んだことですぐに違いを理解することができ,時間も掛からず機能開発が行えました. それに加えフレームワークが変わっても共通な部分がよくわかるようになりました.

はてなのアルバイト

先月からはてなへ移りましたが,実は配属の希望をMackerelチームとしていました.

ところが「東京オフィスにはMackerelのエンジニアがほとんどいないため,システムプラットフォーム部で受け入れを考えています」との連絡が来て最初はビックリしました.

インフラの知識ははてなインターンで学んだ以上のことはあまりわからず,ミドルウェアについても触ったことのあるものは一部しかないため不安でした.

ところが面談時にそのことを伝えたら「インフラはみんな最初はわからないものだから」と言われ,確かに実際1人開発してるだけでは中々身につかない分野なので,良い機会だと思い頑張っていくことにしました.

現在は実際の業務と研修を半々で進めている状態で,業務内容の副産物としてAWSやMackerelの操作を覚えました.

研修内容としては今のところ,

  • A Tour of Goを進める
  • ISUCON4予選のスコアをどんどん上げていく

ということをやっています.

わからないことだらけで人に聞くことがかなりありますが,毎日タスクは進んでいる上,少しずつやれることが増えていくのを感じてとても楽しく仕事ができています.

これまでの経験から

学生はプロではない

自分を含め学生は,「エンジニアとしての強みが仕事になる」という意識のせいで「強みができるまでは仕事できる気がしない」と考えてしまう傾向があると思います.

ですが,上記のように働きながら知識を増やしたという例もあります.

エンジニアとしての強みをアルバイトで身につける事ができるのは学生の利点だと思います.

特に情報系の学生はコンピュータサイエンスの背景知識を持っているため,新しい知識をつけるのはかなり容易いと思います.

仕事は1人ではなくチームである

仕事をするということはチームで開発をするということであり,

  • わからないところはどんどん質問ができる
  • 問題のある部分を作ってしまっても指摘してくれる
  • 逆に良い部分はエンジニアから褒められる

などの利点が挙げられます.

はてなでは特にエンジニアのレベルが高いことから,質問すれば間違いなく解答できる人がいるという安心感もありますし,文書化して残すという習慣のお陰で小さな疑問点もどんどん公開して共有できるということもあります.

「問題のある部分を作ってしまっても指摘してくれる」という部分については,自分だけではどうしても気がつけない部分もありますし,気がついても改善点が思いつかずそのまま放置してしまうという問題があります.

はてなインターンでMackerelの開発をしていた際も,有名な「N+1問題」を起こしてしまい指摘されたことがあります.そのときに始めてこの問題に名前がついている事を知り,解決策を知るとともにアンチパターンについて調べるようになりました

得た知識をフィードバックする

このように仕事で得た知識は重要で,自分の力にもなります

最初のアルバイト経験を活かして,趣味でDBを使ったアプリケーションを作ったり,JavaScriptで拡張機能を書いたりなど趣味にフィードバックもすることができています.

また,はてなの経験からAWSも使えるようになりましたし,ミドルウェアも動作を理解したのでどんどん使っていこうという気持ちになっています.

このように学生はアルバイトを始めると良いことがたくさんあるので,不安だと感じても勇気を出して一歩前に出てみてはどうしょうか.

これから

知識を増やしていき,将来どんどん質問されても応えられるようなエンジニアになっていきたいと思います.

これからもよろしくお願いします.

はてなでは仕事をして知識を増やしていきたい学生アルバイトを募集しています.

hatenacorp.jp

OSSのハードルの低さ

この記事はPMOB Advent Calendar 2017の2日目の記事です.

最近,scoreboard-in-polygonsを作ったり,cookbook-varnishにプルリクが取り込まれたりした.

その中でOSSのハードルの低さと言うものを実感した.

scoreboard-in-polygonsは画面内に表示されているポリゴンの内部に限定したスコアボードグラフを表示するIITC拡張だが,その実装の為に

  • 画面内に表示されている両陣営のスコアをカウンティングする拡張
  • リンクの交差判定を表示する拡張

の実装を参考にした.

最初はカウンティングの拡張にポリゴンの内部かどうか判定するコードを差し込めば終わりと思っていたが, コードを読むと計算量の悪いコードよくわからない変数名ボイラープレート化したHTML追加部分などがありその改善を行いつつ実装した.

その後確認するとその拡張はプルリクで取り込まれたタイプだったため,本家IITCの実装レベルとは違うとは思うが,当然ながら全体でコードの品質が一定に保たれているわけではないというのを再確認した.

cookbook-varnishの方はプルリクは一行だけの変更だが,今までそのコードを通るケースが無かったため気づかれず放置されていたという理由である.cookbook-varnishを使い始めてすぐに気づいたため,単純なバグでもこのようにすぐ見つかる可能性は十分にある.

これら2つの例から

  • 低品質なコードが混じることもある
  • 単純なバグもすぐそばに潜んでいる

の2つを肌で実感した.

ご報告

株式会社はてなにアルバイトとして入社しました.

所属はシステムプラットフォーム部というところでなんか色々便利にしていく感じのことをやっていきます.

 よろしくお願いします.

IITCプラグイン「scoreboard-in-polygons」を作った

IngressのIntel Mapを拡張するIITCにおいて使える新しい拡張機能を作った.

https://github.com/cohalz/Ingress-Tool/raw/master/scoreboard-in-polygons.user.js

draw toolsで作成したポリゴン内のポータルに限定して両陣営のスコア比率を見れる機能.

IITCの他にdraw toolsも必要.

見ることができるスコアは,ポリゴン内のポータル数ポリゴン内に繋がっているリンクの本数ポリゴン内に収まっているCFの数の3つ.

グラフをマウスオーバーすることで詳細な数値も見ることができる.

f:id:cohalz:20171117215538p:plain

上の画像はEXO5 大阪のアノマリーゾーンをポリゴンで囲ったときのスコア.

ポリゴンは複数描画されていても画面の中に収まっていれば正確に集計することができる.

これからのクラスタ戦やリンクフレンジー等の個人的な計測に便利.

それと,Ingress5周年おめでとうございます.

Macにinstallしたmackerel-agentを再インストールする

Homebrewで入れたmackerel-agentをクリーンインストールしたくなった場合の対処.

結論

mackerel-agent.confmackerel-agent/idが残っているのでそれも削除する必要がある.

brew uninstall mackerel-agent 
rm /usr/local/etc/mackerel-agent.conf
rm ~/Library/mackerel-agent/id
brew install mackerel-agent 

発端

にlocalhostでMackerelを立ち上げて,Macを監視対象としていたことがあった.

mackerel.io

この手順のように/usr/local/etc/mackerel-agent.confにlocalhostで使っているapikeyapibaseを設定して使っていた.

最近になってlocalhostではなくmackerel.ioで監視をまた行いたいと思い,設定を変更した.

  1. apikeyをmackerel.ioで使っているものに変更

  2. apibaseをコメントアウト

  3. brew services restart mackerel-agentを実行

これで移行が終わるかと思いきや,変化なし.

brewで再インストールしてみるも,mackerel-agent.confの設定が変わっていない.

手動で削除する必要があるらしい.

またやり直すも変化なし.

ここでMackerelヘルプを読んでみる.

エージェントのアンインストール エージェントのアンインストールは、お使いのパッケージングシステムにあわせて行ってください。 またその際、デフォルトでは /var/lib/mackerel-agent/id (KCPS用エージェントの場合は /var/lib/mackerel-agent-kcps/id)にホストIDの記録されたファイルが残っているため、これを削除してください。

エージェントをインストールする - Mackerel ヘルプ

どうやら,mackerel-agent/idを削除する必要があるらしい.

Macでは~/Library/mackerel-agent/idにあるのでこれを削除.

すると無事mackerel.ioで監視されるようになってめでたしめでたし.

金を使う

最高の夏を終えて買った

SQLアンチパターン

SQLアンチパターン

パーフェクトJavaScript (PERFECT SERIES 4)

パーフェクトJavaScript (PERFECT SERIES 4)

パワーボールは来月くらいに買う

はてなインターンという人生最高の夏

mackerel.io

はてなインターン2017に参加しました

はてなインターン応募してくれ!!!というレポート記事です

来るまで

以前

id:cohalz

2年前くらいから某社で動いてるプロダクトのScala(PlayとかLiftとか)に触り始めた感じの人間で,

あとは動いてるものだとこのbotがあって,それ以外にやってきたことはいろんな言語の機能見たりとか,コードのレビューなんかも複数の所でやってたりしてた

はてなインターン自体の応募理由としてははてなブックマーク等は使っていたし,Twitterで前々からフォローしてた人多数がめっちゃ行ってたので行きたいと思ってた

とはいえ今年になるまで応募していなかったのは自身のレベルが足りないと思っていたからで,そんなときに去年に行われた夜の合同説明会に参加して次は応募しようと思った

cdgh.connpass.com

事前課題

そんなこんなで受かったあとはコースごとに指定された事前課題を解いて提出するよう指示が来る

MackerelチームではScalaとJavaScriptが指定されて,どちらもLTSV形式をパースして集計を行うことや,JavaScriptだとDOM操作も使ってテーブル表示・検索などの機能を実装するという課題

これらの実装の他にテストを書くのも課題として含まれていて,言語機能やその言語でのテスト環境を事前に把握することができる課題になっている

JavaScript課題では検索機能の課題は自由に作成してよいという指示が入っていて,好きだったり最新のフレームワークを使うのも可能

なので余裕があればただの課題と思わずに色々工夫までできると良かったと後で気付いた

京都

前半過程

11時から13時まで毎日入れ替わりで社員の方が講義をして,昼休憩が終わった14時から課題を進めるという形式

14時から退社時間の19時まで5時間もあるし課題なんてすぐ終わるだろうと思っていたけれど,満足の行く実装を終えるには時間が足りないくらいだった

何故かと言うと課題は毎日関連があるようにできており,下手な設計・実装をすると次に影響が出てしまうからである

以下講師の方と内容紹介

  • id:stefafafan Scalaによるプログラミングの基礎
    OptionやEither,forやimplicitなど実用で使う部分が中心

  • id:Windymelt Scala によるデータベースプログラミング
    ScalaでDBを扱う際のライブラリの紹介やDB設計,レイヤ化アーキテクチャなど

  • id:motemen ScalaによるWebアプリケーション開発
    Scalatraを用いてURL設計,View,Controller,それに対するテスト追加

  • id:masawada はてな教科書JavaScript編
    ES6中心の言語仕様,DOM,非同期,Ajax,jQuery,フロントエンド設計,NodeJS

  • id:syou6162 Web開発におけるコンピュータサイエンス - 機械学習編
    何故Web開発で機械学習を導入するのか,簡単な例,難しい例でどのように特徴量を決めていくのか

  • id:takuwolog id:akawakami デザイン講義
    課題解決の手順の話やより良く伝えるためにどのような考えをするべきか

  • id:masayoshi インフラ講義
    「インフラ」という大きな括りではなく部分に分けて,何故このサービスはこんな構成/実装になっているのか等

  • AWS講義・ハンズオン
    AWSのサービス紹介と前半過程の初週で作ったWebサービスをAWSを使ってデプロイするまで

  • id:chira_rhythm55 サービス企画
    様々な方法で問題を洗い出し,考えた企画を周りにアピールするためにどのようにやっていくか

というような講義を受けてそれに対応する課題を実装し翌日にレビューを貰う形

課題自体は機械学習で一旦終わり,2週目は提出した課題の直しをする余裕があるようになっている

前半過程の最終日には,今までの課題で作ったWebサービスをさらに拡張し新しく何か機能を追加したものを発表するというイベントがあり,自分はWeb Speech APIを使って音声入力をできるようにした

他の人がレベル高いものを作っている中で5位と言う結果に

上位の人はほんとうにすごい機能追加をしていて,自分ももっと事前に構成を練って設計をしておくと良かったなぁと後悔

後半過程

後半に入ってからはid:ktr_0731と2人でMackerelチームに配属され,
id:itchynyさんがメンターとなって開発を進めていった

2人ペアでチーム配属というのは本当にいいシステムで,二人でAPI設計をした後にサーバサイドとフロントエンドに分かれて機能開発をしたり,
こっちはControllerのテスト書いてるからそっちはModelのテスト書いてほしいみたいなことがどんどんできる

2週間で新しく開発した機能は6つ

  • メタデータの一覧API
  • アラートを閉じた時の通知の強化
  • 最後に共有したチャンネルを保存してセット
  • アラートを監視の種類で絞りこめる
  • アラートで通知したチャンネルを表示
  • グラフ共有でメトリックを指定

リリースブログ記事はこちら mackerel.io mackerel.io

と,個人的にはかなり爆速で機能を開発して,手応えはあったものの最終成果発表は4位と悔しい結果に

他のチームを見てみると

  • ブログチームは画像を選択順に貼り付け,横並び貼り付け,キャプション追加 staff.hatenablog.com
  • 大規模チームは次世代サーバ監視システムとその可視化 developer.hatenastaff.com
  • iOSアプリはクイックブックマーク機能とその後のあわせて読みたい機能の実装 bookmark.hatenastaff.com

とめちゃくちゃ便利になっていて完敗

とはいえ社内でもMackerelを触っている人から「めちゃくちゃ便利になった!」との声を頂いて,めちゃくちゃ嬉しかった

自分で書いた便利機能が実際にリリースされてユーザから感謝されるっていう体験は本当にいい体験で,本当にあっという間に2週間が過ぎてしまった

期間中の出来事いろいろ

毎日の話

  • ホテルはオフィスから徒歩2分ほどのハートンホテル京都
  • ホテルは一人部屋で洋食バイキングと和食が朝食
  • 10時30分までにオフィスに来て11時から開始
  • 13時からまかないランチの時間で,社員の方と話しながら食べてその後時間までソファのある場所で一緒にイカしたり等
  • オフィスには本やボドゲもいっぱいあって色々できる
  • 定時が19時で前半過程は21時まではメンターも残っているのでその時間までは作業が可能
  • 後半過程では19時過ぎて作業を続けるということはほとんどなくて,ゆっくりしてから夕食食べに行っても21時くらいにはホテルに着いてるような感じ
  • 夕食はオフィスにピザや寿司が届いたり,すき焼きや寿司や焼肉に連れてってもらえる会があったり
  • その他にはチームの人にお店に連れて行ってもらったりで一度も財布を出していない日の方が多いんじゃないかという感じで詳しくは以下のアルバム photos.app.goo.gl

まとめ

来る前と比べてどう変わったか

  • 経験があった部分はより確かな知識へ
    前半過程では講義と課題のフィードバックによって,よりレベルの上がったコードが書けるようになった
    後半過程でもDB設計やMVC,テストを実際のプロダクトを見ながら実装できたことは大きな力になった

  • Webサービスの上から下まで見通せるようになった
    末端の部分であるインフラやデザインの部分を知ったことで,インフラエンジニアやデザイナと話す際の共通言語を増やすことができた
    プロダクトにおいてなぜこんな構成になっているのか,なぜこんなデザインなのかをより意識できるようになった

参加を考えている人へ

応募はしよう

応募しないと受からない

Perl書いてないからとか知識足りなさそうだから応募しないという理由はまったくなくて,前半過程ではWebサービス開発のために特定の言語を選んでいるだけでそこは本質ではない
事前課題では3週間くらいは余裕があるし事前に良書の紹介もあったりSlackにも入れるので質問ができる

逆にはてなインターンのためにPerlとかScalaやろうかなと思っている人がいたら注意したいのは,カリキュラムは毎年変わるので来年もその言語がある保証はないということ

インターンに行く前のスキルで特に役に立ったのは,Webサービスがどのように動いているかという知識と,規模の大きいコードを読む・書くという経験の2つ

あとは応募開始したら早めに応募をすることで早めに面談,合否がわかることもあるので複数インターンに応募したい人は特に早めに,それに締め切りギリギリの応募も印象良くない

課題や発表は全力で!!!

毎日の課題で講評があり,他のインターン生のコードを見ることができる

同じインターン生のコードを見るというのは刺激的で

  • 事前課題のJavaScript課題
  • JavaScript課題のマウスストーカー作成
  • 機械学習でよりよい特徴量を抽出しF値で競うコンペ
  • 前半過程の自由課題
  • 後半過程の最終成果発表

などなどいくつも機会がある

この機会のお陰で自分の実力を発揮して良いものを作るチャンスになるし,他の人を見て参考にしたり高めていく気持ちになる

なので体調を崩さない程度に全力でやっていくといいと思う

おわり

という感じで何もかもが最高の環境で最高の夏を過ごすことのできるはてなインターン是非応募してくれ!!!

あわせて読みたい

syfm.hatenablog.com

hogashi.hatenablog.com

ishikawa-pro.hatenablog.com

snowman-mh.hatenablog.com

k3ntaroo.hatenablog.com

anatofuz.hatenablog.com

bookmark.hatenastaff.com