頼りにするのと依存するのは違うという話

こんにちは、CTOの山岡(@hiro_y)です。このエントリーは「イノベーター・ジャパンAdvent Calendar 2021」の24日目の記事です。

あなたの会社に「頼りにできるエンジニア」はいるでしょうか。業務に必要なドメイン知識を持っていて、技術的にも複数領域携われる力があるような、そういう存在。

非常にありがたい存在なのですが、彼らに対して私たちはどうしても依存しがちです。この人に聞けば答えてくれる、安心感。それはいつしか依存に変わります。いつの間にか、その人なしではプロジェクトがまわらないようになっていたりしないでしょうか。その人がいるから他にエンジニアを入れなくていい、と判断してしまうこともあるかもしれません。

続きを読む

JavaScriptでイミュータブルな変数を定義する

こんにちは、エンジニアのたべたつ(@ttabtt3)です。このエントリーは「イノベーター・ジャパンAdvent Calendar 2021」の22日目の記事です。

今回は、勘違いされがちなJavaScriptのconstの挙動とイミュータブルな変数の定義の方法について書こうと思います。

constで宣言した定数はすべて変更することができない。

MDN Web Docs によるとconstでできないことは 再代入 及び 再宣言 なので、ちょっとした工夫をすると変更 できてしまいます。

実際に配列とオブジェクトについて例を見てみましょう

const arr = ['hoge']
const obj = { name: 'object' }

// 再代入、再宣言することはできない
arr = ['foo']    // Uncaught TypeError: Assignment to constant variable.
const arr = ['foo']    // Uncaught SyntaxError: Identifier 'arr' has already been declared

obj = { name: 'object2' }    // Uncaught TypeError: Assignment to constant variable.
const obj = { name: 'object2' }    // Uncaught SyntaxError: Identifier 'obj' has already been declared


// 破壊的なメソッドを実行することで変更できる
arr.push('foo')
console.log(arr)    // ['hoge', 'foo']

// オブジェクトの中身は保護されていないので変更できる
obj.name = 'foo'
console.log(obj)    // { name: 'foo' }

constというと変更できない、と思ってしまいますよね。 ですが、実際は簡単に変更することができるので、100行ある関数の先頭で宣言された変数が終わりには全く別の形になっている、というようなことが起こり得ます。

では、上記のような危険なソースコードをリリースしないためにはどういった対策をするべきでしょうか。 答えは変数を イミュータブル にすること、です。

イミュータブルな変数の定義の方法

JavaScriptのデータ型にはミュータブルなものとイミュータブルなものがあります。 ミュータブルな型は、例えばArrayやObject。対してイミュータブルな型はStringやNumber, Booleanです。

ミュータブルな変数は上記で記述したような、破壊的なメソッドを持っているためバグを含んだソースコードになる可能性があります。

そこでJavaScriptにはArrayやObjectのような変数を完全に変更不可能にするObject.freeze()が用意されています。

const arr = Object.freeze(['hoge'])

// イミュータブルになっているため変更できない
arr.push('foo')    // Uncaught TypeError: Cannot add property 1, object is not extensible at Array.push (<anonymous>)
console.log(arr)    // ['hoge']

このような方法で変数を定義することで、実装者が意図していない変数の変更をすることができなくなります。

ただし、これだけでは不十分でネストした配列やオブジェクトは変更可能、という欠点があります。

const nestedObj = Object.freeze( { key: { name: 'hoge' } } )

// 最も浅い階層は変更不可能になっている
nestedObj.key = 'foo'
console.log(nestedObj)    // { key: { name: 'hoge' } } 

// 深い階層は変更できてしまう
nestedObj.key.name = 'foo'
console.log(nestedObj)    // { key: { name: 'foo' } } 

ネストした変数を変更不可能にするには全てをfreezeするような再起関数を自作してあげるといいでしょう。

const deepFreeze = (obj) => {
  Object.freeze(obj)

  for (key in obj) {
    if (obj[key] === null) continue

    if (typeof obj[key] === 'object') {
      deepFreeze(obj[key])
    }
  }
}

const obj = {
  key1: {
    key2: 'hoge'
  },
  key3: 'foo'
}

deepFreeze(obj)

console.log(Object.isFrozen(obj))         // true
console.log(Object.isFrozen(obj.key1))    // true
console.log(Object.isFrozen(obj.key2))    // true
console.log(Object.isFrozen(obj.key3))    // true

まとめ

今回はconstでは変数を変更不可能にするには不十分で、freezeを使って変数をイミュータブルにする方法について紹介しました。 イミュータブルなプログラミングはJavaScriptに限らず、PHPやその他のサーバーサイドでも安全にプログラミングをするための手法なので、ぜひ色々な箇所で実践してみてください。

ブラウザのCross-Origin-Resource-Policy(CORP)と、Content-Security-Policy(CSP)について

Photo by Franck on Unsplash
Photo by Franck on Unsplash

こんにちは、エンジニアの@gorou_178 です。このエントリーはイノベーター・ジャパン Advent Calendar 2021 9日目の記事です。 近年、情報漏えいやセキュリティに関するニュースが多い中、ブラウザも色々な状況を踏まえとても進化しています。 その中で、Cross-Origin-Resource-Policy(CORP)Content-Security-Policy(CSP)について紹介します。

続きを読む

SVN経験者が図を使ってGitローカルリポジトリまわりを理解する

このエントリーはイノベーター・ジャパン Advent Calendar 2021 3日目の記事です。 こんにちは、株式会社イノベーター・ジャパン ウェブエンジニアの小野寺です。 エンジニア枠で10月に入社して約2ヶ月経過しました。 職場が変わればもろもろの環境は大きく変わりますね。 働く場所、働く人、いただく給与、開発環境、etc。 エンジニアにとって開発環境は重要なポイントです。

続きを読む

Webエンジニアとして駆け出そうとしているあなたへ

こんにちは、CTOの山岡(@hiro_y)です。

私はいくつかの会社でWebエンジニアの採用に携わっています。そうすると、否が応でも「駆け出しエンジニア」の方々を目にすることになるのです。採用媒体によって違いはありますが、多いと半分ぐらい「駆け出し」の方々なのでは…という媒体もあったりします。

人によってWebエンジニアになりたいと思う動機は様々です。純粋にエンジニアリングが楽しい人もいるし、もっと作るもの、プロダクトに関心がある人もいるし。その中に、どうやら稼げるらしいから、という理由があったとしてもよいと思います。会社に縛られないフリーランスになりたいからとか、リモートワークしたいからとか。動機は何であれ、Webエンジニアになりたい人が増えたのは単純にうれしいことです。

続きを読む

JP_Stripes in 福岡 vol.6 をオンラインで開催しました #JP_Stripes

f:id:gurimmer:20200324155120j:plain
JP_Stripes in 福岡 vol.6 ON AIR
こんにちは、エンジニアの@gorou_178 です。2020/03/23(月) にJP_Stripes in 福岡 vol.6 をオンラインで開催し、「Stripeとアプリケーションの関係を可視化してみた」というタイトルで発表してきました。

eventregist.com

続きを読む