2019年の振り返り
もう22時だ…簡単に振り返り。(あれ、去年は書いてない)
今年も引き続き、大学の研究室でエンジニア業をしていました。ほぼ1人チーム開発です。
(昨年度からは副業しづらい契約なので、フリーランス業はお休み中)
Webアプリ開発
フロントはReact、バックエンドはRubyかPHPでRESTful API、がほぼ定番化してきた感じ。今年は新規開発は少なめ。APIの仕様はSwaggerで定義している。
データベースはほぼMySQLだけど、最初のテーブル設計などはかなりマシにできるようになってきたと思う。
これまでに4〜5個は作っているので、だいぶ慣れては来たけど、もう少し丁寧にやりたい気持ちもある。
TypeScript入れるとか、テスト書くとか、CI入れるとか。
ただし、一般消費者向けサービスではないし、仕様変更も頻繁なので、どの程度までやるべきなのかが難しい。一人なので、なんとかなってしまってる、というのもあるかもしれない。
年明けに、仕様をきちんと固めてから作る案件がありそうなので、そこで導入したい。
そもそもWebアプリの仕様ってどういう風に記述するのが良いのでしょうか。おすすめあったら知りたいです。
機械学習
医療画像の判別モデルの作成にも取り組んでいました。
ディープラーニングのアルゴリズム自体は、全く専門外ですし手を出せず、既存のものを使っていましたが、学習データをいかに準備するか、というところが重要なのだ、というのが私の印象です。
そのためのツール(Webアプリ)作りや、効率化のためのスクリプト作成など、結果的にはかなり学ぶことも多かったです。
これから機械学習をメインにすることはないと思いますが、周辺でのエンジニアリングには引き続き興味があります。
心残り
やはり、フリーランスでのコーディング業がなくなったので、CSSを書く機会が激減しました。
いかに分かりやすく、無理せず、メンテナンスしやすくCSSを書くか、ということに取り組むのはとても好きなので、もう少し書きたい気持ちがあります。
その他
出張:オーストラリア・アメリカ。国内は九州が多かったかな?
あまり遠出すると、コードを書く時間は減るので、それはちょっとどうなんだ、という気持ちもあり。
勉強会とか技術系のカンファレンスももう少し参加したかったです。
あとは、自分用のお役立ちBotを作ったり、遊びでBot作って友達に笑ってもらったり、Puppeteer使って遊んだり…ちょっとしたことでも技術で何か解決したり、物作りしたりするのは楽しいですね。
来年
やりたい:TypeScript、TDD
サーバレスな設計も興味はあるが、仕事では様々な理由でオンプレサーバがメインになるので、難しそう。
CSSカウンターを使って変則的な番号付きリストを実装する
久しぶりにCSSカウンター便利だな、と実感したのでメモ。
CSSカウンターとはこういうものです:
CSS カウンターの使用 - 開発者ガイド | MDN
こんな感じの文書をWebページに掲載するときに(あくまで例ですがこういう構造)、
マークアップにはOL要素を使うのが妥当に思えます。
リストの通し番号より先にカッコ付きの文が出てくるので、CSSカウンターを使ってこんな感じでコーディングしました。
See the Pen
List with CSS counters by Yu Watanabe (@yuw27b)
on CodePen.
リストアイテムの先頭でなくても、任意の場所で通し番号を表示できるので便利です。
もちろんOL要素以外でも使えます。
改行入りのテキストをReactでレンダリングする
改行が含まれてると分かっている時は、component内に関数を用意して、行ごとにpタグで囲む。
または、brタグを挿入する
const textWrap = (text) => { if (typeof text !== 'string') { return null; } return text.split('\n').join('<br />'); }
改行が2連続の場合は、
<br /><br />
になるので、マークアップとしてはよろしくない。
そういう連続した改行というのは段落の切れ目を表しているので、ひとかたまりのテキストではなく、配列データにすべき、という気がする。
ユーザーがテキストエリアに入力するテキストなどは自由に改行ができてしまうが、場合によっては、連続していたら1つにする、みたいな処理をしてもいいのかもしれない。
ボタンを押したことが伝わるCSS
a要素やbutton要素のボタンのCSSは、最近よくこんな感じにします。
:active属性でボタンを押下した状態のスタイルを指定できますが、1px下に動かすだけでもユーザーに「ボタンを押した」ことが伝わります。
See the Pen
button:active by Yu Watanabe (@yuw27b)
on CodePen.
margin-topまたはmargin-bottomでも下に1px動かすことはできますが、もともとのマージンや、隣接・親要素のマージンとの相殺が起こっている場合もあるので、それらに影響のないtransformを使っています。
特に装飾に指定がない場合は、この「とりあえず1px動かしておくCSS」を入れています。
INSIDE FRONTEND #3に行ってきました
INSIDE FRONTEND #3に行ってきました。
#1以来、2回目の参加でした。
タイトル見て興味を持っていたのは、
- 大規模なフロントエンド開発の話
- BFF・TypeScriptあたりの現場の話
あたりでした。
Webサービス(主にフロントエンド開発)の機能の取捨選択や技術選定について、実際の現場でのお話を聞くのはとても勉強になりました。
ユーザー層や開発体制、納期などによって何が最適かは変わってきますが、その思考プロセスを知れたのはとても有意義でした。
メモしながら聞いてたので、備忘録に貼っておこう…と思ったのですが、モダモダしていたら動画が公開されておりましたので、そちらを。
www.youtube.com
時間が重なって聞けなかったものも見られるのでありがたいです!
その他。
会場がAbema Towersだったので、最新のオフィスビルはこんなのか…!というだけでも興味深かったです。
廊下のホワイトボードがJob boardになっていたり、Q&AにSlidoが使われていたりもしました。