「フロントエンドのモデル駆動設計」の見解（場外編）

背景

2023年12月、さくらのテックランチというイベントで「フロントエンドの複雑さに立ち向かう 〜 DDD と Clean Architecture を携えて 〜」という発表をした。ありがたいことに多くの人に見ていただき、（観測範囲では）好意的な意見をいただいた。その影響は大きく「現場から学ぶモデル駆動の設計」という勉強会を主催されている方の目にとまり、座談会メンバーとしてオファーをいただき2024年2月1日に参加してきた。

がっつりカンペを用意したのだが、時間の都合や流れ的に話せなかったことがあるので、4年ぶりにブログを更新しようと思う。

座談会は「バックエンドエンジニアがフロントエンド開発するときの悩み」というテーマで、以下のようなトピックがあった。

• フロントエンドの学び方
• バックエンドの知識をフロントエンドに応用できるか
• UIコンポーネントの設計方法
• ステートレスとステートフル
• テストの手法
• 質疑応答

ドメイン駆動設計の用語と解説（DDD入門ガイド）

中〜大規模アプリケーションを開発するノウハウを持っておらず、どのようにシステム設計するのが良いのかわからなかった。そのため、1週間ほどドメイン駆動設計（Domain-Driven Design）について勉強した。

当記事では、勉強中に得たドメイン駆動設計をわかった気になれるのに必要な用語のまとめや、実装でどのように使われるかをまとめる。

筆者は「実践ドメイン駆動設計」を読んだわけでも、完全に理解したわけでもない。しかし、雰囲気を掴むための情報はわかっている状況なので、間違っている箇所があったら指摘していただきたい。

ドメイン駆動設計とは？

ドメイン駆動設計（DDD、Domain-Driven Design）を一言で説明すると「現実世界の業務をドメインモデルに詰め込んでソフトウェアに深く反映させる設計手法」だ。

詳しい説明は後述するが、ドメイン駆動設計の全体図は下図のような感じだ。

自作フレームワークをつくって学ぶ 仮想DOM実践入門

昨今の代表的なJavaScriptフレームワーク（React、Vue.jsなど）には「仮想DOM（Virtual DOM）」という概念が採用されているので、フロントエンド界隈の人は一度は耳にしたことがあるだろう。ただ、仮想DOMについて学ぼうと検索してもヒットするのは「フレームワークの使い方」ばかり。踏み込んでいても概念の説明どまりで、仮想DOMがどのように実装されているか解説した記事はすくない。

ということで、当記事では理解を深めるために仮想DOMを使ったフレームワークを自作し、仮想DOMに入門する！
そして、ReactやVue.jsを単なるブラックボックスのフレームワークではなく、中身を理解して使えるようになることを、当記事の目標とする。


フレームワークが完成すると以下のようなWebアプリケーションがつくれるようになる。

[golang]TCPサーバ/クライアントをつくって学ぶTCP/IPの基礎

フロントエンドエンジニアとして働く分にはHTML/CSS/JSの知識だけで良いのかもしれないが、仕事上でTCPについての知識が必要になった。しかし、TCPについては基本情報技術者レベルの知識しかなく、いまだにOSI参照モデルが実際のアプリケーションとどう関連付けられるかわかっていない。

そこで、低レイヤーの学習も兼ねて、Go言語（golang）でTCPサーバーとクライアントをStep by Stepで実装し、TCP/IPについてより深く学ぼうと思う。

知識編: TCP/IPとは

インターネットやネットワークについて学んでいると必ず出てくるのが「TCP/IP」だ。OSI参照モデルの第3層（ネットワーク層）のIP（Internet Protocol）と第4層（トランスポート層）のTCP（Transmission Control Protocol）の2つのプロトコルから構成されており、インターネットで標準的に利用されている通信プロトコルだ。

OSI参照モデルとTCP/IPプロトコル群

基本情報技術者の試験ではOSI参照モデルの概念についてしか触れないが、TPC/IPプロトコル群（別名: インターネット・プロトコル・スイート）も存在する。TCP/IPプロトコル群のほうが効率的で、かつ現実的な仕様となっているので一般的に使われており、OSI参照モデルは「概念」として残っている。

OSI参照モデルとTCP/IPプロトコル群の対比表

OSI参照モデル	TCP/IPプロトコル群	プロトコル
アプリケーション層	アプリケーション層	HTTP, SMTP, POP3, Telnet, …
プレゼンテーション層
セッション層
トランスポート層	トランスポート層	TCP, UDP
ネットワーク層	インターネット層	IP, ICMP, ARP, RARO
データリンク層	ネットワークインターフェース層	Ethernet, PPP
物理層

さくらのクラウドのVPCルータを使って学ぶVPN接続の基礎

パブリッククラウドを使うときに一番気になるのが「セキュリティ」だ。私自身、インフラやネットワークについてはド素人なので「とりあえずVPN接続ってやつをすればいいんでしょ？」程度の知識しかない。VPNについてなんとなくわかっているが、どのような仕組みでセキュアな接続ができるか知らない。

ちょうどさくらのクラウドの2万円クーポンが手元にあるので、VPCルータアプライアンスを使って、VPN接続について掘り下げて勉強しようと思う。目標は「VPCルータにVPN接続し、クラウド上のサーバにアクセスする」だ！

VPCルータ とは

VPCルータは、VPC(Virtual Private Cloud)環境を簡単に構築できる仮想ルータアプライアンスです。
VPCルータ | さくらのクラウドニュース

ちょっと何言ってるかわかんないっす。

なので、詳しく調べた。

シェルスクリプトでCentOS6.x/7.xの初期設定をする

