Blog

2019学んだことの振り返り

令和の幕開け イラスト

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

フロントエンドエンジニアの大房です。
アドベントカレンダーの季節になり、2019年も残り1ヶ月です。
去年に引き続き、アドベントカレンダーをやりたかったので言い出しっぺの法則で1発目を書きます!
自分にとっては2019年をinputの1年にするという目標を持っていたので、この1年で学んだ技術を簡単に振り返りたいなと思います。

Web Design

マークアップエンジニアとして入社し、今までデザインのことを勉強したことがなかったのでまず勉強をしました。
どの些細なデザインにも意味があるとは思ってはいましたが、どんな思考でデザイナーさんがデザインをしているのかをフロントエンドとして興味をもったのがきっかけです。
色使い、レイアウト、フォント、余白など、コミュニケーションをとりやすくして実装する際にどのようにコンテンツを作るのかイメージしやすくなりました。
今後もUI,UX方面を勉強していきたいなと思います。

Nuxt.js

私はVue.jsからモダンフレームワークに触れ、コンポーネント設計、仮想DOM、リアクティブデータバインディングのコンセプトが素晴らしいなと感じました。
そんな中、Nuxt.jsというユニバーサルフレームワークはどんなサイト、アプリケーションを作る際にも便利だなと思いました。
Vue.js,Nuxt.jsは日本語ドキュメントがわかりやすく提供されているので入門には最適でした。
現在は時期Vue.jsの策定が進められていますが、型がつけやすくなったりより使いやすそうな感じになるみたいなのでとても楽しみです。
このGEEK blogに関しても私がNuxt.jsを用いて私が実装しました。

React

Reactについては今年になって勉強をし始めました。
JSモダンフレームワークの概念を広めたライブラリなだけあって幅広く世界に支持されている理由をやってみて感じました。
JavaScriptをそのまま拡張することが出来るので後述のTypeScriptなどと相性がよく、リファレンスも豊富なので学んで行きたいと思います。
今年2月に登場したReact Hooksはとても使いやすいと思うので今後のスタンダードになればと思います。

TypeScript

JavaScriptに型を柔軟につけられるTypeScriptは実際に開発で使ってみるとVSCodeの恩恵もあり、かなりエディター補完も出来て便利と思いました。
ただただJSで処理を書いてあるプロジェクトにも入れるだけである程度の秩序をもたらせてくれるのはすごいと思いますね。
新規開発でのanyは個人的にはできるだけ使いたくはありませんが、既存のプロジェクトに対しても徐々に入れられる柔軟性が良いですね。
まだまだ使い慣れてはいないので勉強していきたいです。

Atomic Design

フロントエンドの設計で一般的になったAtomic DesignはUIを原子からパーツを組み立てて構築していくUI デザイン手法です。
実装とデザインで共通にコンポーネントを構築していくことができますが、やはりプロジェクトごとに完全に概念に沿って当てはめていくことがなかなか難しいと度々議論になっていますね。
モダンフレームワークのコンポーネント設計とは確実に相性がよいので、使いこなしていきたいなと思いますね。

a11y

a11y = アクセシビリティに関しては今年は試行錯誤をしてみました。
直近で言えばアクセシビリティの監修の立場になったりして実装面だけではなく、ヒューマンリーダブルの観点をアドバイスできるよう勉強しています。
アクセシビリティは基本おろそかになりがちな所だと思うのですが、そんなに気負う必要がない、すぐにでもよくすることが出来るという点を布教していきたいと思います。
また詳細はWeb アクセシビリティ2019アドベントカレンダーにてやっていき表明をしたいと思うので、よろしければご覧ください!

Jest(テスト)

今年はフロントエンドのテストに関して初めて書いていきました。
フロントエンドのテストってなんか難しそうだなーと思っていましたが、Jestはとても使いやすくVueでもReactでもわかりやすかったです。
またテストが書きやすいような実装を意識するという点で勉強になり、より良い設計の理解が深まりました。
ユニットテストまでしか書いたことがないので来年はE2Eまで書いていきたいなーと思います。

勉強会などへの参加

今年1年間でのイベント参加はこんな感じでした。

  • CA11Y #2 〜iOS/Androidアプリのアクセシビリティ〜@2019-11-28
  • PWA Night vol.10 ~PWA × 技術~@2019-11-20
  • Yumemi.vue #1@2019-09-19
  • Roppongi.vue #2@2019-07-31
  • Japan Accessibility Conference – digital information vol.2@2019-07-20
  • Ginza.js#2@2019-06-24
  • Roppongi.vue #1@2019-05-27
  • Inside Frontend#3@2019-05-18
  • 最近のDMMのフロントエンドの動向とその先について@2019-05-08
  • NuxtMeetUp#8@2019-05-07
  • Vue.js v-tokyo Meetup #9@2019-04-24
  • Frontrend × Bonfire Frontrend@2019-04-15
  • いま押さえておくべきJavaScriptの最新機能とは?@2019-04-02
  • freee Tech Night #2 「大規模SaaSを支えるフロントエンドの話」@2019-03-26
  • Frontend Training Meetup #1@2019-03-13
  • CA11Y #1 〜アクセシビリティはじめて物語〜@2019-03-08
  • RAKUS Meetup Tokyo #2 フロントエンドNight@2019-02-19
  • We Are JavaScripters! @28th@2019-01-25
  • Bonfire Frontend #3@2019-01-24
  • 次世代 Web カンファレンス@2019-1-13

来年はもっと参加していきたいです!

おわりに

今年もGEEKのアドベントカレンダーを始めさせていただきました。
次回(12/2)はエンジニアチームの深坂さんになります!

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

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

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

CATEGORIES