2022-02-28

退職しました

2月末で約2年半勤めたEdTechの会社を退職したので、少し振り返っておきます。

やってきたこと

技術面

新規機能開発 ×2
- Rails API + Angular
Rails v4 -> v5へのアップデート
jQueryやAngularのメジャーバージョンアップデート
EC2からECSへのインフラ移行
PHPからRailsへの一部機能リプレイス
Sidekiqの導入
Terraform
既存機能の運用・問い合わせ対応

技術以外

外部勉強会の運営お手伝い
学校への訪問
新人研修でのメンター
スクラム開発
後輩のメンター

振り返ってみて

社会人人生2社目の会社となりましたが、Webエンジニアとして多くのことを経験させて頂きました。

1社目では未経験であったにも関わらず、Web開発に限らず幅広く色んなことをやらせてもらいましたが、2社目ではWeb開発と運用について深く学び、経験することができたと思います。

EdTech事業を手掛けているということもあってか教育に対して思いのある方が多く、入社直後はその熱量に感動していました。

また、技術力も人間力も高い方が多く、大変刺激を受けましたし、多くの学びを得ることができました。

少し年数を重ねたこともあり、後輩や新卒の指導にもあたりました。こちらも自分にとって得るものは大きかったです。

退職に至った経緯

自分にとっては得るものが多く、いわゆる第二新卒だった経験値も少なかった自分を拾っていただいた会社に対しては感謝しかありません。

なぜ退職するかと言うと、教育に熱量がある方々に接し、また後輩指導などに携わる中で、学校教育について専門的に学んできた自分自身が学校の内側から教師として教育をより良くしていくべきだと感じていったためです。

また、日々の業務の中で、コロナウイルスによる社会の変化や学習指導要領の改訂などで学校を取り巻く環境が大きく変わってきていること、自分が大学で学んできたことと乖離し始めていることや年齢から多少の焦りも感じ始めていました。

以上のことから、次のキャリアとして学校の中で働いていくことを考え、退職という決断に至りました。

これから

まだ決まっていないですが、少しゆっくりしてから教員免許を取得するため通信制の大学で学び直しながら子供たちに関わる仕事をしようと思っています。

一番働くことを考えている小学校の教員免許は既に持っているので、試験を受ければよいだけなんですが、せっかくなので教科の専門性を高めることを考え、中高免許を取得しようと考えています。

5年間やってきたエンジニアから離れることになりますが、趣味や何らかの形でプログラミングは続けていくと思いますので、引き続きどこかで見かけたらその時はまたよろしくお願いします。

2021-04-10

JavaScriptのthisとは

ふと

JavaScript使ってきてるわりにthisのコンテキストが変わることについて、あんまり理解できてないなーと思ったのでMDN読みながらまとめる

developer.mozilla.org

thisとは？

JavaScriptでは式の1つで、関数の実行コンテキストを参照するものである
だが、呼び出し方やアロー関数などでもコンテキストが変わるのでややこしくなっている

use strictとそれ以外でまず異なる

use strict (厳格)モード
- どのような値でも取り得る
非厳格モード
- 実行コンテキスト(グローバル、関数、eval)のプロパティで常にオブジェクトへの参照である

グローバルコンテキストの場合

グローバルコンテキスト(トップレベル)ではthisはグローバルオブジェクトを参照する

console.log(this === window); // true

関数コンテキスト

関数内のthisは関数の呼び出され方と厳格モードの有無によって異なる

非厳格モード

呼び出し時にthisの値が設定されない場合規定のグローバルオブジェクトとなる

function func() {
  return this;
}

func() === window; // true

厳格モード

呼び出し時にthisの値が設定されていない、つまり関数がオブジェクトに属していない形で呼び出されるとundefinedのままになる

function func2() {
  'use strict';
  return this;
}

console.log(func2() === window); // false
console.log(func2() === undefined); // true

関数の呼び出し時にthisの値を特定の値に設定したい場合にはcallやapplyを使用して呼び出す

function func3() {
  'use strict';
  return this;
}

console.log(func3.call(window) === window); // true
console.log(func3.apply(window) === window); // true

また、bindで永続的に設定した関数を生成できる

const newFunc = func3.bind(window);
console.log(newFunc() === window); // true

