はじめに
2年間で学んだことをしっかりとまとめたことがなかったので、行動の理由と結果をまとめてみました。
こんな人生もあるんだー/こんな感じなるんだー程度に見てください。笑
期間
2019年3月中旬〜2021年3月中旬(2年間)
インターネットに自分が書いたものを公開したい！
期間：2019年3月中旬〜2019年9月末
自分のブログをネット上に公開する
これを達成するにはいくつかの方法があります。
そしていくつかの目的を考えました。
- 情報発信者として文章を書くことだけ/発信することだけに集中したい
- サイトの独自性や雰囲気を作りたい/サイトで表示している部分も自分で作ってみたい
- ネット上にサイトを公開するためのインフラについて詳しく学びたい
これらを実際に達成するにはこんな感じ。
- 記事の本文を書くだけでネット上に公開できるはてなブログなどのサービスを使う
- 表示するサイトの見た目なども自分自身で設定できるWordPressなどのコンテンツ管理システム(コンテンツ管理システム)と、インフラを簡単に構築できるXserverなどのレンタルサーバーを使う
- コンテンツ管理システムを使いつつ、インフラを少しマニュアルに構築できるAWSなどのクラウドサービスを使う
上から順にブログに対して筆者が補うべき部分を増やしています。
上記の中で自分は②を選びました。
ブログを構築して学べたこと
- HTMLとCSSによってサイトの見た目が作れる
- HTMLによるコンテナちっくな設計方法
- Sassで変数の指定、クラスやIDのネストを用いることでCSSが綺麗に記述できるようになる
- WordPressが用意している関数を使うとブログを作成する上で様々な機能を実装できる
- PHPという様々な機能が使えるようになる関数を実装するバックエンドの言語
- Xserverがネット上にサイトを表示するためのインフラを担っている
- けれど何をしているか全くわからない
- 無料でドメイン名(qiita.comなど)を設定できる
公開した情報をもっと色んな人に見てもらいたい
サイトを作成→デザインを整える→WordPressの関数で機能を追加！！
『う〜ん？技術を学んだのは良いけれど、自分が作ったサイトが誰にも見られていない。』
ふとそのようなことに気付き、見てもらうための努力を始めるお決まりな行動を始めます。
検索順位をあげるための努力によって学べたこと
- SEO(検索エンジンで上位に表示するにはどうすれば良いか)のために、記事の書き方や内容の選定方法などの戦法を立てる
- 想像以上にブログの検索順位向上が難しい
- 検索順位を決めているのは何かしらのアルゴリズム
- やっぱりタグは重要そう
- http://schema.org でこの部品は何かという情報を渡している
- ブログ内容に関して先駆者がほとんどの情報を網羅し発信している
- だけど先駆者の情報は確かに古くなっている
- 当時の僕はゲームの最新情報系のトレンド記事に走った
- Adsenseやアフィリエイトによって、サイト運営で収益を出すことができる
- 配置や色の使い方によってクリック率、離脱率が全く変わってくる
- 検索結果に表示されたサイトのほとんどが、アドセンスやアフィリエイトを使っている
- Googleの提供するサービス
- Analyticsによってサイトに訪問するユーザーや作成したページの重要性を分析できる
- Search consoleによって検索ワードや検索順位を分析できる
- Adsのキーワードプランナーによる検索語句分析
いまこの行動に対して自分が感じること
この時期が何をするにも一番眠たかったです。笑
何が何か分からなすぎて闇雲に動き回っているような感覚になるので、自分が何をしているのか分からなくなります。
ですがここで目的を決めて達成に向けて動けたことと、次の目標を見つけられたことで、次のステップへ踏み出すことが出来ました。
| 目的 | 次の目標 |
|---|---|
| 誰でも見ることができるネットに何かを載せてみたい！ | 見た目以外の技術ってどうなっているの？ |
| 自分の持つ情報を発信して収益化する | もっと収益化するにはどうすれば良いだろう？ |
流行りのAIに入門してみたい
期間：2019年10月
『見た目以外の技術ってどうなってるの？』で飛躍に飛躍が重なって始めてしまったAI分野です。笑
『もっと収益化するにはどうすれば良いだろう？』でサービスの差別化として学び始めたという経緯もあったりなかったり…。
アヤメの種類を分類しまくった1ヶ月
ググったりしながら『AIを実現するためのアプローチとしての機械学習の中の教師あり学習とは何か』
をなんとなく理解した後に取り組んだのが、アヤメの分類です。
概要としては、『アヤメ科アヤメ属の中で、その種類毎の計測データを用いて３つの種に分類する』というものです。
詳しくはコチラに当時まとめた記事がございますので、よろしければご覧ください！
アヤメを分類することで学べたこと
- 教師あり学習とは何かを実感できた
- 実際に手を動かしてみることで機械学習に対する理解が深まった
- Google Colabratoryの存在を知ることが出来た
- 機械学習でよく用いられている言語がPython → Pythonで入門以上のことが出来た
- Pythonのテーブルデータ解析ライブラリ(Pandas)とグラフ描画ライブラリ(Matplotlib)を初体験出来た
- 機械学習において学習用データとテストデータに分ける意義を知った
- テーブルデータにおける前処理の比重を知った
- scikit-learn(Pythonの機械学習ライブラリ)によるSVM(機械学習アルゴリズム)を初めて動かせた
- これ以降で学ぶべきことが多すぎて/内容が難しすぎて挫折(Kaggle)
いまこの行動に対して自分が感じること
今でも『唐突だったな』と感じます。笑
ですが、次第に理解すべきことが多すぎて/内容が難しすぎてモチベーションを維持することができなくなり、シンプルに挫折しました。
当時、周りに機械学習をやっているコミュニティや友達がいなかったので、やむを得なかったのかなぁと思っています。
| 目的 | 次の目標 |
|---|---|
| 飛躍に飛躍が重なった『見た目以外の技術』→ 機械学習 | これ以上は難しすぎる。どうすれば？ |
| もっと収益化する方法としてAIを使ってサービス差別化 | そもそもAIをサービスに乗っけるにはどうすれば？ |
AIをサービスに乗っけたいで始めるバックエンド開発とインフラ構築
期間：2019年11月〜2019年12月
AIをサービスに乗っけたい
これを達成するにはHTML&CSSのマークアップ言語だけではできないんです！
となると、選択肢としては以下が出てきます。
- WordPressで使われているPHPで機械学習アルゴリズムを実装する
- バックエンドをPythonに乗り換えてライブラリの機械学習アルゴリズムを使うする
初心者がPHPで機械学習を実装するにはとても荷が重い。
そこで②のWordPressを離れてPythonでバックエンド開発したらええやんとなりました。
Pythonでバックエンド開発をしたい
これを達成するには、自分でつくるか**ライブラリ(Django or Flask)**を使うかになります。
僕はDjangoを選びました。
- GitHubのスター数的にDjango or Flask
- 使われているフレームワークとしてもDjango or Flask。 詳しくはstack overflow参照
- 当時の決め手はフルスタック(Django)かそれ以外(Flask)ならフルスタックの方が絶対良いやん
今思い返すと違う
- どっちを使うかは場面によりけり
- Flaskは軽量なフレームワークで、ちょっとしたAPI開発だけであればFlaskを選ぶべき
- ただFlaskを使ったことがないので、ちゃんとしたことは言えないです。コメントお待ちしておりますm(__)m
Djangoによるバックエンド開発で学べたこと
これも入門するのがとても難しかった記憶があります。
そこで内容を自分なりに解釈して、自分のブログにまとめることで理解を深めていっていた記憶があります。
Djangoまとめはコチラ
- DB(データの格納庫)を使ってデータを初めて永続化(データを保存する)出来た
- SQLiteが使えるので、別でDBのサービスを用意しなくても良い(初心者にとってはとてもありがたい)
- モデル定義によるマイグレーションシステム(SQLの知識が無くてもDBが使える)
- 初めてのテンプレートシステム(HTMLにDjangoを埋め込んでいく感じ)
- クエリパラメータでデータを動的に扱う方法やページ遷移
- クライアントからのフォームの内容入力ででデータを格納するまで
- バックエンド開発の楽しさ
- アウトプットすることの価値
Djangoで開発したサービスをネットに公開したい
これを達成するにはインフラを構築しなければいけません。
- このままXserverに乗っける
- AWSのEC2(Amazon Elastic Compute Cloud)を使う
僕は②を選びました。理由としては、
- インフラをちゃんと勉強したくなった
- どうやら1年間の無料枠がある
AWSを用いたインフラ構築で学べたこと
- IPとは何なのか
- IPの区間(列島のイメージで)の中(VPC)でどこの島(サブネット1)とどこの島(サブネット2)と世界中の国(サブネット3)だったら行き来できるか(ルートテーブルでサブネットを紐付け)などを決めれること
- ↑これを設定した上でEC2インスタンスを使ってアクセスできる場所をつくる
- Elastic IPを使ってIP固定する(使っていないEC2インスタンスを固定している場合はしっかり開放しましょう。金かかります。)
- 誰でもコンテンツを世の中に披露できること！！
インフラはコードを書くことがなくずっとポチポチするので、『プログラミングをゴリゴリする！』という感じではないです。
実はTerraformという技術もあって、インフラをコード化するのもあります。
いまこの行動に対して自分が感じること
日本では沢山の方がRuby on Railsを選んでいる中、ここで理由ありきのDjangoという選定した自分に勇気あるねって言いたいです。笑
当時は日本語の文献も3冊程度しかなく、日本語での情報源があまりなかったので、英語Documentに挑戦する時期にもなりました。
| 目的 | 次の目標 |
|---|---|
| そもそもAIをサービスに乗っけるためにバックエンドとインフラを構築 | 実際に稼働できるサービスを作りたい！ |
| 飛躍に飛躍が重なった『見た目以外の技術』→ 機械学習 | これ以上は難しすぎる。どうすれば？ |
実際に稼働できるちゃんとしたサービスを作りたい
期間：2020年1月〜2020年4月
当時の自分に足りないもの。それはフロントエンドの開発力でした。
ちゃんとしたサービスを作りたい
これを達成するには…
- 要件定義
- デザイン
- アーキテクチャ設計
- API設計
- フロントエンド
- バックエンド
- インフラ
これらを1人で全て網羅的に開発する必要があります。
『『いや、しんどすぎじゃね？』』
もはやモダンフロント系を全く触ったことがなかったので、フロントを実装するには勉強から始めるので、とても時間がかかります。
当時は就活が被っていた事情もあり、いち早くサービスを完成させる必要がありました。
そこで救世主のフロントやってる友達が登場し、共同でサービスを開発することになりました。
投票サービスを作りました
キャッチコピーは
気軽に投票を【取れる】【見れる】【できる】アプリ
↑LPもしっかり作ってました。
サービスの構成図です。S3あるのにNginxサーバーがあるのは、常時SSL化するにあたって仮のWebサーバーが必要になったので、います。笑
実装面に関して詳しくはREADMEにまとめたのでコチラのリンクをご参照ください
技術スタック
- Django,DRF
- RESTfullなAPIサーバーとして稼働
- RESTFrameworkのシリアライザはとてもバリデーションかけやすくて良い
- エンドポイントへのテストUIもよかった
- RDS(PostgreSQL)とのマイグレーションを介したやり取り
- CRUD系は全て実装した
- Pythonのフレームワークなので機械学習との親和性も高い
- Vue
- SPAとして開発
- 友達にまるなげしたので技術的なことはあまり知らない笑
- Nginx
- ロードバランサーとして負荷分散
- 常時SSL化のためのヘルスチェッククリア要員
- ローカルでの開発当初は画像表示系にも使っていた
- 認証系
- JWTを使ってユーザーの権限系を管理
- URI設計
- SwaggerでAPIの仕様書を定義
- 外部APIに向けてエンドポイントを直感的に分かりやすいように設計
- デザイン
- 開発仲間とめっちゃ議論した
- マテリアルデザインを参考にした
- レスポンシブデザイン
- UI/UX
- ストレスのたまらない配置と遷移とデザインを考えた
- 詳しくはリポジトリのREADMEまで
- テスト
- エンドポイントへのテストはほぼ網羅してます！正常系も異常系も！
- シリアライザのテストも書いています。
- ECR
- DockerのイメージをAWSでもっとけるところ
- CircleCIで自動デプロイにより最新のイメージを更新できる
- ECS
- Dockerのコンテナをデプロイできる
- docker-composeのようにアプリを起動できる
- 負荷状態によってスケーリングが可能になる
- モニタリング
- コンテナ間の通信をさせる設定で詰まった記憶がある
- S3
- ストレージサービス
- 読み書き削除/権限系に優れている。最高。
- CloudFront
- 体感でも配信速度が早くなったことを感じられるツール
- SES
- メールの配信サービス
- アカウントのメールアドレス認証で使った
- CircleCIのCI
- master以外のブランチにpushでテストが走る
- ダメだとmasterへのプルリク前に止めることができる
- CircleCIのCD
- masterへのmergeでS3へ静的ファイルとECR/ECSのデプロイ
- Orbsを用いたデプロイ
- 手元でsshをつかってあげるのは前の段階で自動テストを回している意味が薄れるので、継続的デリバリーさんを実装
- ECRのイメージがpushされた後にECSの新たなタスクを作成して、更新されたイメージが反映されるようにする
共同開発で学べたこと
- 自分が持っているサービスへのビジョンを明確に伝えなければ、相手も受け取れないという当然の事実
- 『人なのでそれぞれに考えがある。故にお互いの意見を聞き合い、認め合い、合理的に進めていく』言葉で言うのは簡単だけど、中々難しかった
- ただし、頂点に立つ意思決定者はやはり必要な気がした。
- フロントエンドとバックエンドで作業分野を分割していたので、あまり可読性を重視するケースは起こらなかったけど、難しいことはわかった
- コードレビューはしないけど、形はIssue駆動開発を体験できた
- スゴイと思ったら素直にスゴイと言うこと。実装的にう〜んと思ったら、相手の立場と自分がもし言われたらということを想定して話す
Dockerを使うこと
- どの環境でも同じ環境が構築ができちゃうサービス
- さらにその環境をサクッと消すことも出来ちゃいます。
- 共同開発においては必須だと感じたので、Dockerを学び始めました。
- 今でも重宝しているので、是非皆様も使って欲しい！！
いまこの行動に対して自分が感じること
この時期はものっすごくエンジニアしていました。笑
『朝起きる→開発→夜ご飯食べて→開発→寝落ち』の繰り返しです。笑
実装面でたくさん躓いた部分がありましたが、ググる×実験しまくると、全ての問題になんとか対処できたので、自信に繋がりました。
ですがマーケティングの部分が未知すぎて、ユーザー数を増やすことができず、今ではサーバーを止めてクローズさせました。
当初の目的であった機械学習をのせるのは、大量のデータが必要だったので、実現することは出来ませんでした。
| 目的 | 次の目標 |
|---|---|
| 自分が出来ないことは得意な仲間に任せる | フロントエンドが全くわからない |
| 飛躍に飛躍が重なった『見た目以外の技術』→ 機械学習 | これ以上は難しすぎる。どうすれば？ |
ちゃんと機械学習分野/データサイエンスを学びたい
期間：2020年5月〜2020年8月
東京大学 松尾研が主催するGCI2020 Summerに参加しました。
データサイエンティストを育成する無料の講座に参加
主に前処理でゴリゴリする方法と、決定木系の機械学習アルゴリズムの使い方をコンペで競い合いながら学びました。
参加していた当時の記録はコチラのリポジトリにまとめております
いまこの行動に対して自分が感じること
人生の中でもかなり上位に入るくらいの努力っぽい努力をしていました。
周りが優秀な方ばかりなので、置いていかれないように学生の立場を使って毎日訳分からないくらいフルコミットしていました。
コンペでの順位
第1回: 6位
第2回: 3位
第3回: 3位
総合: 2位(順位で平均をとると)
最終課題: 優秀者に選ばれた
最終課題として実際に提案するときにはどうすれば良いかというのも出てきたりして、内容はかなり充実していました。
データサイエンスに興味を持たせてくれたこの講座は、人生を大きく変える出来事であったのは間違いないです。
| 目的 | 次の目標 |
|---|---|
| 機械学習が難しすぎた。 | GBDT系だけでなくNN系も学びたい！ |
| 自分が出来ないことは得意な仲間に任せる | フロントエンドが全くわからない |
自作ブログの経費がばり高い
期間：2020年12月下旬〜2021年1月上旬
上述したWordPress×Xserverで稼働している自作ブログが収入の割に月に1000円かかっていました。(マイナス収支)
Webエンジニアになる身として、ちゃんとした構成にする
- フロント: Gatsby.js(React×Typescript×GraphQL)
- ホスティングサービス: Netlify
- Static Site Generator(いわゆるSSG)
学べたこと
- 月々の経費がなんと10円に収まる
- Gatsbyが持つGraphQLサーバーが充実していて、データの埋め込み、取り方にも柔軟性があって、GraphQLが持つデータ構造はとても参考になった
- 初めてのSSG(あと触ってないのはSSRだけ！)
ニューラルネットワーク系を学びたい
期間：2020年4月〜2021年2月
4回生の卒業研究でテーマにNNが入り込んでます。
プラズマ理工学専攻だけどNNを使った研究がしたい
これを解決するには、研究テーマにNNをぶち込むしか無いです！笑
自分で背景や研究のモチベーションを設定したのではなく、尊敬する先生が行っていた研究テーマです。
ですが、ここに所属するためにあまり好きではなかった専攻分野の勉強(電気工学系)をちゃんとしました。
- CNNの論文に関しては一通り追うことができました。(たぶん)
- 自然言語処理や強化学習に関しては、もっと頑張っていきたいです。
| 目的 | 次の目標 |
|---|---|
| 自分が出来ないことは得意な仲間に任せる | フロントエンドが全くわからない |
ちゃんと開発を学びたい
期間：2020年9月〜2021年3月中旬
内定先でインターンをさせていただいておりました。
フロントエンド×GraphQL×Goを学びたい
これを解決するにはサービスを開発するしかないですね！！笑
コチラは課題設定、解決法、ユーザーフロー、画面設計、DB設計、スキーマ設計、開発、サービスの仮完成まで丸々しました。
技術選定の理由
-
GraphQL
- とにかくQueryが優秀
- 概念をまず学んで欲しいと先輩エンジニアさんに言われた
- スキーマ駆動
-
React
- jsx(tsx)という複数人での開発に適した概念がある
- コンポーネント設計を体験すること
- (Apollo)
- GraphQLを使ったReact開発ではスター数が一番多かった気がする
- Apollo Clientがとても良い
- (graphql-codegen)
- スキーマからのジェネレーターがとても良い
- 型を生成してくれるので安全な開発ができる
- 厳密な型定義うぃ施したQuery/Mutationの関数も作ってくれる
-
Go
- これは僕たちで決めた
- 最近の流行り
- 書き方が誰でも似たようになるらしく、良いと思った
- 型付き言語
- (gorm)
- マイグレーション系でスター数が一番多かった
- (gqlgen)
- ジェネレーターとしてスター数が一番多かった
-
MySQL
- デファクトスタンダードかな？
- AWSに向けて、バージョンはあえて5.7らへんを使った。
-
Firebase
- 認証系を期間内に実装できる工数がなさそうだったので、Firebase Authenticationで試しに実装してみると一瞬でできてしまった
- フロントからでもSDKを使って直接認証できるので高感度高め
- もちろんGo側からでも行ける
- ユーザーのUIDをこっちで登録できる事を知った日には喜んだ
- 画像の保存場所をAuthenticationついでにFirebase系列で使いたかったので、ストレージサービスとしてCloud Storageを選んだ
画像の保存フローについて
- クライアントが画像をアップロードする
- CloudStorageから呼び出し可能であろうURLをGoを経由してDBへ格納
- 成功のthenを受け取り次第、CloudStorageへ保存
- 保存画像の上限は1枚に就き5MBに制限
- 保存している間はユーザークルクル表示
- catchするとエラーalertを返す
- thenすると正常alertを変えす
GraphQLについて
- GraphQLは初めて触ったけど、すごくBFF(フロントのためのバック)みを感じた。
- DB設計とスキーマ定義が異なるように作った
- ↑バック(リゾルバー)でゴネゴネして、フロントで取り出しやすいようにするため。
- フロントではそれを好きな構造で取り出せるので、とても良き。
Goについて
- Goは何せ『ホエェ〜』と思う仕様が多かったです。笑
- ゼロ値の存在
- タイプ作ってメソッド定義する(クラスで囲わない)
- 第二引数でエラー型を受け取る時のスコープ
- packageの使い方
- スライスのメモリ確保の仕方
- 強力なライブラリがあんま無い(強強が使う言語だからみんな自分で実装してる説)
フロントのコンポーネント設計について
- フロントのコンポーネント設計はcomponent/container且つatomic designを自分なりの理解/思想で実装
- そして先輩方の解釈をフィードバックで聞いた時に『確かに』を連発しました。
- Presentational component
- ドメインの要素を含まない
- 見た目に関することのみ
- 自信のコンポーネント以外のことに依存しない
- Container Component
- ドメインの要素を含む
- ただし、Container Componentでよく言われているDOMマークアップやスタイルを持たないというのがイメージしにくいので誰かご教授頂きたい。
- ↑これらはこのサイトがよく引き合いにだされるけど、まあまだよく分かってない。
Firebase AuthenticationとCloud Storage
- Firebase Authenticationは全てを補ってくれる。神。
- Cloud Storageは使い方が悪かった/ドキュメントを読み切れてない可能性は高い
- 現状の僕の理解の範囲だと、S3に比べて画像の読み込みがとてもしにくいので、『んーーー』感がとても強めだった。
全体的な話
- 命名が圧倒的にクソだったので、リーダブルコード本をすぐさま読破/理解していきたい。
- 認証系はFirebase authに任せきりだったので、次はJWTをゼロから実装してみたい。
- Promise系があまちゃんなので、あんま知らんけど『それreduceと掛け合わせて使えば良くね？』とか言えるくらい強くなりたい
これからのこと
無事にWebエンジニアとして就職することができました。
(メインで扱っていく言語はScalaとTypeScript(React)になるかと思います。)
ですが趣味がデータサイエンスなので、休日にはKaggleをやりまくっています。笑
さいごに
上記の分野を学んできた身として、今振り返ってみると本当にチリツモです！
そして何一つ分からなかったこの業界で地道に理解を深めていく内に様々なことで、知らない内に最低限のことはできるようになっておりました。(多分)
まだまだ勉強するぞ！！！
※詳しい知見を持っていらっしゃる方は、僕の不十分な理解などのツッコミや補足などコメントを頂けると有り難いです！！