初めまして、デジタルステージ開発チームでフロントエンドエンジニアをやっている藤澤(@f_a24_)です。
最初の記事ということでまずはデジタルステージのフロントエンド環境はどんな感じなのか、今後どういった技術を使用していこうと思っているか、といった部分を紹介出来たらと思います。
ちなみにですが、タイトルに"デジタルステージの"って書いていますが会社としての方針ではなく私自身の勝手な考えになりますのでご了承ください。
（とはいっても新規開発系のフロントエンドは割と私が担当することが多いので"デジタルステージの"って書いちゃっても良いのかなと思い、思い切って書いちゃいました…）
使用している技術
私が把握しているところで言うと、基本的に以下の構成が多いかと思います。
・JavaScript
・jQuery
・ExtJS
・CSS
・Sass
・Compass
・ビルド・バンドルツール
・Gulp
・Blowserify
この構成をベースとしてプロダクトごとにjQueryプラグインやjQueryを独自にフレームワークっぽく拡張したりして開発されています。
今後使用していこうと考えている技術
基本的にはReact・TypeScriptをベースとした構成を推し進めていこうと考えています。
（DressやSHiFTは既にこちらの構成で開発されています）
理由としては以下の通りです。
・React
・ 自分が入社した時にいくつかReactが採用されたプロダクトがあった
・ 開発メンバーも多くはないのでフレームワークやライブラリをあまり増やしたくなかった
・ 自分の好みと偏見…
・TypeScript
・ 型があるのは最初抵抗あるが慣れてしまえばとても開発体験が良いと感じた
・ 開発メンバーほとんどがVisual Studio Codeを使用している
・（余談１）Dressは当初Flowを採用したがTypeScriptで書き直した
・（余談２）SiGN開発時はTypeScriptのバージョンが1.~で自分がSublime Text使ってたこともあって大変苦戦した
状態管理については現時点でReduxを使用していますが、今後はReact ContextやRecoilなど合うかどうか試してみて検討していこうと考えています。
また、条件によってはGraphQLを導入してApollo Client なんかも使ってみたいなと個人的には思ったりしています。
CSS関連は基本的に以下を使っていますが、こちらも色々と試してみて検討していこうと考えています。
・ styled-components
・ Material-UI
ビルド・バンドルツールは基本的にwebpackを使用していくつもりです。
現時点では雑な設定になっていると思うので私自身、もう少しwebpack筋を鍛えられたらなと思います…
あまりメンテナンス出来ていないですが、これらの構成でテンプレートも作りましたのでPRお待ちしております(笑)
https://github.com/digitalstage/UIPlate
既存プロダクトについて
全て書き換えたい気持ちもありますが既にプロダクトが運用されている状況で書き換えるというのはリスクなど考えると色々と難しい部分もあるので以下のような部分から小さく少しずつ改善出来たらと考えています。
・TypeScriptで型を導入する
・ESLint・Prettierを導入する
・Jestなどのテストツールを使ってテストを出来るようにする
最後に
今回は最初の記事ということで弊社（私自身）のフロントエンド環境について紹介しました。
プロダクト自体も私自身もまだまだ改善課題が山ほどあり、私自身の成長がプロダクトの改善に繋がってとてもやりがいのある仕事だと感じています。
今後も少しずつではありますが改善してより良いサービスを提供していきたいですね。