Arrow Functionの場合

Arrow Functionの場合のthisは実行時ではなく関数の定義時に決まる
そのthisは自身の外側のスコープに定義されたもっとも近い関数のthisの値を指す
注意点としてArrow Functionはcall, apply, bindでthisを設定することはできない

const arrowFn = () => {
  // この時外側には関数は存在しないためトップレベルのthis、つまりwindowを指す
  return this;
};

console.log(arrowFn() === window); // true
console.log(arrowFn.call({ a: 1 })); // Window {...}

クラスコンテキスト

基本クラスの場合thisはそのクラスを指すまた、クラス内の非staticなメソッドはthisのプロトタイプに追加される

class Foo {
  constructor() {
    console.log(this); // Foo {}
    const proto = Object.getPrototypeOf(this);
    console.log(Object.getOwnPropertyNames(proto)); // ['constructor', 'bar']
  }
  bar() {}
  static hoge() {}
}

new Foo();

子孫クラス

継承先の子孫クラスではthisバインディングはなく、super()を呼び出すとコンストラクタ内にthisバインディングが作成される
このthisはsuperを呼び出したクラス自身を指す

class Base {
  base() {}
}
class Child extends Base {
  constructor() {
    super();
    console.log(this); // Child
  }
}
new Child();

オブジェクトのメソッドの場合

オブジェクトのメソッドとして呼び出されるときはthisはメソッドの所属オブジェクトになる

const obj = {
  count: 10,
  currentCount: function() {
    return this.count;
  }
};

console.log(obj.currentCount()); // 10

まとめ

基本的にはthisは呼び出し時の所属オブジェクトを指す
Arrow Functionのthisは呼び出し時ではなく定義時の外側のスコープに定義されたもっとも近い関数のthisを指す
関数コンテキストでは厳格モードと非厳格でthisが異なる

JavaScript Primerにもコールバックなどさらに詳しい情報が載っているのでこちらも読んでみようと思います jsprimer.net

2021-02-10

npmからyarn(v1)に移行する方法

最近仕事で、古めのサービスでnpmからyarn(v1)に移行する機会があったが、結構簡単だったので備忘録がてら残しておく基本的には以下公式のマイグレーションガイドに沿えば移行できる

Migrating from npm | Yarn

やることは一つで、package-lock.jsonがあるディレクトリ直下で

yarn import

を実行するだけ

これにより、package-lock.jsonをベースにyarn.lockを自動生成してくれる
最後に rm package-lock.json をしてyarn.lockだけを残せば基本的にはOK
後はCIやnpm scripts内でnpmを使っている箇所をyarnに置き換えるだけだった。

2020-07-29

自分がnpm scriptsを使う理由

普段よく使っていますが、改めて自分がなぜ好んで使うのか自分の備忘的な意味も込めて書いておきます

概要

package.json の scripts プロパティに定義しているスクリプトをnpm scriptsと呼びます docs.npmjs.com

例えば以下のようにpackage.jsonに書いている場合は

{
  "name": "npm-scripts-sample",
  "version": "1.0.0",
  "scripts": {
    "build": "webpack",
    "start": "webpack-dev-server --open"
  }
  ...
}

コマンドラインで以下のようにスクリプトを実行できます

$ npm run build

# yarn の場合
# run は省略可能
$ yarn (run) build

# 実行結果
# yarn run v1.22.4
# $ webpack
# Hash: 26a04d64a2da6e6f2c09
# Version: webpack 4.43.0
# Time: 2846ms...

メリット

cli をグローバルにインストールする必要がない
- 開発環境だけでなく、Dockerfile、CIなどでも
node_modules にインストールされているライブラリを使うので、個々人でのバージョンの差異が出ない
gulp などタスクランナーを導入しなくてもよい
長いコマンドでも簡潔なエイリアスを使って npm or yarn で実行できる

デメリット

複雑なタスクはやりづらい

基本的には npm scripts で事足りる印象ですが、複雑なタスク実行などは gulp 等で補ってもよさそうです

個人的には先程挙げた以下のメリットを強く感じるので、npm scripts を活用しています

cliをグローバルにインストールする必要がない

node_modulesにインストールされているライブラリを使うので、個々人でのバージョンの差異が出ない

