見出し画像

ソフトウェア開発：ビジネスパーソンがおさえたい5つのコンセプト

鈴木一成

プロジェクトの責任者を務めていたら、急に開発の議論に巻き込まれ、誰が何を言っているのか分からぬままミーティングが終わり、周囲に報告しなければならない。。。そんな冷や汗をかく経験をしたことはあるだろうか。

私はアパレル企業の再生に携わる中、Eコマースサイトの立ち上げや、物流業務の改革など、いくつかの場面でこんな状況に遭遇した。基本的な単語が分からないと、話について行けず、かといって毎度話を遮って「○○って何ですか」と時間を取る程の勇気も出せず、どんどん遅れを取り戻せなくなる自分。また、MBA中、いざテック業界に行きたいと決心した後も、何から学べば良いのかよくわからず、元エンジニアの同級生に聞いたら「それは君が何を知りたいのかによるよ」という切ない回答をされたことを思い出す。

当時は一先ずプログラミングの授業に駆け込み「二進法とは何か」みたいな話から学び、それはそれで大事だったが、今振り返ると、ポイントをおさえればもっと早く苦手意識を払拭できたな、と思う。多くのビジネスパーソンにとって、ソフトウェアは「大まかに何が言われているか」「何が重要か」「自分のビジネスへの影響は何か」が分かれば、建設的な会話ができるようになるもの。また、開発時に様々な問題が起きる際、エンジニアを招集してひたすら彼らの究明を祈るのと、自ら仮説を持って彼らと共に検証できるのでは、開発のスピードも大きく変わる。今日は、先ずそこに辿り着くための土台となるつの概念を紹介したい。

ソフトウェアの構造

ほぼすべてのソフトウェア製品は、3つの部分で構築されている：クライアント、サーバー、データベースだ。進化するとより複雑になるが、基本的な考え方は変わらない。

  • クライアント：ユーザーが使用するウェブサイトやアプリ

  • サーバー：クライアントに対してサービスを提供するコンピュータ

  • データベース：データの永続的な保存場所

出所：Colin Matthews Become a more technical product manager

​クライアントは、サーバーの玄関口とも言える、「アプリケーション・プログラミング・インターフェース（API）」を通じてサーバーと通信する（以下はAirbnbの例）。

これらのパーツをより深く理解するために、①クライアント側 vs. サーバー側、②クライアント側技術、③サーバー側技術、④データベース、⑤APIの順に解説しよう。

①クライアント側 vs. サーバー側

エンジニアから、クライアント側で何かが起こっている、あるいはサーバー側で何かが起こっているというコメントを聞いたことがあるかもしれない。これは何を意味しているのか。

クライアントは、端的にはブラウザと考えると分かり易い。ブラウザと端末が、訪れたいウェブサイトにアクセスするためにどこかのサーバーにリクエストを送っているのだ。

例えば、日頃閲覧しているサイト（例：https://www.nikkei.com/）のURL（Uniform Resource Locator。Web上の住所のようなもの）を入力したとする。そうすると、使用している端末とブラウザがサーバーに情報提供の依頼を送る。サーバーはその依頼に応答し、適切な処理を指示する。

これらの依頼をHTTP (Hypertext Transfer Protocol) リクエストと呼ぶ。

HTTPリクエストはサーバーに依頼を送り、サーバーは依頼が正常であることをブラウザに伝えるために標準化されたコードで応答する。代表的には、以下のようなものがある：

  • 「200」= 成功

  • 「500」= サーバー側のエラー

  • 「400」= クライアント側の問題

エラーコードは、HTTPリクエストが失敗したことをブラウザに伝える。お店に連絡したら番号を間違えて、電話の向こう側の人が親切に間違いを指摘し、教えてくれたようなものだ。

ここで最も重要な点は、特定の処理はクライアント側で実行され、他はサーバー側で実行されることを理解することだ。ブラウザ内で使われる技術は、HTML、CSS、JavaScript (JS)といったものがあり、これらはクライアントサイド技術と呼ばれる。他の技術はサーバーサイド技術であり、これは端末やブラウザに到達する前にサーバー上で実行されることを意味する。

では、クライアントサイド技術についてもう少し深く掘り下げてみよう。

②クライアント側技術：HTML・CSS・JS

クライアント側技術を駆使する「フロントエンド」開発者達はHTML、CSS、JSのスペシャリストだ。これら3つのスキルは、それぞれウェブ開発において重要な役割を果たすため、それらのスキルが欠けている開発者は真にフロントエンド開発者と呼ぶことはできない。

