WINDOW DESIGN

instagram

良い設計をしよう (プログラミングの話)

2020/10/30

最近はYoutuberという発信方法がすっかり定着してきて、猫も杓子もYoutubeの発信をしている。僕はQitaというプログラマー版Noteのような記事投稿サイトの人気記事ランキングのメルマガを購読しているのだが、そこでもちょくちょくプログラマーYoutubeの話題が出てくるようになった。

僕は元々Youtubeで人生の時間を浪費しているタイプなので、早速みてみるとこれが面白いし、めっちゃ勉強になります。

僕がみているのはKENTAさんとか、しまぶーさんとかのチャンネルだけど、魑魅魍魎的に様々な概念が入り混じるプログラミング情報の雑多なわかりにくい情報が、綺麗に整理されて分かりやすく説明されるので、単純に勉強になりますし、そういうことだったのね的に変に納得感もあるし、こんなのただで配信されるとはすごい時代になったもんだなと思ってしまいます。

昔のコーディングはシンプルだった

僕がコードを書くことを始めたのは26才の時で、その前は写真業界でレタッチと言われる写真の合成とか補正作業をやっていました。でもその業界で二年ぐらい働いてみて、大体のことはできるようになったのですが、二年ぐらいで大体のことができるようになるぐらいの仕事だと将来やばいだろうなあという危機感から、Web業界を志したと記憶している。

自分でちょっと勉強もしたりしたが、如何せん難しすぎるので、60万ぐらいのお金を払ってデジハリに行って三ヶ月間、HTMLやらCSSやらjQueryやらを勉強したのが最初の勉強だった。

昔は今のようにYoutubeで業界の分かりやすい情報が簡単に手に入ることはなかったので、どの言語を勉強するかとかいうことを吟味することもなく、気がついたらHTMLとCSSを勉強していたけど、あの時最初からRubyとかのバックエンド系の言語を選んでいたら、多少人生も変わっていただろうなと思ったりする。

しかし当時はWebサイトのコーディングはシンプルなもんで、スマホもなかったし、レスポンシブもなかったし、SPAもなかったし、Reactもなかったし、モジュールバンドラーもなかったし、npmもなかったし、gitもなかったし、何にもなかった。だから初心者の僕でも何とか業界に転職するとっかかりができたように思う。

それが今やフロントエンドだけでもややこしい概念で溢れていて、初心者には最初から巨大な壁が立ちはだかり、当時の僕のような転職希望者は途方にくれているんじゃないだろうか。

Vueとwebpackの便利さ

ここ一年ぐらいで新しく取り入れたフロントエンドの技術としては、Webpack、Vueを用いたJSのモジュール開発がある。これらの技術を使って、ユーザーが作ったユニフォームのデザインを公開してみんなで共有できる、「みんなのデザイン」というコンテンツを作った。

最初はどうしてWebpackを使うのかも良く分からなかったし、Babelって何でいるねんって不信感しかなかったが、エンジニアの慣れというものは恐ろしいもので、今やBabelを通さないとES6の新しい書き方が書けなかったりするので逆に不便に感じてしまう。

またモジュールバンドラーを用いることで使用できる、Vueの単一ファイルコンポーネントという概念は革命的だと思う。

まだ使ったことのない人に少し説明すると、単一ファイルコンポーネントとは一つのJSファイルの中に、JSで使うオブジェクトデータ、HTML、CSS、画像ファイルを丸ごと閉じ込めてモジュール化し外からの影響反映を限定化する。

それらのコンポーネントを組み合わせてウェブアプリケーションを作るという概念なのだが、モジュール化することでデータの影響範囲を限定し、それぞれが独立を保ちながらも全体としては連携して機能するということがやりやすくなる。

とテキストにすると、ますます分かりにくいが、体感してしまえばこれは結構すごいことなんです。

フロントエンドもデータ設計と向き合わないといけない時代

しかし、問題もあります。僕がいわゆるモダンなフロントエンドの開発で問題だなあと思うのはフロントエンド側でもデータというものに本気で向き合わなければいけなくなったということだと思います。

LaravelなどのPHPでバックエンドを開発すれば、データはあくまでもバックエンド側で処理してView側には渡すだけという仕組みなので、シンプルです。

しかしフロントエンド側でもデータをあれこれしないといけないとなれば、僕みたいにどっちもやらないといけない人は、工数が二倍になってしまう。むしろJSをモジュール化すればそれぞれのモジュール間のデータの引き渡しや何をprivateにして、何をpublicにするかということも考えないといけないし、バックエンドとはまた違う難しさがある。

しかも結局DBを編集することはバックエンドに任せないとできない。
他にも重大なSEOの問題もあるし、これはちょっと世界が複雑すぎやしませんかと言いたい。

しかしモダンな開発手法を取り入れず、古い世界に留まり続ける選択はエンジニアとしては一番やってはいけないことであるし、ウェブサイトの競争力も落ちていくことを意味する。

設計の重要さが大きくなった

こういう状況もあって僕が最近痛感したのは、設計の重要性です。バックエンドでもフロントエンドでも昔は最低限のER図とかデータ設計を作って、さくさくと進めていけることができた。世界はまだ牧歌的だったのである。

でも最近はそれをやると、「あれ、ここのデータってどうなってるんだっけ?」「何でここにバグが出てくるんだ?」「ここの関数を再利用したいけどなんかうまく行かない。。」ということになってしまう。

だから最近は設計書というものに本気を出すようになった。というか、良い開発ができる可動化は、ここでほとんど勝負はついているという真実にようやく気がついた。

バックエンドで言えば、URLリストに、httpメソッド、使用するコントローラー、関数、viewファイル、送信データ、受信データ、共通関数をどこに設置するか、引数はこれで、返り値はこれで。。。というのを細かいところまでスプレッドシート に記入していく。

それで「んー、ここは同じことをしてるから関数を独立して再利用したほうがいいなあ」とか「あー、ここでこういう場合とこういう場合があるから矛盾が出るなあ」とか「ここのステータスの名前はこれで適切だろうか?」みたいなことを延々とやってるわけである。

こういうことに1/3ぐらいの工数を使うようになった。でもここで矛盾のない設計書を作れると実際の開発でもうまくいくのは必然である。いい設計書ができたと実感できると早く開発したくてウズウズするし、自分の考えた設計が一つ一つ形になっていく工程は、何とも言えない静かだけどふつふつとした確かな喜びがある。

まとめ

ということで、プログラミングだけじゃなく、人生も会社も設計が命です。
そもそもの方向性が間違っていたら貴重な時間があっという間に過ぎ去って水泡に帰してしまう。

ところがプログラミングと違って、人生や会社は「こうなれば正解!」というものは簡単には見つからないのが辛いところですね。

一覧に戻る