CUEBiC TEC BLOG

キュービックTECチームの技術ネタを投稿しております。

SREエンジニアがテックリード主催のプログラミング研修に参加してみた

どうもーキュービックのテックリードの尾﨑です。 今回はSREチームのkmsn17と行ったプログラミング研修に関して解説したいと思います。

なぜプログラミング研修を行ったか

元々インターン生の育成カリキュラムの作成に関わっていて、アプリケーションエンジニアの カリキュラムのベースを尾﨑が作っていました。ただ、以下のような課題を抱えていました

課題

  • アサインされるプロダクトやPJによってはカリキュラム通りに進行しない
  • カリキュラム通りに進行しないことにより妥当性がわからない
  • 磨き込みが行われず、浸透しない

そういえば、これって正社員の研修でも使えるかもねという声もあったな・・・

そこで!

  • 尾﨑が研修を開いてビルドアップしちゃえばええやんと思ったのが始まりです

研修内容

カリキュラム

  • javascriptで文法の学習と演習を進めるという単純なもの
  • データ取得、データ整形、データ連携を中心に設計
  • javascriot→node.js→GASと学んだことを再生産しつつ応用を効かせる

前半で基礎をしっかり叩き込めば、あとは自助努力で伸びていくという寸法です

プログラミングって学ぶことを上げ始めるとキリがないですよね。要するにDBの知識やRubyPHPが書けなくても 何かしらの言語でデータ取得、データ整形、データ連携ができればあとは応用でしょう!という発想のもと最重要エッセンスだけを抽出しました

研修の狙い

ゴール

  • GASでも良いので最小工数で課題解決ツールを独力で作成できる状態

狙い

  • カリキュラムの磨き込みを行いたかった
  • 研修受講者の課題解決スキルのエンハンスに繋げたかった
  • 研修受講者に後進育成をしてもらうプロセスを作りたかった
  • 副次的に育成工数代替と後進育成者の理解度の補完

研修の流れ

実際の流れ

  • 受講後にどうなっていたいのかを擦り合わせる
  • 研修の完了日を設定する
  • カリキュラムをベースにWBSを受講者に作成してもらうう
  • WBSをチェックして、現実的なスケジュールで更新する
  • 演習をWBSをもとに 週次で1on1を実施して解説や詰まったポイントを解消
  • Slackのhuddleでペアプロを挟みつつ進行

研修の工夫ポイント

こだわり

  • 受講期間中のモチベーションは自身で維持してもらった
  • WBSの演習項目を調査、学習、実装に分けてもらった
  • 1つ目の演習課題完了後に習熟度や学習プロセスを確認し、クリアリングした
  • 2つ目以降の演習課題はスケジュールを引き直してもらった
  • 指摘に関してはまとめてもらって、同じ指摘はしないスタンスとした
  • WBSを完遂することが目的ではないことを中盤で説明した
  • ライブラリーは利用意図を説明できるようにしてもらった
  • 成りたい像を再ヒアリングしてWBSを改訂してもらった

とはいえモチベーションの維持って、難しいですよね。何か工夫していたポイントってありますか?

う〜ん。色々あるんですけど、一番は時間を作って教えていただいてるので信頼感を裏切りたくない一心で手を動かしましたね笑 最初は焦りもありシンドイナーって気持ちもありましたが、進めていくうちに楽しくなって業務を止めて進めてた時期もありました汗

なるほどなるほど!研修を通して学ぶことの面白さを知ってもらいたかったが大きいので、嬉しいですね

実際のカリキュラム

dom操作

データ整形

  • dom操作で取得したデータを配列に整形しよう

データ出力

  • aタグを生成してblobでcsvファイルを出力しよう

他システム連携

  • node.jsでdom操作で抽出したデータを整形してSlackに通知しよう
  • node.jsでデイリーで抽出した整形データをSlackに通知しよう

応用

苦労した点

実際やってみてkmsn17どうでしたか?

最初は文法が何でこういう書き方なの?から始まりした笑 特に苦労した点はこのあたりですね