これらの技術の役割を一言で言うと、下記のようになる。

  1. HTML：構造

  2. CSS：スタイル・間隔

  3. JS：インタラクティビティ・楽しさ

HTML

HTML(Hyper Text Markup Language)とは、Webページの構造を定義するための言語。HTMLでは、「タグ」と呼ばれる「< >」で囲まれた記号を用いて、そこに様々な種類のタグ（hタグ = 見出し、imgタグ = 画像、brタグ = 改行）を加えることで、構造を定義し、外観を整えることができる。例えば、下記はhタグを用いた例だ：

出所：マケフリHTML初心者のための使えるHTML基礎知識

​

CSS

HTMLがページの構造を担当する一方、CSSはデザインに関わる2つのことを司る。

(i) スタイル： ページをカラフルにしたり、フォントを変更したりしたい場合、CSSを使用してそれを行う。例えば、HTMLで構成を整理した後、色付けをしたい場合、以下のようなCSSのコードが必要となる。

出所：いまさら聞けないCSS（スタイルシート）の記述方法【入門編】

​

(ii) 間隔：CSSはボックスモデルと呼ばれるものと連携して動作し、開発者はページ上の要素の周りにスペースを追加できる。以下はボックスモデルの例。

出所：Nulab今更聞けない！エンジニアのための CSS の基礎講座 〜ボックスモデル編〜

​

  1. 要素：要素自体（例：画像やテキストの段落）

  2. パディング：要素の内側の余白

  3. ボーダー：要素の枠線（パディングを含むが、マージンは含まない）

  4. マージン：要素の外側の余白

CSSは開発者によるグリッド（= 横並びや格子状のレイアウト）の使用も可能にし、これにより開発者とデザイナーの協力がはるかに容易になる。同システムでの作業を担保するため、デザイナーと開発者があらかじめグリッドレイアウトに合意しておくと良い。

ここでは深入りしないが、ビジネスパーソンでも、CSSが果たす役割と、基本的な使い方は理解しておくと便利だ。例えば、担当サイトで何か気づいたことがあった際に、デザイナーやエンジニアにその都度些細な変更を頼まずに、ブラウザ上で直接変更を加えられるようになる。興味ある方は、Udemy (有料) やYouTube (無料) 等で学んでみるのも良いかもしれない。

JavaScript (JS)

HTMLとCSSがページの構成・デザインを担当するのに対し、JavaScriptはそれに「命を吹き込む」役割を果たす。例えば、以下のようなことができる。

  • アニメーション：スマホ操作時の、華やかなアニメーションの追加

  • 入力欄の検証：会員登録時に記入した生年月日がデタラメなものでないか等、入力欄の検証は、JavaScriptなしには難しい

  • インタラクティブなスライダー：旅行サイトで目にするような価格スライダー、カレンダー等、我々が愛用するウェブの素晴らしい数々のインタラクションは、多くがJavaScriptによって動作している。

これらのことはすべて、JavaScriptがクライアント側でも使える（＝ブラウザ上で利用できる）プログラミング言語であるからこそ実現できることでもある。

JavaScriptとDOM

JavaScriptが強力なのは、ドキュメントオブジェクトモデル（DOM）と連携するからだ。DOMとは、ページ上のすべての要素を含むツリーのようなものと考えるのが最も簡単だ。

例えば、天気情報の表示をタブで切り替えるものを作りたいとしよう。

出所：Progate DOMとは

​

DOMを使うと、「週間」のタブが押された時に、以下のようなプログラムを実行し、Webページの表示を変更せよ、と指示することができる。

  • 「今日タブ」が暗くなるようにする

  • 「週間タブ」が明るくなるようにする

  • 「今日のお天気情報」を非表示にする

  • 「週間のお天気情報」を表示する

JavaScriptが選ばれる理由

プログラミング言語の人気ランキングを見ると、多くの表でJavaScriptが首位になっている。理由は様々だが、その1つは、2つの重要な技術がJavaScriptを駆使して作られたから、とも言える。

(i) React：Metaのエンジニアチームによって開発されたReactは、様々なコンポーネント（パーツ）を通じてUXを向上させるJavaScriptライブラリだ。これらの「パーツ」は必要な時のみ表示されるため、動きが速いのと、再利用しやすいため、デザイナー⇔開発者間での成果物イメージの一致に役に立つ。