CentOSでサーバを立てたときに、まず最初に必ずやっておきたい初期設定がある。
その作業の一覧が以下のとおり。

• パッケージを最新化する
• 新規ユーザを作成する
• suコマンドを制限する
  • suコマンドを実行可能なユーザ・グループを限定する
  • 特定のグループ以外suコマンドでrootに昇格できないように制限する
  • パスワード入力なしでsudoコマンドを利用できるようにする
• ssh接続を制限する
  • rootユーザのsshログインを禁止する
  • sshで公開鍵認証のみ接続を許可する
  • sshでパスワード認証を禁止する
  • 公開鍵をサーバに登録する
• sshdサービスを再起動する
• iptablesまたはfirewalldの設定 ←今回はやらない

Webアプリケーションをつくりたくて、WebサーバとAPサーバを用意しようと思ったが、毎回この初期設定をするのが超絶メンドそう...。

ということで、自動化するために初期設定をしてくれるシェルスクリプトをつくったので、その詳細な説明と「なぜ設定が必要なのか」をまとめていく。

SHA-256, 512でハッシュ化し認証するログインフォームを実装する

Webサービスをつくるにあたり考えなければならないのが「認証方法」
ユーザIDやメールアドレスとパスワードでの認証が一般的だ。しかし、そのまま平文で管理してしまうと、どんなに複雑で長いパスワードにしてもものの数分、数時間でクラックされてしまう。

Webサービスをつくる上で重要なのはセキュリティ対策だ。

その中でも今回は「ハッシュ化」について学んだので、その内容を活かしてログインフォームを実装してみた。

重複組合せでパスワードを生成し総当たり攻撃(Brute-Force Attack)をする

総当たり攻撃を行った場合は、不正アクセス禁止法 に違反し、3年以下の懲役又は100万円以下の罰金が科せられる。（不正アクセス行為の禁止等に関する法律 第11条 - 警察庁(PDF)）
また連続で膨大なアクセスを行うため、DoS攻撃として威力業務妨害となる可能性もある。
絶対に行わないようにしてください。

---

セキュリティを学ぶ上で、防御側の立場しかしらないと適切な判断ができない思い、攻撃側の立場にたち、総当たり攻撃（Brute-Force Attack）のアルゴリズムを考えてみた。

総当たり攻撃（Brute-Force Attack）とは

総当たり攻撃とは、暗号の解読やパスワードの割り出しなどに用いられる手法の一つで、割り出したい秘密の情報について、考えられるすべてのパターンをリストアップし、片っ端から検証する方式。
総当たり攻撃 ： IT用語辞典

もっとも原始的な暗号解読方法のひとつで、考えられるパターンをすべて試行する攻撃。
たとえば3桁のダイアルロックがあれば、000、001、002〜998、999のようにすべてのパターン（3桁の数字であれば1000通り）を試行して、パスワードを解読する。

ただ、これではあまりにも時間がかかりすぎてしまうため、よく使われるパスワード（passwordやadminなど）をあらかじめ用意しておいて、その辞書をもとに攻撃する手法もある。

プログラマに伝えるためのIssue（バグレポート）の書き方【GitHub編】

GitHubでアプリケーションを公開してから、Todoの代わりとしてIssueを書きたくなった。
ということで、プログラマに伝えるためのIssue（バグレポート）の書き方をまとめてみた。
ついでに、前職の炎上プロジェクトで多くのバグ報告を書いて、対応してきたので、そのときの経験も踏まえて書いておく。

Title

タイトルを書くときのポイントは次のとおり。

• 簡潔であること
• バグの内容が把握できること
• 設計要素の名称を書くこと
• 発生した状況がわかること

例：【伝票検索画面】キーワードを入力し検索ボタンを押下するとエラー

タイトルの先頭に【優先度】や【機能名】のように、隅付き括弧で目印を書くことが多い。

独身SEがやらかした結婚式で絶対やってはいけない行動ベスト3＋α

2014年11月吉日
@XIAORING さん、ご結婚おめでとうございます。
おふたりの幸せが末永くつづくよう、心からお祈りしています。

また、SEという結婚とは程遠い世界からの参加ということで、恥ずかしながら数々の愚行をおかしてしまいました。この場を借りて、心よりお詫び申し上げます。

ということで、大学で同じ研究室だった友人（@XIAORING）の結婚式に参加した。

結婚式に参加するのは初めてで、案の定のやらかしてしまった。
そこで私がやらかした愚行 ベスト3 を紹介する。


みなさんは、絶対やらないように！！！

新人SEのためのわかりやすい与信講座

後輩（2年目くらい）に与信について説明するのに使ったモノをまとめる。

できる限りわかりやすい言葉を使用しているため、詳細な意味を知りたい場合は、Google先生に聞いてください。

商社PJで3年間働いたSEが教えるいろんな価格と意味

SE歴の大半が某商社プロジェクトだった。
そこではいろんな価格が使われており、売上・仕入・原価くらいしかわからなかった私には呪文のようなに聞こえていた。

というわけで、この3年間で身につけた知識を新人SEのためにまとめていく。

まとめたのが、こちらの図。
これでだいたいイメージは付くだろう。
※見難い場合は、画像をクリックして拡大してください

以降、それぞれの価格の意味を説明する。

【C#でTwitter】OAuth認証でTwitterにアクセス［概要］

 Twitterのクライアントを作るためにまず通らなければいけないのが「認証」です。
クライアント開発のためにもC#でOAuth認証をするための方法をまとめます。

今回は 「認証」について調べたものをまとめていきます。
次回、C#でOAuth認証する方法を書こうと思います。
→ 【C#でTwitter】OAuth認証を行う［デスクトップクライアント版］