苦労した点受講者視点

  • 文法周りが理解できなかった
  • 解説された内容で理解できない部分があった
  • どこを調べればいいのか検討がつけづらかった
  • ライブラリはどれを使えばいいのか?分からなかった

なるほど。ひとつずつ聞いてみたいと思います。まず文法周りで困ったということですが、印象に残ってるものとかありますか?

変数の定義でvar,let,constの違いが分からなかったり、変数の初期化やループ処理や標準出力などのなぜそうなっているのか?という用法を理解するのに苦労しました

あー最初はわかんないですよね〜。そんな中でもどうやって学習を進めていったんですか?

ターニングポイントとしては途中からjavascriptの書籍を購入して、手を動かしながら復習することで体系的な理解を進めることができたのかなと思います

自己学習ができてきたって感じですね。次は解説で分からない部分があったということですが、どの辺ですかね?

カリキュラムをベースにWBSを作った際に、課題のアウトプットがふわっとしたまま進めてしまったところがありました

なので、1on1の時に実際のアウトプットとの乖離を指摘されて、後から意味に気づいたパターンとかがありました

あー!ありましたね!あれってどうやって改善しましたか?

分からないキーワードは事前にリスト化して調べてまずは部分的に理解を進めつつ、アウトプットのイメージを事前にすり合わせてブレがないようにしました。また、他の開発メンバーにも相談したりもしました

なるほど、アドバイスしたものもあれば自主的に取り組んでくれたものもあった感じですね!次は「どこを調べればいいのか検討がつけづらかった」に関しては時間の経過とともに変化したと思います。初期と中盤と終盤でそれぞれ教えてください

開始初期の時は、ひとつ調べると分からない言葉が出てきてまた調べる感じでしたが、 中盤からは情報ソースを見つけやすくはなりました。なぜそれを選んだのかの根拠がふわっとしていたのでそこを求めるようになりました。 終盤は選定方法では実現できないパターンもあったので複数のパターンの代替案を見つけるのに苦労しました

なるほど、なるほど!前半から終盤にかけて結構変わりましたね。中盤から根拠を大事にされた点が良かったのかなと思います

参考までに講師側の苦労した点も書いておきます

苦労した点講師視点

  • 前半は文法理解がまだなので概念理解と演習と文法解説が混ざりがち
  • 30分の1on1でクリアリングって結構大変。次のMTGあるけどあと5分で実装サンプル作る・・・
  • なぜ詰まっているかをまずは見つけるところからだった
  • リモートを挟みつつやったのでjsじゃないと環境的に厳しかったかも的なところも
  • 完了日が近づいてくると講師も焦り始める。これ終わるよね?詰まったら連絡ちょうだい

テックリードからの指摘一覧

実際にメモしてもらったものの抜粋です。最初は文法周りのFBが多かったですね

そうですね。あと、文法を覚えるためにtab補完を使わないようにもしたり、一度指摘された内容は、同じこと言われないように何度も見返しました

第一回

  • var createElementを調査しよう(chromeの書き方が載ってる)
  • デバック力をつける、プログラムを動かしたとき、どこで欠損しているのか?障害の切り分けをまずは覚えよう
  • 構文理解(②の後に、ここが重要)
  • sampleで配列を定義して、ブラウザから出力できることを確認しよう
  • 一回できたら他のサイトでも同じことをやろう
  • コピペは使わない
  • セミコロンをつける癖をつける

第二回

  • 変数の初期化を実施しよう
  • constとvarとletの違いを理解しよう
  • 検証モードのキャッシュのクリア方法を知ろう
  • 一回データを取得したら、consle上で確認をして、その後csvで取得できるのか?確認をする
  • option+command+iでデベロッパーモードが使えるよ
  • 変数の宣言と変数の代入の違い

この辺りで確か情報収集部分で課題があることを発見して軌道修正しましたね

書籍を購入して構文や構成理解を深めたり他のメンバーの知見も吸収し始めました。