参考

npm scriptsの活用方法などはこちらがわかりやすいと思います ics.media

2020-06-28

今さらだけどCircleCI2.1について学んだよ

CircleCI2.1について業務でまとめたので、載せておく

そもそもCircleCIとは

CI/CDのSaas

そもそもCI/CDとは

CI: 継続的インテグレーション
- ビルド、テストまでを自動化して、小さなサイクルで繰り返すことで、統合されたソフトウェアを迅速に開発する
CD: 継続的デリバリー
- CIを含めたリリースプロセス全体の自動化を行い、素早くソフトウェアに反映し、ユーザーに価値を届ける

CircleCI用語

参考: https://circleci.com/docs/ja/2.0/concepts/#section=getting-started

プロジェクト
- リポジトリに対応
ステップ
- ジョブを実行するために行うアクション。基本はコマンドの集まり
イメージ
- 実行コンテナを作成するためのパッケージ
- CircleCIが提供しているimageリスト
ジョブ
- ステップの集まり
- ジョブにはExecutor(実行環境)を宣言する必要あり
キャッシュ
- ビルドを高速化するために依存関係やソースをキャッシュできる
ワークフロー
- ジョブのリストと実行順序。ジョブを並列/順次/スケジュール/承認ジョブでの手動での実行など実行方法を設定できる
ワークスペース
- ワークフローに対応したストレージ
- ジョブ固有のデータを保存して、同じワークフロー内の他のjobで使えるようにしている
アーティファクト
- ワークフローが完了した後もデータを維持するストレージ

CircleCI2.1に乗り換えたい場合

config.ymlのversion指定を2.1にするだけ

version: 2.1

CircleCI2.1の新機能

参考・引用: https://discuss.circleci.com/t/circleci-2-1-config-overview/26057

commands

一連のstepをcommandとして定義できる
jobのstepで利用する

version: 2.1

commands:
  my-command:
    steps:
      - run: echo "a command is a collection of steps"
      - run: echo "this command has two steps"

jobs:
  my-job:
    steps:
      - my-command

executors

executorに指定する実行環境を定義しておける

version: 2.1

executors:
  my-executor:
    docker:
      - image: python
  my-other-executor:
    docker:
      - image: ruby

jobs:
  my-job:
    executor: my-executor
    steps:
      - run: echo "i'm using my-executor"
  my-job2:
    executor: my-other-executor
    steps:
      - run: echo "i'm using my-other-executor"

parameters

commands、executors、jobsで使えるパラメータを定義する。使える型は以下
- string
- boolean
- steps
- enum
<< parameters.param-name >> で展開する

commands:
  copy-markdown:
    parameters:
      destination:
        description: destination directory
        type: string
        default: docs
    steps:
      - cp *.md << parameters.destination >>

orbs

jobs, executors, commandsなどをまとめる
orbはパッケージとして公開されているので、インポートして利用できる https://circleci.com/orbs/registry/

orbs:
  codecov: circleci/codecov-clojure@0.0.4
  my-orb:
    executors:
      default:
        docker:
          - image: circleci/ruby:1.4.2
    commands:
      dospecialthings:
        steps:
          - run: echo "We will now do special things"
    jobs:
      myjob:
        executor: default
        steps:
          - dospecialthings
          - codecov/upload:
              path: ~/tmp/results.xml

workflows:
  main:
    jobs:
      - my-orb/myjob

conditional steps

when と unless という条件分岐のためのkeyが追加

jobs:
  myjob:
    parameters:
      preinstall-foo:
        type: boolean
        default: false
    machine: true
    steps:
      - run: echo "preinstall is << parameters.preinstall-foo >>"
      - when:
          condition: << parameters.preinstall-foo >>
          steps:
            - run: echo "preinstall"
      - unless:
          condition: << parameters.preinstall-foo >>
          steps:
            - run: echo "don't preinstall"

pre-steps and post-steps

名前の通りで、jobの前後に実行するstepを定義できる

version: 2.1

orbs:
  foo: somenamespace/foo@1.2
workflows:
  build:
    jobs:
      - foo/bar:
          pre-steps:
            - run:
                command: echo "install custom dependency"
          post-steps:
            - run:
                command: echo "upload artifact to s3"