自己紹介

初めまして。18年の5月にSAKURUGに中途入社し、5年目になりましたRyoと申します。

過去に医療従事者向けの情報サイトの運営や、専門店のECサイトの作成や運営保守を行っていました。

普段の業務

おおまかな業務の紹介としては、アーティストやミュージシャンのファンクラブサイトの保守や、コンテンツの更新などがメインになります。
自分自身で1Pのランディングページを作成し、業務用のCMSへの組み込みまで行ったり、制作会社さんの制作したコーディングデータを受け取って組み込んだりといろいろです。

完成したサイトに新たな機能を組み込んだりと、制作だけではなく保守的な作業を行うこともあります。

現場で使われている技術

私の場合、基本的にはほとんどの場合HTMLとCSSで完結しますが、時々JavaScriptやjQueryで動的な機能を実装することもあります。
サイトによってはvue.jsを使って要素をレンダリングし、サイト全体のメンテナンス性やカスタマイズ性を向上させている場合もあります。

大規模な開発案件ではGitLabを使用し、ソースのバージョン管理を行っています。

サイトの組み込みに関しては独自のCMSを用い、簡単なマークアップでいろいろな要素を呼び出したり複数の個所の修正を1か所の変更だけで行えるようなシステムとなっています。

最近躓いた箇所

過去にはECサイト作成、運営などを行っていたのですが、基本的には【HTML/CSSコーダー】というポジションとして活動（JavaScriptなどを含む動的な機能を実装するフロントエンジニアは別にいた）ので、jsの実装が必要なサイトについてはまだまだ躓くことが多いです。
最近、vue.js関連で躓いた案件がありました。

vue.jsでHTMLをレンダリングされたHTML内で別のJavaScriptを動かしたかったとき、どうしてもjsが実行されずに長時間悩んでしまいました。
結論としては、vue.jsによってHTMLがレンダリングされるより前に別のjsを実行しようとしてしまったので、『要素がないので処理を実行できません』というような不具合でした。

このように、フレームワークとネイティブのjsが競合しないような書き方や、エラーの読み解き方で苦戦してしまいます。

あとはマルチデバイス対応です。
webエンジニアにとってはとして、複数のデバイスで快適に利用できるように設計するのは必須課題だと思うのですが、これがなかなか難しい…。
特にWindows←→androidスマホみたいな環境は比較的簡単に検証して制作できるのですが、iOS/iPadOSとかってすごく独特な挙動をするんですよね。
なのでブラウザで検証して実機で見たらガタガタなんてこともしばしば…（特にタブレット端末は横持ちのレイアウトも確認しないといけないとか、ブラウザごとにUIが違うとか）。

今後使ってみたい技術

上の項目でも書いたとおりですが、まだまだjsに関してはわからないことが多すぎるので、まずはネイティブのjsに関する知識を身に着け、ゆくゆくは現場でも導入されているvue.jsなどのフレームワークを使いこなせるようになりたいと思っています。

JavaScriptフレームワークの人気度などを見ても、vueは学習コストが低いらしく、そういったとっつきやすさからしても今後のweb開発現場での主流になっていくのではないかと思います。

勉強方法

今時ピンポイントで使いたい技術や実装したい機能名で検索すれば、エンジニア向けの開設サイトが山ほどヒットするのですが、基礎的な学習にはやっぱり書籍を買うのがいいじゃないかなと思いました。
私の場合、電子書籍で教本を買っているので、外部モニターに教本を表示しながらメインのモニターで学習を行っています。

以前はプログラミングの解説サイトなどで学習を行っていたこともあるのですが、実装した機能のデモサイトが消失していたりすることもあったので、ややはりテキストが手元にあるというのは安心感があります。（とはいえweb技術はどんどんバージョンアップするので書籍の内容は古くなっていくという点で一長一短ありですが。）

ちょっと応用的な技術についてや、エラーメッセージの意味が分からないといったときにはteratailなどで似たような事例を検索することもあります。

最後に

コーダー→フロントエンジニアへのステップアップを目指します！