第三回

  • 分からなくなったら、まず図に起こして記載する
  • 分からない単語、分からなかった章を紐づけて、記載する
  • paizaも復習で利用しよう
  • jsを体系的に理解する本を購入しよう
  • 他のメンバーと知見や困っている点を質問しよう
  • フロントエンドエンジニアにセレクタを解説してもらおう
  • カリキュラムでブラシュアップできる点は提案して欲しい

node.jsに進みます。ある程度ライブラリーの力も借りつつ環境構築とAPI連携からの通知に挑戦。この時点で自発的に学びに行く学習プロセスの軸が出来上がってきましたね

一定の理解ができたので調査すべきポイントが掴めたり、あと書籍を再読して理解を深めたのもよかったのかなと。話題のChatGPTにも聞いて難しい内容だけ分かりやすく説明してもらったりしてました笑

第四回

  • 通知のデバッグは即日でも設定次第でできる
  • node.jsでもスケジューリングはできる
  • promptを使って運用レベルで機能を拡張しよう
  • Slackで通知する情報のクオリティも工夫しよう
  • ソースファイルは階層で作ろう
  • そろそろ関数化しよう

後々禍根を残さないようにライブラリーの良し悪しを判断する見識眼をインストール。この辺りだと自分の言葉で実装方針が説明できたり、質問の確度も応用レベルに上がってきてましたね。

そうですね!あと、何でこのライブラリを選んだの?と聞かれて答えられなかったりマズイ!!と危機感があったので説明できるように調べました

第五回

  • ライブラリを安易に入れると後で互換性で苦労するよ
  • ライブラリーが何をしているのか理解しよう
  • ライブラリーの選定理由は説明できるようになろう
  • 処理を目的ごとに分割しよう
  • スプレッドシートからデータを取得すると2次元配列になるのでflat()を使おう
  • 値が参照できない?getValues()しよう
  • 単なる出力だけじゃなくてセルにに色付けや罫線を引いたりもしよう
  • 安易にアプリケーション実装には知らずにデータの参照→更新→登録→削除の順番で進めよう

加速度的に理解が上がってますね。もう尾﨑いらないのでは?いやまだまだ教えることはきっとあるハズ・・・

言われたこと書かれたことをやるのではなく、こういう工夫必要だよね?おっ分かってるじゃん!やるじゃん!と思われるように試行錯誤してました。いっぱい教えて欲しいです笑

第六回

  • パラメータをシートから取得して動的な設定ができるような関数を実装しよう
  • 実務の課題を解決するプロトタイプをつくってみよう
  • シート情報を一括で取得する場合はsheet.getDataRange()を使おう

最後もなかなハラハラする展開でしたね。今思うとGASでdom操作って結構厳しかったんじゃないかと

そうですねwなんとか終わって良かったです

研修を終えた感想とこれからについて

約2ヶ月に及ぶ研修お疲れ様でした。どうでしたか?

ハラハラ、ドキドキの2ヶ月でした

自分からやりたいって言った手前、なんとしても終わらせないと!って気持ちで頑張りましたw

研修の中で完了させることが目的ではないという話をしたと思います。これから何かやりたいこととかありますか?

開発知識がついたのでSREとして運用効率化や信頼性の向上などのメディア改善などに応用していきたいです

実は受講前にも同じ質問をしたんですよね。受講前と今とで何か変わったところとかありますか?

受講前は何ができるか?という点がふわっとしていましたが、ある程度やることが見えてきたり、課題を聞いたりする中でこういうふうにすれば解決できるかも!的なものが出てくるようになりました

もう大丈夫ですね!ここからは応用の繰り返しなので、自分で磨いて行ってください

今回受講してみて、自分みたいにスクリプティングができることでやれることが広がるみたいなのってあるんだろうなって思いました。もし次回の開催とかがあれば自分もお手伝いしたいです

ぜひお願いします。一緒に盛り上げていきましょう

おまけ

そーいえば、以前kmsn17氏が上げてた記事はアクセス好調でしたよね!なんとかズラだったよーな・・・

cuebic.hatenablog.comですね!

投稿してすぐにアクセス爆上がりでしたよね。twitterでも同じことありましたよね!?

世一さんのtwitterですね。社長との洋服ポーカです。3年越しの正体バラシ