ブラウザ上で共同編集できるデザインプラットフォームとして、多くの現場で使われている「[Figma](https://www.figma.com/ja-jp/)」。デザイナーがFigmaで作成したファイルを元に、実装を進める流れが一般化しています。しかし、エンジニアのなかにはFigmaを上手く使いこなせず、デザイナーとスムーズな連携が取れないケースも。

そこで今回はエンジニアが知っておくべきFigmaの便利な活用法を、Figmaコミュニティの中核を担っている谷拓樹さんに伺いました。デザインを実装するまでの手間がなくなり、効率的にコーディングを進められる機能が満載です。　

Figma Japan株式会社デザイナーアドボケート。中小企業向けのSaaS、フリーランスでの受託、起業やスタートアップでの開発チーム立ち上げを経験。Webのフロントエンド開発や、UI・UX設計をおこなう。現在はFigmaのマーケティングやリソースの設計・開発に取り組んでいる。またデザインシステムに関連する情報のキュレーションや、その他講演・執筆活動などもおこなっている。

## プロダクト開発全体をサポートする機能が充実

#### balloon kishi left
最近はさまざまなノーコードツールが登場していますが、それらと比べてFigmaにはどんな強みがありますか？

#### balloon figma_tani right
Figmaとノーコードツールは役割が異なるため、直接的な比較は難しいですね。ノーコードツールは、視覚的にデザインしたものをコードを書かずに機能するものをつくる目的なので、実装コストの削減や、リソース不足の解消、短期的なページ作成などに使われることが多いです。

#### balloon figma_tani right
一方で、Figmaはプロダクト全体の設計、例えばアイデア出しやワイヤーフレームの作成から、具体的なUIデザインやプロトタイプの作成、そしてそのデザインを元にしたコード生成まで、より多様な用途に対応できます。そのため、中長期的に運用・拡大していくサービスやアプリ、複数の関係者が関わるプロジェクトでもスムーズに連携して進められるのが特徴です。またFigmaは様々なツールとの連携もあり、ノーコードツールと連携させることで、Figmaで作ったデザインを元にノーコードツールを介して公開するところまで進めることもできます。

#### balloon kishi left
具体的には、どのような場面でFigmaの強みが発揮されるのでしょうか？

#### balloon figma_tani right
最新のデザイン仕様をFigmaに集約できるので、もしユーザーのフィードバックから改善すべきポイントを指示するにしても、わざわざドキュメントツールに画像のキャプチャを貼り付けて修正指示を書いて...などをしなくても、直接Figma上にコメント機能でコメントを書いたり、あるいは編集権限があれば簡単な文言修正ならばデザイナーでなくても対応することができます。そうしたデザインへのアクセスのしやすさが大きな強みといえます。

~~「Figma」による共同編集の画面イメージ~~

#### balloon kishi left
Figmaを信頼できる情報源とすることで、コミュニケーションの無駄なコストを減らせるということですね。

#### balloon figma_tani right
先ほどのノーコードツールとの連携でいうと、例えば、「Studio」というノーコード・ローコード系のツールがありますが、**FigmaのデザインをStudioにエクスポートできるプラグインもあります。**これにより、FigmaでデザインしたものをStudioに反映させて、簡単に実装を進められます。

#### balloon kishi left
Figmaの機能性でユーザーに支持されているのはどんなところですか？

#### balloon figma_tani right
ブラウザ上でもスムーズに動作し、macOSなどのネイティブアプリと同等のパフォーマンスでコラボレーションできる点です。この共同編集のしやすさがFigmaの核となる体験の一つです。**当初はデザイナー向けツールとしてスタートしましたが、先ほども触れた通り現在ではプロダクト開発全体をサポートする機能も充実しています。**

#### balloon kishi left
共同編集の他には、どのような機能が追加されたのでしょうか？

#### balloon figma_tani right
例えば「[FigJam](https://www.figma.com/ja-jp/figjam/)」というホワイトボードツールは、プランナーやプロダクトマネージャー、リサーチャーなど、多様な職種の人々がアイディアを出し合う場として機能します。

~~「[FigJam](https://www.figma.com/ja-jp/figjam/)」によるブレインストームの画面イメージ~~

#### balloon figma_tani right
また、2023年には「[開発モード（以下、Dev Mode）](https://www.figma.com/ja-jp/dev-mode/)」を追加し、デザインからコードへの引き継ぎ（デザインハンドオフ）を円滑にする機能も提供。Figmaは、単なるUIデザインツールにとどまらず、プロダクトの構想段階からコード化までを一貫して支援しているのが特徴です。

## 途中段階のデザインを確認すれば「手戻り」が減る

#### balloon kishi left
Figmaはデザイナー以外の職種でも使用されているようですが、特にどのような職種が多いのでしょうか？

#### balloon figma_tani right
特にエンジニアの方々に多く利用されています。デザインデータを参考にしながらコードを書くプロセスは、昔からPhotoshopなどでも行われていましたが、Figmaでも同様の流れが一般的です。実際、Figma全体のユーザーのうち、約3分の2はデザイナー以外の方が占めており、エンジニアを含む幅広い職種に利用されていることがわかります。

#### balloon kishi left
Figmaについてエンジニアからよく寄せられる課題は？

#### balloon figma_tani right
**エンジニアからよく聞くのは、デザイナーが作成したデザインデータに触れることへの恐怖心です。**「データを壊してしまいそう」といった不安を抱えている人が多いですね。「閲覧権限」や「Dev Mode」で見ているだけなら、触ってもデザインを壊す心配がないのでこの点をまず理解することが大切です。

#### balloon kishi left
デザイナーとの連携に関して他にも課題はありますか？

#### balloon figma_tani right
従来のプロセスでは、デザイナーが作業完了するまでエンジニアはその内容を把握できないことが多いです。例えば、上流工程で仕様が決まってデザインが完成。その段階でエンジニアが実装の依頼を受けたとしても、「このデザインでは実装が難しい」と手戻りにつながるケースも。もしくは、実現がかなり困難でもエンジニアが対応せざるを得ないこともあります。

#### balloon kishi left
エンジニアとデザイナーのコミュニケーションの問題を、どのように改善すればいいのでしょうか。

#### balloon figma_tani right
**Figmaでは、ブラウザを使ってデザインデータに簡単にアクセスできるので、エンジニアは途中段階のデザインを確認することができます。**これにより、デザイナーが作成段階のアイデアに対して、エンジニアがコメントを送ることも。また、実装に必要なデザインデータが不足している場合にも、すぐにコミュニケーションを取れるので生産性向上につながります。

#### balloon kishi left
私もFigmaを使うことがあるのですが、過去のデザインデータを一つの画面で確認できるので内容を比較しやすいです。

#### balloon figma_tani right
そうですね、全体を俯瞰して見れるのはエンジニアにとっても大きなメリットだと思います。例えば、自分が実装する画面でエラーが出たときにどんな画面が表示されるのかなど、必要な情報をすぐに確認可能。ファイルを探す手間がなくなることで、作業を効率化できるのではないでしょうか。

## デザイナーとのやり取りを円滑にする方法

#### balloon kishi left
エンジニアがまず知っておくべきFigmaの使い方は何ですか？

#### balloon figma_tani right
まず重要なのは、実際に触ってみてFigmaの基本的なインターフェイスとナビゲーションを理解することです。どこをクリックすれば色が見れるのか、などデザインの情報をどこで見るのかなどを確認していくことで、デザインデータをスムーズに閲覧できるようになります。

#### balloon kishi left
まずは操作してみるということですね。デザインファイルから効率的に実装を進めるための方法を教えてください。

#### balloon figma_tani right
まず、デザイナーとのやり取りですが、エンジニア側が「閲覧権限」のみで内容を編集できない場合でも、コメント機能を使ってスムーズにコミュニケーションを取れます。例えば、エンジニアがデザインに「表示件数は最大3件」などとコメントを入れて、それをデザイナーが確認するような流れですね。

#### balloon figma_tani right
閲覧権限でも使えるコメント機能だけでもデザイナーと連携はできますが、Dev Modeという機能（有料）を使用すると、より見やすいかたちになります。**Dev Modeには「アノテーション」という注釈の機能があるんですけど、これを使うと静的なデザインデータ上ではわからない細かい仕様や寸法、コンテキストなどを一目でわかるかたちで共有できます。**

#### balloon kishi left
クリックしてコメントを確認する必要がないので、かなり便利ですね。実装フェーズでは、どのデザインファイルが着手可能なのか、エンジニアが判断できないという悩みもよく聞きます。その場合はどうすれば？

#### balloon figma_tani right
**Dev Modeを使えば、デザイン完了したファイルに「開発準備完了」というフラグを表示できます。**さらにフィルター機能で「開発準備完了」だけを抽出することも。コーディングするときに他の画面を見なくてもいいので、集中して作業に取り組むことができます。

## Dev Modeでコーディングの工数を大きく削減

#### balloon kishi left
Figmaでコーディングを効率化する方法を教えてください。

#### balloon figma_tani right
まず、通常の閲覧権限の場合はデザイン上のUIをクリックしたとき、右側にPixelの値や色のコードが表示されるので、それを元に実装を進められます。

#### balloon figma_tani right
ここでDev Modeに切り替えると、さらにリッチな情報が表示されるんです。**CSSやiOS、Androidなどで推奨されるコードスニペットを生成してくれるので、ゼロからコードを書くよりも、かなり楽になります。**この機能により、デザインから実装までのワークフローを大きく効率化できます。

#### balloon kishi left
これはすごいですね。コーディングの作業がかなりラクになりそうです。

#### balloon figma_tani right
画像の書き出しについても、プレビューが表示されて簡単にエクスポートできます。**PNGの書き出しや高解像度での書き出しもできるので、デザイナーに画像の書き出しを依頼する手間がなくなります。**画像に関しては基本的にエンジニア側で完結できるのではないでしょうか。

#### balloon kishi left
なるほど、書き出しまでできるのは本当に便利です。

#### balloon figma_tani right
コーディングをさらに効率化するなら、コードエディター「Visual Studio Code（以下、VS Code）」との連携がおすすめです。VS Code向けの拡張機能を使用することで、デザインファイルをテキストエディターに取り込むことができます。つまり、VS CodeのなかでFigmaのデザインデータを見れるということです。

~~「Visual Studio Code」の拡張機能「Figma for VS Code」のデモ画面~~

#### balloon figma_tani right
従来の操作では、ブラウザやアプリでFigmaを見て、出てきたコードなどをコピー、その後でVS Codeのエディターを開いてペーストするなど、切り替え作業が発生します。一方で**VS Codeの拡張機能を使うと、コードを書くエディターのすぐ横にFigmaが表示されるので、コピー＆ペーストが簡単。**しかも、サジェストの設定を有効にすれば、エディター上でコードを予測表示することも可能です。

#### balloon kishi left
コードをコピーできるだけでも便利なのに、サジェスト機能まで付いているというのは驚きですね。

#### balloon figma_tani right
注意点としては、サジェスト機能で表示されるコードがデザインデータから解釈している内容なので、精度は高いもののプロダクトの全ブロックを書くのは難しいということ。細かい部分の修正などが発生すると思いますが、作業の効率が飛躍的に高まるのは間違いありません。

#### balloon kishi left
今後はVSCode以外にも拡張機能を広げていく予定なんですか？

#### balloon figma_tani right
リクエストをたくさんいただいているので、現在検討中です。ニーズとして高いのは、iOS開発であればXcode、Androidの場合はAndroid Studioですね。具体的にいつ対応するのかなど、方向性はまだ決まっていませんが実現する可能性はあるかもしれません。

## 構造的なデザインを簡単に作れる「オートレイアウト」

#### balloon kishi left
デザイナーにディレクションしようとするときに便利な機能はありますか？

#### balloon figma_tani right
単純なデザインに対するフィードバックであれば、コメント機能でディレクションすることが多いと思いますが、それに加えてオートレイアウト機能を使うと、フレーム内の要素を規則的に並べて、構造的なデザインを組むことができます。

#### balloon figma_tani right
例えば、上記のような画面の場合、要素が増えたときに自動で幅が伸びたりすることはないのですが、オートレイアウト機能を使うと、自動的にレイアウトが切り替わります。

#### balloon kishi left
なるほど、便利ですね。構造的なレイアウトは、その後のコーディング作業でも何かメリットがあるんですか？

#### balloon figma_tani right
**構造的なデザインにすると、Dev Modeを使用したときのコードスニペットでも、内容を解析しやすくなるんです。**

#### balloon figma_tani right
例えば、上図の2つのデザインを見てもらったときに見た目はそんなに変わらないですが、左のようにデザインデータがフラットな状態になっていると、どこが親子関係になっているのかわかりづらく、コーディングに時間がかかってしまいます。
一方で、右のように**オートレイアウトで構造的なデザインを組んでおくと、階層的なコードを出してくれるので効率良く実装を進められます。**

#### balloon figma_tani right
つまり、Dev Modeで機械的に解釈するとき、単純にグループ化してただ並べているだけでは構造的なコードを出すのが難しい（上図の①）ということです。そのため、オートレイアウトなどで構造的なレイアウトにすることをおすすめします（上図の②）。

#### balloon kishi left
なるほど、オートレイアウトを使うことで実装も進めやすくなるということですね。

#### balloon figma_tani right
そうですね。そもそもデザイナーの誰もが構造的なデザインを熟知しているとは限りません。Figmaも活用しながら構造的なデザインを作ってもらえるようにコミュニケーションを取れると、エンジニアの作業をより効率化できると思います。

## UIキットを活用すれば0→1のデザインも可能に

#### balloon kishi left
エンジニアが簡易的なワイヤーフレームを組むときに便利な機能は？ 

#### balloon figma_tani right
Figma上で新しい画面を作成する場合、デザイナーが用意したコンポーネントセットやボタンなどを共有してもらうのが便利です。エンジニアに編集権限が付与されていれば、それらを組み合わせてワイヤーフレームを作成したり、画面を微調整したりすることができます。

#### balloon kishi left
共同作業がスムーズになりますね。デザイナーとの連携がこれからで0→1の状態で画面を起ち上げるときにはどうすれば？ 

#### balloon figma_tani right
**独自のUIキットを持っていない場合でも、Figmaが公式で提供しているUIキットを活用すれば、誰でも手軽に画面を作成できます。**UIキットのなかにはAppleと提携して作られたものもあるので、基本的なデザインの構築が可能です。

~~[Figmaの公式ページ](https://www.figma.com/community/ui-kits?resource_type=mixed&editor_type=all&price=all&sort_by=all_time&creators=all)では上記のAppleが提供しているUIキットの他にもさまざまなキットを提供している。~~

#### balloon kishi left
デザイナーとの共同作業を円滑にするため、最低限決めておくべきルールなどはありますか？

#### balloon figma_tani right
私自身の実装経験を踏まえてなんですけど、まずデザインデータをFigma上で公開して、関連したメンバーで「閲覧権限」を持った人なら誰でもアクセスできる状態にしておく。そして、途中経過でデザインのレビューなどを適宜入れられるようにして、デザイナーとエンジニアの関係性を作ることが重要だと思います。その上で、デザイナーがFigmaのコンポーネントセットを共有するなど、より効率的に進められる体制を構築することが大切です。

#### balloon kishi left
実装フェーズに向けて、他にも決めておくべきことはありますか。

#### balloon figma_tani right
**命名規則のすり合わせが非常に大切だと考えています。**例えば、デザインデータ上で表示される「薄いベージュ」や「グリーン」といった色をバリアブル機能で管理し、カラーコードで共通の命名規則を持つようにしておく。そうすると、デザインデータをコードへスムーズに転用でき、再確認の手間が減ります。

#### balloon kishi left
具体的にはどのようなルールを決めればいいですか？

#### balloon figma_tani right
細かい部分ですが、アンダーバーを使うのか、ハイフンを使うのか、スペースを空けるのかなどの細かいルールを決めておく。**色の命名についても「ブランドカラー」や「サブカラー」などを命名しておくとスムーズに作業を進められます。**エンジニアが初期段階からデザインに関わるケースも増えているので、Figmaを活用してより良いアウトプットを生み出していただけたらと思います。

大学卒業後、構成作家・フリーランスライターとして、幅広いメディア媒体に携わる。現在は採用関連のインタビュー記事や新卒採用パンフレットの制作に注力しながら、SaaS企業のマーケティングにも携わっている。いま一番関心があるのは、キャンプ場でワーケーションできるのかどうか。

岸 裕介

谷さん

エンジニアがFigmaを使って効率的に実装を進める方法

デザインから簡単にコーディングできるFigmaの活用法

デザイナーとのコミュニケーションを円滑にする方法

デザイン→実装の作業がラクになるFigmaの活用法。エンジニアとデザイナーの垣根をなくす方法とは？

エンジニアが効率良く仕事を進めるためには、IT用語についての知識が必要になります。とはいえ、それぞれの領域やプロジェクト内容によってIT用語が異なるため、使われるIT用語は膨大に。何となく知っているつもりで業務を進めていると、相手とのコミュニケーションでズレが生じてしまいます。

そこで今回はIT用語をわかりやすく解説している書籍『[見るだけIT用語図鑑278](https://amzn.asia/d/9whQvjP)』の著者・草野 俊彦さんに、現場で役立つIT用語の知識について伺いました。エンジニアを目指している方や、エンジニアとして働き始めた方が知っておきたい基本的な用語をイラスト付きで解説しています。（イラスト/めんたらこ）

*<font color="red">■</font> 草野 俊彦*

1986年千葉大学工学部卒業、日本電気株式会社に入社。高度先端基幹通信システムの研究開発に携わる。米国デラウェア大学コンピュータ情報科学科の客員研究員に従事。NECアメリカに駐在し、ネットワーク管理システムの基本ソフトウェア開発を推進。

2007年米国系半導体企業に移り、通信機器組込システムの開発を主導。2010年ネットワーク仮想化ソフトウェア開発ベンチャーを、イスラエルで起業。過去20年間にわたって、国際機関におけるIT技術の標準化に貢献。米国電気電子学会(IEEE)の標準化小部会での議長も務める。

## IT用語の「知ってるつもり」は要注意

#### balloon kishi left
草野さんはさまざまな現場を経験されていますが、IT用語に対してどんな風に感じていますか？

#### balloon kusano right
IT用語との付き合い方は、自分が担当している領域や業務によって大きく変わってきます。例えば、ハードウェアとソフトウェアのどちらなのか、さらに言えばWeb、DX、インフラ、アプリケーションなど、それぞれの領域でよく使われる言葉の意味を理解しておく必要があります。

#### balloon kishi left
IT用語は膨大にあるので、まずは意味だけ知っておけばいいのでしょうか。

#### balloon kusano right
**自分が担当している業務領域の用語で、「何となく知っている」状態は危険だと思います。**お互いに話していることがかみ合わず、誤解から業務に支障をきたしたり、場合によっては作業のやり直しにつながることも。プロジェクト全体に迷惑をかけないためにも、用語の使い方まできちんと知っておいた方がいいでしょう。

#### balloon kishi left
たしかに「知ってるつもり」で話していると、周囲にも迷惑がかかりそうですね。

#### balloon kusano right
**一方で自分が担当していない領域のIT用語については、意味を理解しておくだけでコミュニケーションが取れることも多いと思います。**例えば、AIを使ったアプリを作っているときに、APIを使って機械学習のロジックを活用しているだけなのであれば、深層学習の詳しい知識はそこまで求められません。

#### balloon kishi left
なるほど、自分の業務との関連性を意識しながらIT用語を学んでいくと良さそうですね。それでは現場で役立つIT用語を、それぞれの領域ごとに教えてください。

## コンピューターがわかる基本のIT用語

▶クロックはコンピューターを決まった速度で動かす信号
▶コアはCPUの中に入っている演算処理部
▶クロックが速くコアが多いほどコンピューターの性能が高くなる

#### balloon kusano right
コンピューターの頭脳が「CPU」であることは、誰でも知っていると思いますが、それがどのように動いているのか理解するためには、「クロック」と「コア」について知っておくことが大切です。

#### balloon kishi left
CPUを動かすためには、クロックとコアが必要ということでしょうか。 

#### balloon kusano right
はい、**CPUを動かす基準となるタイミング信号がクロックで、クロック数が高いほど速く計算できます。**一方のコアは、CPUの中の頭脳の数で、コアの数が増えれば処理を並行して行えるので性能が向上します。

#### balloon kishi left
なるほど、マルチコアになると処理性能が速くなるのはそういうことですね。

#### balloon kusano right
昔は1コアが当たり前でしたが、現在は4コア以上のCPUを使ったPCが普及してきました。各コアが分担して別々のアプリの処理などを並行して進められるので、処理性能は初期のPCに比べ格段に速くなっています。

▶データをすぐに使えるCPU内のメモリ
▶CPUが外部のメモリからデータを読み込む時間を短縮するために使う
▶Webブラウザにも既に見たページを保存するキャッシュがある

#### balloon kusano right
CPUの性能には、メモリも大きく影響しています。CPUは、命令やデータをメモリから読み出して処理するのですが、それには一定の時間がかかります。それを短縮するのがキャッシュの役割です。**あらかじめ必要な命令とデータをCPU内に読み込んでおいて、すぐに使える状態にしています。**

#### balloon kishi left
なるほど、データのコマンドもキャッシュに入っているんですか？ 

#### balloon kusano right
その通りです。キャッシュは数回分の処理に必要な命令とデータを記憶できれば良いので、比較的小さいサイズでCPUに内蔵できています。CPUとは異なりますが、ブラウザにもキャッシュの考え方があり、既に閲覧したページのデータを記憶して、通信速度の影響を受けずに一度見たページを素早く見ることができます。

▶PCのハードウェアを動かす縁の下のソフトウェア
▶パソコンを立ち上げてすぐのメーカー名表示はBIOS起動中を示す
▶UEFIは以前のBIOSの制約を取り除いた、新たなBIOSの名前

#### balloon kusano right
BIOSとUEFIは、PCの基本構造を知る上で重要です。BIOSは電源が入るのと同時に起動して、CPUやキーボード、モニター、ハードディスクなどのハードウェアを使える状態にしてからOSを動かします。

#### balloon kishi left
UEFIはBIOSとどのように違うのですか？

#### balloon kusano right
**UEFIはBIOSの機能拡張版です。従来のBIOSには、2テラバイト以上のハードディスクを扱えないなど機能上の制約があったので、UEFIはこの点を改善しています。**BIOSの規格として新たにUEFIを追加しており、一般的にはUEFI対応のBIOSを「UEFI」と呼んでいます。

▶Windowsが管理するOS自身やアプリなどの設定情報ファイル
▶ログオンするユーザーごとにアプリの設定など変更可能

#### balloon kusano right
レジストリはシステム情報を一括して保存するWindows OSの管理データベースです。どのソフトウェアをどこに配置したのか、アプリケーションからハードウェアまであらゆる情報を管理しています。

#### balloon kishi left
レジストリについては、誤って一部分を変更してPCが動かなくなるなど、苦い経験をしたことがあります。

#### balloon kusano right
そうですね、**間違えて書き換えてしまうと正常に動かなくなるので注意が必要です。**手動でしか修正できないときのために、レジストリエディタという編集ツールも用意されていますが、内容を正確に理解せず変更するのは危険なので避けた方がいいでしょう。

## エンジニアの実務で役立つIT用語 

▶プログラムが他のプログラムの機能を利用するときに使う
▶アプリケーションはOSのAPIを利用してOSの機能を使っている
▶APIを使うときは仕様で決められた使い方を守る必要がある

#### balloon kusano right
**APIはプログラムが他のプログラムに仕事を頼むときの呼び出し口で、多くのアプリに実装されています。**例えば、Webサイトでの所在地ページの多くは、Googleの地図を掲載していますが、これは掲載したい地図をGoogleマップなどのアプリケーションのAPIから呼び出し、その情報を使って地図を表示しているのです。

#### balloon kishi left
Web APIで、ブラウザとアプリをつないでいるということですね。 

#### balloon kusano right
一方でOSのAPIでは、OSが提供する機能を利用するための手順と形式を、仕様として定義しています。OSのAPI仕様に沿ってアプリを設計すれば、このAPIを使うだけでOSの細部を知らなくてもその機能を利用できます。

▶プログラムや仕様を作るときに、似たもの同士をひとまとめにする考え方
▶現実世界の物を抽象的なモデルとして表現
▶モデルを扱うことで、汎用的・効率的にプログラムを作れる

#### balloon kusano right
オブジェクト指向は、今非常に重要な用語で、ほとんどのプログラムがこの考え方で作られています。

#### balloon kishi left
車の例は非常にわかりやすいですね。

#### balloon kusano right
車の名前やメーカーが違っていたとしても、エンジン・タイヤ・ハンドルなど共通の特徴があれば車と呼んでいる。このような抽象化がオブジェクト指向という考え方です。**複数の物を一つのモデルとして捉え、個々の車ではなくモデルを扱うプログラムを作ることで効率的な開発が可能になります。**

▶短い開発サイクルを何度も繰り返すソフトウェア開発手法
▶大まかな仕様で開発をスタートし、イテレーションと呼ぶサイクルを繰り返して改善
▶最近では開発手法としての意味以外に、必要なときに必要な人材を集めて組織化する意味でも使われる（例：アジャイル型組織、アジャイル経営など）

#### balloon kusano right
アジャイルは「すぐに作って何度もリリースする」という意味の開発手法です。実際の開発現場では、アジャイルと従来のウォーターフォール型の両方がありますね。

#### balloon kishi left
どのようなケースでアジャイルが使われるんですか？

#### balloon kusano right
**技術革新が早く、ユーザーの要望もいろいろと出てくるようなプロジェクトでは、柔軟性のあるアジャイルが向いています。**一方で、データ管理やシステム管理など、何を作るのか内容が明確で厳密な仕様が必要とされるソフトウェア開発には、ウォーターフォール型の方が向いているというのが一般的な理解です。

### オープンソース・ソフトウェア

▶誰でも無料で使えて、自由にカスタマイズできるソフトウェア
▶変更時は変更内容の公開が必要なので、企業秘密などがあると使えない
▶オープンソースソフトは動作保証がなく、利用者が全責任を負う

#### balloon kusano right
最近では、オープンソース・ソフトウェアを企業のシステムに取り入れるケースが増えてきました。多くのエンジニアによって使われることで機能追加や修正が行われ、技術的な完成度の高いものも多く、ソフトウェアをゼロから構築する必要がありません。

#### balloon kishi left
メリットの多いオープンソース・ソフトウェアですが、知っておくべき注意点はありますか？

#### balloon kusano right
著作権と商用利用については知っておいた方がいいと思います。オープンソース・ソフトウェアは、作成者が著作権を明示的に放棄しないかぎり、作成者の著作権が法的に保護されています。そのため、**ユーザーが商用利用するときにはそれぞれのライセンス条項の規程をしっかり守る必要があります。**

## インターネットの技術がわかるIT用語 

▶Web上でデバイス同士を識別・通信するためのアドレス方式IPv4の後継バージョン
▶約340澗（340兆 × 1兆 × 1兆）もの膨大なアドレスが使える
▶IPv4との互換性はなく、両者が共存しながら徐々に普及している

#### balloon kusano right
**IPv6は、好きなだけIPアドレスを使えるようにしたIPv4の後継バージョンです。**現在広く使われているIPアドレスの方式・IPv4で発行できるアドレス数は、約43億だといわれていますが、それを世界中の全ての人に配布すると足りなくなってしまいます。そこで新たに規定されたのがIPv6です。

#### balloon kishi left
IPv6は現在どれくらい普及しているんですか。

#### balloon kusano right
正確な数は明らかになっていませんが、実はそこまでIPv6が増えていないという説もあります。IPを必要とする端末が増えているものの、Wi-Fiルーターなどローカルエリアネットワーク（LAN）内でローカルIPアドレスを活用する場合も多いからです。そのため、新たにIPアドレスを払い出すケースは当初の想定よりも少ないと考えられています。

▶WWWはインターネットの情報を相互にリンクすること
▶HTTPとHTTPSはWebページをインターネットで送る決まり
▶HTTPとHTTPSの違いは、セキュリティ（暗号化）の有無

#### balloon kusano right
HTTPとHTTPSは、どちらもハイパーテキストと呼ばれるHTMLで記述されたWebページの内容を、インターネットで転送するための通信の決まりです。

#### balloon kishi left
ハイパーテキストを送るため、HTTPやHTTPSが必要だったということですね。

#### balloon kusano right
そうなんです。最初期のインターネットは、主に学術研究のネットワークの中で使われましたが、ベタ打ちと呼ぶ書式なしテキストしか送れませんでした。それらの学術文書において、多数の論文を参照する機能をWeb上で実現したのがハイパーテキストの始まりです。Webが社会へ広まったのは、リンク情報（URL）を埋め込んだテキストを簡単に共有できるようになったからだといえるでしょう。

#### balloon kishi left
HTTPとHTTPSの違いは、セキュリティ（暗号化）の有無ということですが、具体的にはどのように違うのでしょうか。

#### balloon kusano right
**HTTPは通信内容を暗号化せずに送っているため情報が丸見えですが、HTTPSはSSL/TLSを使って内容を暗号化しているので安全性が高まります。**

▶Webサイトがユーザーの操作を、サーバー経由でブラウザに記録する仕組み
▶保存するデータは、Webサイトを使用しているユーザーの一時的な状態
▶ログイン状態を保存することで、一度のログインで済む

#### balloon kusano right
cookieはHTTPとセットで覚えておいた方がいい用語で、HTTPがユーザーの操作を保存できない（ステートレス）ため、cookieの仕組みが必要とされています。**保存する情報は、ログイン情報、サイトの訪問履歴、オンラインショッピングのカートの中身などです。**

#### balloon kishi left
なるほど、HTTPとcookieをセットで覚えておくと理解が深まりますね。

#### balloon kusano right
cookieの問題点としては、cookieを保存しているPCやスマホの盗難・紛失により個人情報が流出してしまう可能性があることです。最近では、cookieの規制が進んでおり、サイト訪問時に同意を求められることも増えてきています。心配な場合は情報提供を拒否するなど対策を講じた方が良いでしょう。

▶Webサイトの情報をコピーしてインターネットの各所に配置
▶ユーザーは自分の近くのコピー情報にアクセスするためすぐに情報を取得できる
▶CDN事業者がCDNサーバーを用意して自動的に配信

#### balloon kusano right
皆さんが地球の裏側の情報や動画をすぐに見れるのは、CDNがあるからです。**CDNはインターネットの中に構築されたコンテンツ配信用のネットワークの名前で、CDN事業者が提供しているサービスです。**大元のWebサーバーにあるコピーを、複数のCDNサーバーに保存しています。

#### balloon kishi left
CDNが私たちの情報取得に大きく寄与しているということですね。 

#### balloon kusano right
はい、コンテンツ提供者がCDN事業者と契約しており、ユーザーがコンテンツ提供者のサーバーにアクセスするとCDNサーバーに転送するよう設定を行っています。また、Googleなど大手グローバル企業は専属のCDNを持っており、スムーズなアクセス環境を提供しています。

## セキュリティで知っておくべきIT用語 

▶不正や有害な動作をするプログラムの総称
▶マルウェアの悪事は、目に見えるものと見えないものがある

#### balloon kusano right
セキュリティ分野のIT用語は、まず悪事を行うものから紹介します。**マルウェアは不正や有害行為を行ったり、利用者の意図に反する行為を行ったりするプログラムの総称です。**よくあるのは、Eメールに悪質なリンクを埋め込んでおくパターン。詐欺サイトへの誘導や、クリックした瞬間にPCにインストールされデータをかき集め、それを外に送信するものもあります。

#### balloon kishi left
怖いですね。私も対策としてウイルス対策ソフトをできるだけ最新にしながら、むやみにインストールしないように心がけています。

#### balloon kusano right
アドレスのドメインや送信元をしっかり確かめることも必要です。情報を盗んだり作業を監視したりするタイプのマルウェアは、被害がわかるまで感染に気づかないこともあるので、危機意識は常に持っておいた方が良いでしょう。

エンジニアが効率良く仕事を進めるためには、IT用語についての知識が必要になります。とはいえ、それぞれの領域やプロジェクト内容によってIT用語が異なるため、使われるIT用語は膨大に。何となく知っているつもりで業務を進めていると、相手とのコミュニケーションでズレが生じてしまいます。そこで今回はIT用語をわかりやすく解説している書籍『見るだけIT用語図鑑278』の著者・草野 俊彦さんに、現場で役立つIT用語の知識について伺いました。エンジニアを目指している方や、エンジニアとして働き始めた方が知っておきたい基本的な用語をイラスト付きで解説しています。

草野さん

ITエンジニアの実務に役立つIT用語

インターネットやセキュリティの理解が深まるIT用語

経験豊富なエンジニアが教える現場で使えるIT用語

駆け出しエンジニアが知っておくべきIT用語17選。Webとセキュリティの基本をイラストで学ぼう

最新のテクノロジーを駆使して日々の業務をこなすITエンジニアたち。彼らが普段から愛用しているガジェットには、どんなこだわりが詰まっているのでしょうか。

今回は**エンジニアたちが普段から使用しているこだわりのガジェットを紹介し、その選び方や活用法を深掘りします**。仕事の効率化や、日々の活動を楽しくするためのヒントになれば幸いです。

趣味はロードバイク・トレーディングカードゲーム。カードゲームのイベントに通ったりもしているそう。ガジェットの購入理由が独特！？

■M・Hさん（フロントエンドエンジニア）

趣味は1人カラオケ。休日はダークソウル等のPvEアクションゲームや、工場生産ゲームを楽しんでいるんだそう。アイテムへのこだわりに注目。

■S・Yさん（開発エンジニア）

休日はモーニングコーヒーやマインクラフトで工場を作ったり、20キロのランニングをこなし、平日の通勤時には漫画や西尾維新の小説を楽しんでいるそう。アイテムの使いこなし方が凄い！

休日には4歳の息子と公園や博物館を巡り、趣味の旅行やカメラ、ダイビングを楽しんでいるそう。インフラエンジニアとして9年勤務した経験を活かして現在は組織開発の業務に従事。両親もエンジニアという、エンジニア一家に育ったI・Mさんはアイテムの購入ポイントもエンジニア視点！？

## ○○の場所把握にプレイマットを購入！？目立たないのも大事

### 【Ultra・PRO】名画シリーズ3 「デラウェア川を渡るワシントン」スタンダードサイズ（プレイマット）

まずはPMO業務を行っているA・Hさんのプレイマットを紹介します。

**プレイマットとは柔らかくてクッション性のある床置きマット**のことを指し、本来は床に置いて使用するものですが、A・Hさんはデスクの上に置いています。**プレイマットをデスクの上に置くことで、マウスパッドとして使用している**そうです。さらに、このマット自体が目立つので、フリーアドレスのオフィス内で自席の位置を把握する際にも役立ちます。

A・Hさんは、固定席を持たないフリーアドレスのオフィスで働いているため、その日使用する席を自由に選ぶことができます。しかし、席が固定されていないとどの席を選んだのか迷ってしまうことも。

このプレイマットを置いておけば、打ち合わせから戻って来た時なども自席の位置をスムーズに把握することができますね。

*「プレイマットは一般的にアニメ調のものが多いのですが、Ultra・PROのプレイマットはトレーディングカードゲーム向けということもあり、デザインがかっこいいため職場で使っていても良い塩梅で目立つのでオススメ」*とのことです。プレイマットとしては希少で、取材時は売り切れになっていたとのこと。

少々不便な点は、**ノートPCの上に置くので絵が全部見えないところ**だそう。たしかに、デスクの見えやすい位置にぬいぐるみなどを置くのと比べると、お気に入りのデザインを見ながら作業できないのはやや残念かもしれません。

### 【VAUDE】Tremalzo 16（ロードバイク用リュックサック）

自転車が趣味のA・Hさんは、ロードバイク用のリュックサックを紹介してくれました。元々はロードバイクで遠出をする時に使用するリュックが欲しくて探していたところ、専門店のセールで見つけゲット。職場でもプライベートでも、あらゆるシーンで使用しているそうです。

多くの自転車用リュックは、長時間のライドで背中に汗が溜まらないよう、背中に接する部分にパッドが入っており、**通気性が向上された蒸れにくい仕様になっている**ことが多いのですが、こちらのリュックも例に漏れずその仕様になっています。

*「自立しないタイプなので立てかけることが多いですが、ひっかき傷などがつかないよう大切に扱っています。軽くて持ち運びしやすいところがお気に入りです」*と語るA・Hさん。リュックを掛けるためのフックも持参しておくと良いかもしれませんね。

ちなみにA・Hさんの自転車はGIANTのDEFY。休日はロードバイクで遠出したりしているそうです。

【関連記事】：[健康をもっと楽しく！『FiNCアプリ』で実現を目指す、カラダのすべてを、手軽に管理できる世界](https://and-engineer.com/articles/ZotgxRIAACQA_u9j)

## アイテム購入の基準は「失くしても泣かないこと」

### 【Victor】HA-A30T2（ワイヤレスイヤホン）

20～30代男女の22.5%が、ワイヤレスイヤホンを失くしたことがあるという調査結果からもいえるように、ワイヤレスイヤホンの紛失問題に悩んでいる方は一定数いるのではないでしょうか。

【参考】：[20～30代男女の22.5%が、ワイヤレスイヤホンを紛失したことがあると回答。2回以上紛失したことがあるのは16.67%【ワイヤレスイヤホンに関するアンケート】](https://prtimes.jp/main/html/rd/p/000000292.000077217.html)

そんなワイヤレスイヤホンを選ぶポイントについて、*「失くしても泣かないこと」*と語るのは、フロントエンドエンジニアのM・Hさん。某家電量販店で一目惚れして、「JVCケンウッド Victor HA-A30T2」を衝動買いしたそうです。購入当時の価格は税込み8,848円。

マルチポイント対応（※1）のため、スマホとPCの接続を切り替える手間がかからないのが気にいっている点だそうです。たとえば、**通勤中にスマホで音楽を聴いていたとしても、出社後にスマホ側の音楽再生を止めるだけでスムーズにWEB会議を開始することができるんだとか。**

~~※1 マルチポイント対応とは~~

~~・同時に2台の機器にBlueTooth接続すること~~

### 【Flexispot】E7（電動昇降式デスク）

在宅勤務の多いエンジニア。自分に合った自宅のデスクを選ぶのは大事だと思います。M・Hさんは昇降デスクを使用しているそうです。しかも電動式！

スタンディングで仕事をしたいと考え、昇降デスクを調べて比較した中で最も手頃な価格だったこのデスクを購入したそうです。購入して良かった点は、**コンパクトなところと、デスク下の配線周りを管理しやすくなった**ところだそう。

電動昇降デスクに合った天板（横幅140cm）も購入したそうですが、思ったよりサイズが小さく、物を置くスペースに困ったそうです。

また、スチール製の天板を付けられる昇降デスクなら天板の背面に充電器などを付けられるので、次に購入する際は天板の背面がスチール製のデスクもいいかもしれない、とのことでした。

### 【Keychron】K3 ノンバックライト・ワイヤレス・メカニカルキーボード （US配列）- バージョン2

メカニカルキーボード「Keychron K3」を普段から使用しているM・Hさん。こちらのおすすめポイントは、**スイッチが薄いためタッチがソフトなところ**と、**薄くて持ち運びが楽**なところ。

打ち心地についてはかなりの拘りがあるとのことで、**ロープロファイルのためキーの高さが低く、底打ち感があるとのこと**。この底打ち感は、人によって好みが分かれるそう。

【関連記事】：[パソコンSHOP『アーク』スタッフが厳選！プログラマにオススメしたい珠玉のキーボード](https://and-engineer.com/articles/YtoP4hAAACEA3Qet)

## コスパ重視のエンジニアに向いている機能性の高いガジェット

### 【HUAWEI】 FreeClip（ワイヤレスイヤホン）

新しい記事