(ii) Node.js：Node.jsは、によって、ブラウザ上という制限された環境でしか動けなかったJavaScriptを、PythonやRubyのようにパソコン上で動かせるようにしてくれる実行環境のこと。これで、開発者はフロントエンドとバックエンドの両方でJavaScriptを使用できるようになり、作業が遥かに容易になった。

③ サーバー側技術

JavaScriptの他にも、Java (JavaScriptとは無関係）、PHP、Ruby on Rails、C#、Python等、様々なプログラミング言語があり、これらは主にサーバーサイドで使用される。

開発経験が全くないと、プログラミング言語が実際に何の役に立つのかを理解するのが難しいかもしれない。そこで、例えばSaaSのサブスクサービス（例：マネーフォワード）をイメージしてみよう。このサービスには、いくつかの要件が必要となり、それぞれプログラミングが必要となる。

  • 価値のあるサービス：価値あるサービスがフロントエンドだけで存在することはほぼ無く、価値創造には、サービスに頭脳とロジックが必要。頭脳とロジックはプログラミングを意味する。（例：クレカ支出費目の自動分類）

  • プレミアム会員登録：プレミアム会員は、パッケージAという特定の機能にアクセスできるという概念を作る必要があり、これにはプログラミングが必要だ。

  • 会員費の支払い：これはデータベースへの呼び出し、APIとの相互連携、支払済とそうでないユーザーの分類等のロジックが含まれる。顧客の決済が完了していなかったら、それら顧客にメールを送信し、支払いの催促が必要となる。これもまた、プログラミングが必要だ。

  • プレミアム会員キャンセル：1年契約に縛られている場合はどうするか？「1年以内にキャンセル可能 = true / false」といった異なるパッケージを用意しなくてはならないかもしれない。

エンジニアが比較的早く異なるプログラミング言語間を行き来できる理由の1つは、プログラミング言語がいくつかの基本的な概念を共有しているからだ。代表的な例としては、「変数」「配列」「関数」「条件文」といったものがあり、ご興味ある方は初めてのプログラミング（「四則演算、条件判断、繰り返し処理、配列、関数」）等に目を通すと良いと思う。

④ データベース

ソフトウェアにおいてデータベースが果たす役割を理解することは非常に大事だ。最先端のJavaScript、CSS、APIを駆使しても、データベースがなければ、事業の構築に苦労してしまう。

例えば、データベースは以下のことを担保してくれる：

  1. 顧客データの安全かつ確実な保存

  2. 支払い取引データの保存

  3. 販売製品に関連する情報の保存

データベースには大まかに2つの種類があることを理解しておくと良い。

  • SQLデータベース：SQL（Structured Query Language) データベースはデータをテーブルに保存し、テーブルに整然とした行のセットが必要な時にうまく機能する。例えば、Eコマース企業や金融企業は、厳格で安全なデータセットが必要なため、この種のデータベースを使うことが多い。また、SQLデータベースを使うと、SQLクエリを使用してレポートを作成するのも容易だ。デメリットとてしては、その硬直性故に、時間の経過に伴い、データ構造の変更が難しくなる可能性がある。特に初期段階のスタートアップにとっては、これは危険な場合がある。また、エンジニアが複数のデータセットの結合を強いられると、パフォーマンス面でも欠点が出てくる。

  • NoSQLデータベース：NoSQLデータベースはデータをドキュメントに保存する。ドキュメントはテーブルとは異なり、より流動的で、事業の進化に合わせた変更が可能だ。NoSQLは速度とパフォーマンスに優れている。一方、動的で流動的なために、様々な異なるデータセットが管理しづらくなり、同じデータセットが見つけにくい場所に保存されることがよくある。また、SQLクエリに比べてレポート作成も容易ではない。

どのデータベースを利用すべきかは、エンジニアとの相談が必要だが、その際はビジネス側にとって重要な要件をしっかりと伝えよう。例えば、以下のようなものだ。

  • 「データベース内のデータを使って容易にレポートを作成できるようにしたい」

  • 「サクサク動くようにしたい」

  • 「データが安全に保存されることを確認したい」

自分の懸念や期待を明確に伝えることが、最善な選択肢を選ぶ重要なステップとなる。

⑤API

殆どの場合、ビジネスパーソンが直面するのはウェブAPIだ。これはサーバーの玄関口であり、他のアプリケーションがデータにアクセスしたり動作を発動したりすることを可能にする。

