Blog

半年間マークアップエンジニアをやってみてわかったこと

投稿サムネイル

この記事はGEEK Inc. Advent Calendar 2018の8日目の記事となります。

マークアップエンジニアの大房と申します。
7月に初めてマークアップエンジニアとして入社し、この半年間に学んだことなどを書きたいと思います。

Visual Studio Codeについて



ご存知の通りMicrosoftによって開発されたソースコードエディタです。
私の初めて触ったエディタはAtomだったのですがフロントエンドの人みんなVSCode使ってるな・・・便利なのかな・・・、と思い今年に入り使い始めました。
VSCodeをインストールすると、以下のデフォルト機能が最初に思う便利なところです。

  • IntelliSenseと呼ばれる入力支援機能がある
  • Gitと連携し、基本的な操作ができる
  • VSCode内でターミナルを起動できる
  • Emmetを使うことができる
  • ミニマップが表示される
  • エクスプローラーにファイルアイコンが表示される
  • 矩形選択ができる

Atomであれば拡張機能をインストールしなければいけない機能もあります。そう考えると、VS Codeは標準でも充分な機能が備わっています。
他にも拡張機能で他のエディタから移行しやすいようなものがあります。(Atomのキー設定、テーマと同じようににすることができる拡張機能など)
しかし業務中にVSCodeを使うことでハマってしまうものもありました。
以下のQiitaで私が書いた問題です。
VSCodeの複数ファイル、複数行、置換について

VSCodeではGlobal Searchでの正規表現改行を使って複数行の検索、置換が今年の10月まで出来ませんでした・・・
他のエディタでは普通にある機能だし、Global Searchで一行なら正規表現使えていたのでまさか出来ないとは思いませんでした。
現在はUpdateにより実装され問題なく使えますが、このようなデメリットもあるのだなと思いました。
ちなみに HTML5 Conference 2018に初参加しまして、VSCodeのセッションを聞いてきました。
Visual Studio Live Shareという複数人のリモートで開発ができる (Google スプレッドシートのような感じ)、ペアプロにもってこいの機能のデモをやっていましたがいずれ業務で使ってみたい機能です。

CSS設計

BEMやOOCSSなどは知っていましたが以下の代表的なものが他にがあることを知りました。

  • SMACSS
  • MCSS
  • SUIT CSS
  • FLOCSS
  • ECSS
  • AMCSS
  • RSCSS
  • ITCSS
  • FLOU
  • APB CSS
  • [UI]コンポーネント設計
  • 代表Atomic Design
  • JavaScriptを使ってカプセル化
  • Web Components
  • CSS in JS

実際に弊社に入りECSSを使って書いているものがありますが、マークアップエンジニアとしては上記の知識を持ち、開発体制にあわせて選定をできるようになりたいですね。

アクセシビリティ


個人的に弊社MEチームに入り意識がかなり変わったものがアクセシビリティに対しての考えです。
アクセシビリティ?画像altとかの音声読み上げのやつ?という知識程度しかありませんでした。
後述の技術書典での弊社大山さんのアクセシビリティ入門書、社内アクセシビリティ勉強会、HTML5 Conference 2018の「セマンティクスの作り方、これまで、今、そして未来」のセッションなどから完全に意識が変わりました。
アクセシビリティはそもそも障害者のものだけではなく、アクセシブル=いかにユーザーが訪れやすいサイトにするかどうかという認識を知りました。

ユーザビリティとはまた別のこと。
今後はHTML5の機能のみならずWAI-ARIAなどの技術を積極的に取り入れたい。
そもそもエンジニアに限った話ではないので会社単位で取り組めればなと思います。
フロントの技術として他の派手な技術に埋もれがちなイメージがありましたが今後勉強会などに行き、知識をもっと得たいと思います。
アクセシビリティは深い。
 

その他:技術書典5


技術書典5に一般参加をしました!
弊社からもME/FEの大山さんがアクセシビリティの本を出しサークル参加なされていたので買わせていただきました。
どんどん会場も人数も多くなっているようで、盛り上がりつつありますね。
間違いなく流行の技術からニッチな技術がWeb系のみならず、ピックアップできるイベントなので来年も参加したいです。

乱雑に思ったことを書いてしまいましたが来年はもっと絞って深い話ができるようにしたいです。
次回(12/9)はME/FEの大山さんになります。なにやらエモい話のようです。

最新の技術と手法を用いて、
IT分野で変化と進化を続ける
Webインテグレーター

神田北信ビルエントランス

株式会社GEEK 〒101-0033
東京都千代田区神田岩本町4-4 神田北辰ビル3F

CATEGORIES