APIはSNS (Facebook, LINE, X)、ビジネスツール（freee, Chatwork）等、あらゆるサービス上で存在する。これらの公開APIは、それを構築した企業外の開発者が使用することを意図して作られている。許可を持つ誰もがAPIに依頼してデータを取得したり、新しい情報を送信したり、AIとやり取りしたりすることができる。

簡単な例として、Airbnbで「トロント」と検索したときに出てくる宿泊先候補をどのように取得するかを見てみよう。

出所：Colin Matthews Become a more technical product manager

​

これを分解すると、以下のことがわかる：

  1. クライアントがapi.airbnb.comのURLにあるリストに依頼を出し、場所をトロントと指定する。

  2. サーバーがデータベースからトロントの宿泊先候補リストを取得する。

  3. データベースがサーバーに宿泊先候補リストを返す。

  4. サーバーがクライアントに宿泊先候補リストを返す。

APIはサーバーの玄関口だ。サーバーでホストされているAPIは、依頼を自ら処理するか、処理のために下流に渡す。

例に戻ると、宿泊先候補リストの取得に加えて、ユーザー、予約、価格などへのアクセスも可能と想像できる。これらを一般的にエンドポイントまたはリソースと呼ぶ。

APIは、基本的なパターンをいくつか理解すれば、技術文書をすぐに理解できるようになる。

まず、APIには3つの主要なタイプがある：

  • SOAP: これは古いタイプで、主に医療や金融サービスで使用されている。

  • REST: これが最も一般的な設計パターンだ。詳細は後述。

  • GraphQL: これはMetaで作成された新しいタイプで、主に自社アプリケーション内のプライベートAPIで使用される。同じリクエストタイプを異なる方法で使用する。

前述の通り、RESTはAPIの設計として圧倒的に人気がある。RESTは多くの異なるリクエストタイプをサポートしているが、今日はGETとPOSTの2つに焦点を当てよう。

GETリクエスト： これは文字通り、何かを取得するために使われる。ウェブページを開くたびに、ブラウザは入力したURLのサーバーにGETリクエストを送信し、サーバーは表示すべきコンテンツを返す。

最も単純な形式では、このコンテンツはブラウザが表示するHTMLファイルであるか、JSONのように解釈が必要なより複雑な形式である可能性がある。

先ほどのAirbnbの例に戻り、リクエストタイプを指定しよう。ここでは、/listingsエンドポイントにGETリクエストを送信していることがわかる。また、トロントのリスティングのみを要求していることも指定した。リクエストをその構成要素に分解してみよう：

  1. ベースURL: すべてのAPIエンドポイントの「出発点」

  2. エンドポイント: アクセスしたい特定のリソース

  3. クエリパラメータ: リクエストと共に渡される追加データ

POSTリクエスト： これは、サーバーに新しいデータを送信するために使用される。例えば、OpenAIの/images/generationsエンドポイントで新しい画像を作成するためにPOSTリクエストを使用したとしよう。

また、サーバーが処理するデータを含むボディをリクエストに含める。これは以下のようになる：

適切なアクセス権があれば、OpenAIはこの「A cute baby sea otter」というリクエストに応じて、可愛いラッコの赤ちゃんの画像を返してくれる。

まとめ

開発に関わるビジネスパーソンは、一先ずこれらの概念が分かれば、ソフトウェアのどの部分の話をしているのか、感覚を掴むことができるようになるだろう。また、意欲次第で、以下のようなこともできるようになる。

  1. ブラウザで直接編集する： 基本的なHTMLとCSSのスキルがあれば、すぐにブラウザで編集を行えるようになる。ボタンの色やランディングページのフォントサイズを微調整したい際、このスキルが役立つだろう。

  2. APIの需要実験を実行する：APIとAPIドキュメントに精通していれば、「API需要実験」を実行することができる。これは、偽のAPIドキュメントを使用して偽のAPIを構築し、潜在的な顧客に見せて、誰が登録するかを確認するものだ。APIのビジネスにおける重要性については、6月7日に投稿した「APIの何がそんなに大事なの?」をご参照頂きたい。

  3. 自らSQL/Pythonクエリを駆使してレポートを取得する：SQLとPythonは、データを取得する最も一般的な方法の一つだ。使用しているデータベースの種類に応じて、データを取得する最も効率的な方法を学ぶことで、有益な情報を引き出せるようになるだろう。

以上だ。もちろん、取り上げた5つのトピック以外にも、ソフトウェアの技術的側面について学べることはたくさんある。しかし、先ずはこれらをおさえることで、次回開発の議論に関わる時の助けになると思う。

この記事が気に入ったらサポートをしてみませんか？