
# 無理をしない。Figma データをファクタした話。

本記事は、Qiita の 「Figma Tips Advent Calendar 2022」と 「iCARE Dev Advent Calendar 2022」 のアドベントカレンダー 1 日目の記事です。

## Figma のリファクタ

エンジニアが日々書いているコードも様々な要因でいつの間にか負債になってしまうことがあります。Web デザインにも同じようなことがあり、定期的なリファクタをすることでその影響を小さくする取り組みが必要です。

今回は、大学院の活動の中で行った Figma のデザインデータのリファクタをした時の話をまとめます。

## 大学院の PBL 活動

産業技術大学院大学(以下 AIIT)の 2年次 に行う PBL 活動では、Web アプリケーションを開発しています。

11 月中旬、リリース直後の一段落したタイミングのスプリントで、プロダクトコードや Figma でデザインしたプロダクトのデザインデータのリファクタリングをする時間をとりました。

約 2 ヶ月半で溜まったデザイン負債を解消すべく、以下の 2 つのことを意識して取り組みました。

- デザインデータの大掃除
- デザイン情報をレイヤー化して整理をする
- プロダクトに関わる人に伝わるデザインにする
- Master Component の整理
- 命名規則の見直し

## デザインデータの大掃除

具体的には、デザイン後に実装はしなかったデータを対象として削除したり、似ているけど微妙に違うコンポーネントを統一したりしました。

使われていないデザインが Figma 上に残っていると、視覚的にもノイズになりますし、デザインする人によっては意図しない間違った使い方をしてしまう可能性があるので、大掃除をする効果は高かったと思います。

## デザイン情報をレイヤー化して整理する

まずは、Figma 上に点在したレイヤーを、コンポーネントやページ単位で管理するようにしました。

Group や Frame の責務を明確にすることで、一貫したデザインにすることを目的としています。

今回のデザインでは、以下のように責務を定義しました。

### Group の役割

- 複数の図形をまとめてグループ化
    - 手動で①を調節するときに使う

### Frame の役割

- 単一の図形を囲む要素
    - 自動的リサイズや、Auto Layout による配置調整が便利

## Master Component の整理

一つの Frame に煩雑にまとめられていた Master Component をトークンや Component 単位でまとめました。

その際、タイトルと簡単な Heading を記載するようにして、どこにどんな情報や Component がまとまっているかを探しやすくしました。

プロジェクトが始まった直後は、デザイントークンや Master Component の管理を頑張ろうという熱量が高いのですが、スプリントを繰り返すごとにその熱は、少しずつ動くものを開発したいというエンジニアとしての気持ちが勝り、Figma のメンテを怠っていました。

改めてリファクタする時間を設けることで、Master Component を利用していない箇所を修正することができました。

## 命名規則の見直し

主に以下の命名規則を見直しました。

- Component 名
- Color Effect 名
- Effect Style 名
- レイヤー名

Component、Color Effect、Effect Style、Text Style 名は、英字大文字始まりのスラッシュ区切りで統一しています。

レイヤー名は、デフォルトの prefix 付きの名前になるので、ざっくりと位置やどんなレイヤーなのかが分かるような命名をしました。

## 参考にしたサイト

[デザインシステムを改善！Figma のコンポーネントライブラリの整理でやったこと 7 点｜Ayumi Imaizumi](https://blog.zaim.co.jp/n/ne853a3964157?gs=c341c385486a)

[デザインシステム｜デジタル庁](https://www.digital.go.jp/policies/servicedesign/designsystem/)


今回は、大学院の活動の中で行った Figma のデザインデータのリファクタをした時の話をまとめます。 

無理をしない。Figma データをファクタした話。


## デザイナーとフロントエンドエンジニアで行う週次定例
[弊社](https://herp.careers/v1/icare/requisition-groups/a834f71a-27b8-43e6-b533-6fa4f17f48a8)のエンジニアチームには様々な定例が存在します。

エンジニアチーム全体の定例や各ポジションの定例など。

そんな中、「デザイナー×フロントエンド定例」だけ役職名が2つ並ぶ、珍しい定例があります。

今回は、そのことについて書きました。

来る、10/20に開催される[デザイナーとフロントエンドエンジニアを繋ぐ技術](https://icare.connpass.com/event/224693/)に登壇することになっているので、その資料の断片メモ的な感じで公開します。

ちなみに↑のイベントは2021/10/06時点で260人以上が参加予定なので結構な規模になってきました。

いや~緊張するな。

### 社内で上がったデザイン関連の気付きをまとめる
- 社外からの依頼やフィードバックは別でまとめていてプロダクトオーナーの判断によって対応するかを決める
- この定例では、フロントエンドエンジニアやデザイナーを中心に改善したいデザインissueを検討する
- 例えば
    - 「タグ」と「ラベル」似たようなデザインで混在
        - 同じ意味を持つなら、文言を統一してデザインを統一したい
        - フロントエンドエンジニアとしても同じようなコンポーネントが複数あることでメンテナンス負荷がかかる
        → 文言とデザインを共通化してコンポーネントを一つにまとめる
- デザインの不整合を集める場所と、共有してどう対応していくかを話し合う場を作ることで、気にしていないと見落としたり、後でいいやと思って忘れられるような点に対する目や感度が向上する

### フロントエンドエンジニアとしては、デザイナーが語るデザイン感を聞く貴重な機会
- 設計や実装フェーズに入ってからのコミュニケーションは、デザイナーのデザインをどう再現するか、どこを妥協して第一弾リリースでは機能を削るか?といったように限られた範囲を点で考えがち
    - とはいえデザイナーは過去のデザインやコンポーネントとの違いを把握している
- 実際に使われているインターフェースを俯瞰し、デザインに一貫性はあるのか？情報の見つけにくさは無いのか？を振り返り、共有する場になっている
    - まだ納期を決めていない段階の話なので、フロントエンドエンジニアが普段聞くことのできないデザイナーのデザイナーの話を聞くことができる貴重な機会
    - もちろんデザイナー以外のエンジニアや他部署の方からも気づきを乞う

### 最後に
もうちょっとまとめたい内容を会社のオフィシャルとしてnoteに書く予定。

繰り返しですが、[デザイナーとフロントエンドエンジニアを繋ぐ技術](https://icare.connpass.com/event/224693/) 10/20 に登壇しますので、どうぞよろしく。


弊社のエンジニアチームには様々な定例が存在します。エンジニアチーム全体の定例や各ポジションの定例など。そんな中、「デザイナー×フロントエンド定例」だけ役職名が2つ並ぶ、珍しい定例があります。...

デザイナーとフロントエンドエンジニアで行う週次定例


# TypeScriptで頭の体操とテスト駆動開発の練習をする
[cyber-dojo.org](cyber-dojo.org)というサイトをAIITのIT・CIOという授業で知りまして、試しに触ってみました。

cyber-dojo.orgは、テスト駆動開発を学ぶサイトでGoやPython、Java、Rustと様々なプログラミング言語を使った実装をブラウザ上で行うことができます。
TypeScriptの場合、テストフレームワークはJestに限られますが、その他のプログラミング言語では知名度の高いテストフレームワークは大体網羅しているようです。

複数の問題数が用意されていて、お題に対してテストと実装を書くのですが、ざっと見た感じ結構難易度が高そう。

今回は、試しに簡単なFizzBuzzの問題をTypeScriptで書いてみました。

```ts
import { fizz_buzz } from './hiker';

describe('fizz_buzz', () => {
  it('3の倍数ならFizz', () => {
    expect(answer(3)).toEqual("Fizz");
  });

  it('5の倍数ならBuzz', () => {
    expect(answer(5)).toEqual("Buzz");
  });

  it('15の倍数ならFizzBuzz', () => {
    expect(answer(15)).toEqual("FizzBuzz");
  });
});
```

```ts
export function fizz_buzz(num: number): string | number {
  if(num % 15 === 0) {
    return "FizzBuzz";
  }
  if(num % 3 === 0) {
    return "Fizz";
  }
  if(num % 5 === 0) {
    return "Buzz";
  }
  return num;
}
```

テストから書いて実装をする流れを身につけるのに良さそうなのと、入社試験の題材の参考にも使えそうです。


TypeScriptで頭の体操とテスト駆動開発の練習をするcyber-dojo.orgというサイトをAIITのIT・CIOという授業で知りまして、試しに触ってみました。cyber-dojo.orgは、テスト駆動開発を学ぶサイトでGoやPython...

cyber-dojo.orgでTypeScriptで頭の体操とテスト駆動開発の練習をする


# 2021-10-04 メモ: OSSの歴史を学ぶ
AIITの3Qでは、「OSS特論」というOSSの概念、意義、背景、思想、歴史を学ぶ講義があります。
講義を通じての到達の目標としては、OSS活動に参加したり、貢献できるくらいの深い理解を目指します。

### 実はOSSが広く知れ渡ったのはここ20年くらいの話
- OSそれ以前はインターネット基盤のサーバ類で使われていたらしい
- フリーソフト自体には50年位の歴史がある

### OSSのもうちょっと古い話
####  1960~70年代
- Unix
	- C言語などのコンパイル結果が何も表示されない理由は、プリンターのインクを無駄遣いしないため
	- MS-DOS(Windows)は、開発された時点でディスプレイが存在しなかったため、画面表示がうるさい
- ARPANET
	- インターネットの起源
	- [https://ja.wikipedia.org/wiki/ARPANET](https://ja.wikipedia.org/wiki/ARPANET)
	- 1969年 4つの大学を50kbpsでつなぐ
	- 当時はNCPというプロトコル
		- [https://ja.wikipedia.org/wiki/Network_Control_Program](https://ja.wikipedia.org/wiki/Network_Control_Program#:~:text=Network)
		- 後にTCP/IPに置き換わる
		- インターネットの基本的な形になる
- 利用、改変、再配布の自由
	- GNU
		- "GNU's Not Unix!"
		- [https://ja.wikipedia.org/wiki/GNU](https://ja.wikipedia.org/wiki/GNU)
		- グヌーと読む
		- フリーソフトだけでUnix互換環境を作るプロジェクト


AIITの3Qでは、「OSS特論」というOSSの概念、意義、背景、思想、歴史を学ぶ講義があります。講義を通じての到達の目標としては、OSS活動に参加したり、貢献できるくらいの深い理解を目指します。実はOSSが広く知れ渡ったのはここ20年くらいの話...

メモ: OSSの歴史を学ぶ


# 2021-10-03 メモ: テクノロジーは変わるが人間は変わらない

## はじめに
ここ最近は、D.A.ノーマンの「誰のためのデザイン」を読み進めています。

AIITの2Qで人間中心デザインを受講していて、何度かノーマンの書籍が紹介されていたので、気になっていました。

先月、社内のデザイナーがこの「誰のためのデザイン」について、聖書的なものだからデザイナーとフロントエンド用に1冊ずつ買おうということになり、会社で購入しました。
その時々で気になった箇所をまとめて、何回かに分けて「誰のためのデザイン」についてブログを書こうとおもいます。

## メモ: テクノロジーは変わるが人間は変わらない
今日は `テクノロジーは変わるが人間は変わらない` についてです。

これは書中に何度も出てくる言葉で、デバイス、インターフェースの変化にあわせて、テクノロジーは進歩していきますが、人間そのものの心理が変わらないということを訴えています。

世の中のテクノロジーのすべてが当てはまるわけではありませんが、人間のニーズを捉え、人間が抱える課題や問題を解決するためにテクノロジーがあるとしたら、人間の心理に基づいてデザインがなされる必要があります。

「誰のためのデザイン」は第2版が2015年に出版され、その25年前に初版が出版されています。
すなわち、2021年の現代においても、30年以上前にノーマンの提唱しているアフォーダンスやシグニファイア、デザイン原則は、適切なものとして活かされています。

テクノロジーにおける30年前である1980年頃は、アラン・ケイがオブジェクト指向の考え方を世に広める少し前の時代で、AppleがApple Ⅱを発表し、ジョブスとウォズニアックが億万長者になった頃です。(ジョブスはまだクビになってない)

それから30年の間に、パーソナルコンピューターやインベーダーゲーム、ガラケーからスマートフォンと少しずつテクノロジーやコンピューターが人間に寄り添いながら進化を遂げてきました。

話を戻すと、「誰のためのデザイン」を読んていて思うのが、そんな時代の移ろいとは逆に人間の心理や行動や失敗に対しての考え方は変わっていないことです。

話の内容はデザイナー向けではありますが、エンジニアにとってもテクノロジーとデザインは切っても切り離せない関係でしょうし、なによりプロダクトを作る人間として、プロダクトを使う人間のことを知ることは大切だなあと考えるきっかけになる書籍です。

MDXにHTMLタグを埋め込む実装をまだ終えていないので、
「誰のためのデザイン」のAmazonリンクを直で貼っておきます→ https://amzn.to/3DdhCzD


ここ最近は、D.A.ノーマンの「誰のためのデザイン」を読み進めています。AIITの2Qで人間中心デザインを受講していて、何度かノーマン...

メモ: テクノロジーは変わるが人間は変わらない


1ヶ月半に及ぶ、学生としての夏休みが終了し、AIIT(産業技術大学院大学)の3Q始まりました。

今Qでは、
- アジャイル開発手法特論
- IT・CIO特論
- OSS特論
- クラウドサーバ構築特論
を受講する予定です。

今日から早速授業が始まり、アジャイル開発手法特論の第1回目に出席しました。

初日なので、オンボーディングがメインで、受講生同士でこの授業で何を学びたいかを共有し合う時間が設けられていました。

クネビンフレームワークの紹介やウォータフォールかアジャイルかに関わらず、要求されて作った機能の6割は使われていないといった話等がありました。

個人的には、この授業を通じて、アジャイルとは？を社内のメンバーに説明し、実践できるようになりたいです。

来週の別の授業では、C言語を書いたり、AWSの構築をしたり(Rubyも使うらしい？)といった授業もあるので、3Qも仕事との両立を頑張っていきます。


1ヶ月半に及ぶ、学生としての夏休みが終了し、AIIT(産業技術大学院大学)の3Q始まりました。...

今日からAIITの3Qがスタート

ここ最近、企業におけるデザインシステムの事例を公開したブログや資料をTwitterで多く公開されています。 あまりの多さに、追いきれて...

2021年8~9月のデザインシステム事例をまとめてみた


# Next.js と MDX で個人ブログを作ってみた

### この記事の目標

この記事を読むと誰でも自前の個人ブログを作れるようになることを目指します。(記事のボリュームが想像以上に大きくなったので分割する予定です。)

個人ブログや企業のエンジニアブログのようなものを簡単に作ることができます。

Markdown ファイルを、HTML に変換して Web 上に公開することになるので、実装コードと一緒に記事の Markdown ファイルを Git 管理することができます。

### 技術スタックと開発環境

- Next.js 14 系
- TypeScript 4.4 系
- MDX(Markdown を HTML 化)
- Vercel(デプロイサーバー)
- MaxOS Big Sir 11.5.2

### なんで作ったか？

最新技術で日々メンテナンスが出来るものが作りたかったのが大きいかなと思います。

個人ブログのメインユーザーは、自分自身でありブログを読んでくださる方なので、エンジニアが作る Web サービスの個人開発にも似たような感覚です。

Next.js を使って見たかったといえば、それまでですが、SSG な Web サイトは 2020 年代に入ってから特に注目されている分野ですし、試すなら今！みたいな所もありました。

Qiita や Zenn もありがたく利用していますが、どうしても"いいね"のような数字にとらわれる感じで胃もたれしがちなので、消化の良さそうな個人ブログで胃の中をスッキリさせていこうと思います。

普段は Vue.js を使うことがほとんどなので、React.js を使うのはどうなの？という点については、全然問題ないです。

ドキュメントや先駆者のブログに大体の答えは書いてあります。

### なんで Next.js にしたのか？

流行りのフレームワークの勉強をしたかったのと、大きな理由は SSG(Static Site Generation)できるからです。

静的なブログサイトを作るだけのために SSR や SPA ですと、初回レンダリングや SEO に課題があるため(改善方法はありますが)、要件を素早く解消してくれる Next.js を選定しました。

また Vercel へのデプロイと組み合わせると、Vercel の自動キャッシュ機能を利用することができ、デプロイごとに静的ファイルを自動でキャッシュしてくれます。詳細 ↓

https://vercel.com/docs/edge-network/caching

SSG の場合、初回レンダリングやパフォーマンスの面でも優れています。

軽く、SSG について整理をします。

SSG の大きな特徴は、予め HTML をレンダリングしておき、ユーザーからのリクエスト(画面遷移等)に応じて用意しておいた HTML を返却するだけといったものです。

これが SSG で無い場合は、ユーザーからのリクエストの度に HTML を生成して、それを返却する形式になっています。

今回はその SSG で生成する HTML を一部、Markdown からの変換された HTML でレンダリングするようにしています。

ブログ記事は Markdown で記述し、所定のディレクトリに配置するだけでルーティングも良い感じにしてくれる実装を今回はしました。

### watsuyo.dev のドメインはどうしたの？

domain.com で買いました。

欲しいドメイン名は初めから決めていたので、国内外のドメイン販売サービスを比較しながら一番安い所で買いました。

GitHub に main ブランチを Push すると、予め連携しておいた Vercel のプロジェクトに Deploy されます。

後は Vecel と domain.com に IP アドレスを設定するだけで、watsuyo.dev にアクセスできます。

### 本題

#### ローカルにプロジェクトを作成する

まずはローカルに Next.js のプロジェクトを作成します。

今回は TypeScript を使いたいので、TypeScript の option をつけます。

```bash
$ yarn create next-app --typescript
```

デフォルトでは pages ディレクトリが src ディレクトリに入っていないので、src ディレクトリに移動をし、tsconfig.js にあるエイリアスの設定も変更します。

```json
"compilerOptions": {
	"baseUrl": "src"
}
```

src 以下は、現段階では以下のような構成になります。

src 配下に配置するかしないかの判断基準は、画面実装に直接関係があるかで判断しています。

```markdown
src
├── pages
│   ├── \_app.tsx
│   ├── api
│   │   └── hello.ts
│   └── index.tsx
└── styles
├── Home.package.css
└── globals.css
```

今後、共通コンポーネント作成した時には `components`といったディレクトリ配下にコンポーネントを配置して、`components`も src 配下に配置するのが妥当かと思います。

以下は、今回の最終目標的な構成になります。

```markdown
src
├── Head.tsx
├── components
│   ├── Footer.tsx
│   ├── Header.tsx
│   └── styled
│   ├── PostContainer.ts
│   ├── StyledAnchorLink.ts
│   ├── StyledCard.ts
│   └── StyledLink.ts
├── global.ts
├── logic
│   ├── getAllPosts.ts
│   └── style.ts
├── pages
│   ├── \_app.tsx
│   ├── \_documents.tsx
│   ├── blog
│   │   ├── [title].tsx
│   │   └── sample-blog
│   │   └── index.mdx
│   ├── index.tsx
└── type.ts
```

プロジェクト作成ができたら

```bash
$ yarn dev
```

でローカルサーバーを立ち上げます。

立ち上がったらブラウザで確認してみると、以下のような画面が表示されると思います。

![http://localhost:3000/](https://i.gyazo.com/731048b56c77bb2cc75491013675900a.png)

ひとまず、ブログを作る第一歩は完成しました。

適宜、commit をしておきましょう

次は package です。

初期の段階で以下のような package.json になっていると思うので

```json
{
  略
  "dependencies": {
    "next": "11.1.2",
    "react": "17.0.2",
    "react-dom": "17.0.2"
  },
  "devDependencies": {
    "@types/react": "17.0.21",
    "eslint": "7.32.0",
    "eslint-config-next": "11.1.2",
    "typescript": "4.4.3"
  }
}
```

今回の開発で必要になる yarn package をインストールします。

```json
{
　略
  "dependencies": {
    + "@emotion/styled": "^11.3.0",
    + "@theme-ui/presets": "^0.11.2",
    + "gray-matter": "^4.0.3",
    "next": "11.1.2",
    + "next-mdx-enhanced": "^5.0.0",
    + "next-mdx-remote": "^3.0.4",
    "react": "17.0.2",
    "react-dom": "17.0.2",
    + "react-icons": "^4.2.0",
    + "theme-ui": "^0.11.2"
  },
  "devDependencies": {
    "@types/react": "17.0.21",
    + "@typescript-eslint/eslint-plugin": "^4.30.0",
    + "@typescript-eslint/parser": "^4.30.0",
    + "babel-plugin-emotion": "^11.0.0",
    "eslint": "^7.32.0",
    "eslint-config-next": "11.1.2",
    + "eslint-config-prettier": "^8.3.0",
    + "eslint-plugin-react": "^7.25.1",
    + "eslint-plugin-react-hooks": "^4.2.0",
    + "prettier": "2.4.1",
    "typescript": "4.4.3"
  }
}
```

Markdown で書いたブログを HTML 化するために MDX 関係の package を追加します。
今回は Next が提供している @next/mdx ではなく、next-mdx-enhanced を使用します。
[next-mdx-enhanced](https://github.com/hashicorp/next-mdx-enhanced)は、Next.js が MDX を読み込んで HTML 化してくれます。

[gray-matter](https://github.com/jonschlinkert/gray-matter)は、yaml 形式で記述したブログの情報を JS オブジェクト形式に変換してくれます。

以下のようにブログの情報を yml で記述できます。

```md
---
title: 'Next.jsとMDXで個人ブログを作ってみた'
date: '2021/09/18'
description: 'コンテンツの内容'
img:
---

# 本文
```

[next-mdx-remote](https://github.com/hashicorp/next-mdx-remote)は、getServerProps や getStaticProps によって、Markdown を読み込むためのものです。

```bash
$ yarn next-mdx-enhanced next-mdx-remote gray-matter
```

今回は[@emotion/styled](https://github.com/emotion-js/emotion)を使用して、スタイルを当てたいと思います。

```bash
$ yarn add @emotion/styled
```

ダークモードを実装するのと Prism を使って、コードの syntax highlighting を利用したいので、[theme-ui](https://github.com/system-ui/theme-ui)を追加します。

```bash
$ yarn add theme-ui @theme-ui/presets
```

React で icon を使いたいときは icon をコンポーネントとして import できる、[react-icons](https://github.com/react-icons/react-icons)が便利です。

```bash
$ yarn add react-icons
```

今回、開発で必要な yarn package は以上ですが、お好みで ESLint や prettier の設定をすると、開発体験を向上できるかと思います。

package を入れ終わったら再度、yarn dev で正しく表示されているかを確認してみましょう。

画面を更新するようなことはしていないと思うので、先ほどと同じ画面が表示されるはずです。

1 つの記事で全て書き切ろうと思いましたが、ここまでかなりのボリュームになったので、続きは次回のブログにしようかなと思います。

次は早速、Markdown で書いたブログを HTML 化して表示させてみます。

### 参考

- [Next.js で作る技術ブログ [Part1 - セットアップ]](https://youtu.be/5obR4PzQObI)
- [Next.js + MDX でブログを作った](https://titanicrising.jp/blog/nextjs-mdx)
- [Next.js でブログを作り直した](https://queq1890.info/blog/new-blog)
- [Next.js + MDX でブログを作る 〜 Blanktar の場合](https://blanktar.jp/blog/2020/05/how-to-make-blog-with-nextjs)
- [Next.js + MDX で自分用ブログシステムを再構築した](https://blog.fohte.net/posts/2020-06-07-next-js-mdx)


この記事を読むと誰でも自前の個人ブログを作れるようになることを目指します。(記事のボリュームが想像以上に大きくなったので分割する予定...

Next.jsとMDXで個人ブログを作ってみた


# 2021 年 4 月に産業技術大学院大学(AIIT)に入学しました 🧑‍🎓

### はじめに 🎓

2021 年 4 月に産業技術大学院大学(以下 AIIT) 情報アーキテクチャコースに入学し、フルタイムのフロントエンドエンジニアとの 2 足のわらじを履いています。

既に 9 月も中旬で、あと 3 週間で 3Q の授業が始まるタイミングになってしまいましたが、個人ブログを Next.js + MDX で実装したタイミングで社会人大学院入学についてエントリを書くことにしました。

理由はわかりませんが今年に入って、社会人のエンジニアで大学や大学院の入試を受けている人が増えているような気がしています。

社会人でも通える大学や大学院がいくつかありますが、これから検討している方の参考になればいいと思います。

### 大学院に通おうと思った理由 🏃‍♂️

一番大きいのは、情報系の学位、修士を取得できる部分に大きなメリットを感じたからです。

経営学部出身で独学でエンジニア実務経験も 2 年が経つタイミングで、そろそろ体系的に学びたいぞ、と思いました。

実務経験は、実績や成果として残すことができますが、資格として認めれられるために取得したいと考えていました。

今後のキャリアを考えると、海外で働くなら実務経験の他に情報系の学位、修士が必要であったり、プログラミングや Web や通信などの技術についてアカデミックに学ぶ機会が、高校 3 年生の段階で選択できなかった場合に途絶えてしまうのもちょっとつらいところがあります。

英語で授業を受けられる方は、海外に拠点があるオンライン大学を選択肢にいれることもできます。(国内にはないのかな..?)

新型コロナウイルスの影響で、AIIT もオンライン授業にシフトしていて、このまま行くと 1 度も通学せずに卒業になりそうです。

話を戻すと、ライフパス的にも今が学び直す良い機会(20 代後半)かなと思い、今後の自分の可能性を広げる意味でも、AIIT への入学を決断しました。

### AIIT の情報アーキテクチャコースで学べること 👨‍💻

学内には

- 情報アーキテクチャ
- 創造技術
- 事業設計工学
  の 3 つのコースが用意されています。

各コースのイメージは、ざっくりと ↓ のような感じです。

- 情報アーキテクチャコースは、エンジニア向け
- 創造技術は、デザイナー向け
- 事業設計工学は、起業したい方、事業をやりたい方向け

もちろんそれぞれのコースには異業界、異業種の方が受講していたり、様々な目的を持っている方もいると思います。

そんな中、卒業単位に含まれるかは別として、多様なコースの授業を受けることが可能な部分も魅力的です。(受けすぎるとそれはそれでキツイ)

授業自体は月曜日から土曜日までの週 6 日で、カリキュラムの組み方によっては、もうちょっと少なかったりします。

また、授業は夜間にあるため、授業がある日はエンジニアとして勤務時間は 8 時半~17 時半くらいまで就業し、18 時半~21 時 40 分は授業を受けるルーティンになっています。

8 月中旬から 9 月末までは、学生としては夏休み期間でしたが 10 月から年末年始までは上記のようなルーティンになります。

### 情報系の授業を体系的に受けられる ✏️

何かしらの手段で、仕事で使うようなフレームワークやプログラミング言語とは違った技術レイヤーを学びたいと思った時に、社会人大学院の存在を知りました。

2020 年 1 月くらいに、大学院の説明会に行き、その年の 12 月に社会人特別入試に合格して、翌年 4 月に入学しました。

他にも社会人向けに展開している大学院は都内にも何個かあるのですが、様々なコースを授業を受けることができる点、都民優遇制度(学費補助など)を含めて都立大学院のため学費が安い点は魅力に映りました。

非情報系や非理系出身エンジニアにとって大きいのは、入試や授業に高度な数学知識を必須にしていない点で、データベースやクラウドインフラ周り、Ruby on Rails や Java、Python をアカデミック視点で学べるのも魅力です。

大学院なので 2 年間で、最後の 1 年間は PBL(Project Based Learning）科目があります。

ちなみに、**情報システム学修士**を取得できます。

専門職大学院という立ち位置なため、座学より実践！なカリキュラムも多い印象です。

そのため、年齢層は創造より+10 くらいかもしれません。

それでも皆、勉強をして自分のキャリアにつなげたいという同じ目標を持っているので、年齢やバックボーンは気になりません。

オンライン授業ということもあって、グループワークで見た目の情報も少ないために変なバイアスがかかることもありません。

### AIIT 以外の社会人でも情報系修士を取得できる大学、大学院

- JAIST(北陸先端科学技術大学院大学)
  - 正真正銘のコンピューターサイエンスが欲しい方はオススメ
- Uo People(University of the People)
  - 英語の授業が OK な方はオンラインで無料で受けられます。
  - 試験を受けるためにお金がかかります
- サイバー大学(オンライン)
  - ソフトバン
  - クグループが運営しており、福岡を拠点としています

それ以外にも

- 帝京大学(オンライン)
- 電通大(夜間)
  などがあります。

結構、選択肢が多い印象なので、取得できる学位、修士や学べる内容や通学が必要かなどを照らし合わせながら選ぶと良いかもしれません。

### 勉強していること

ざっと前期に受けた授業を振り返ってみて、

#### 1Q

- 情報セキュリティ特論
  - 暗号
  - セキュリティ評価
- 事業方向性設計特論
  - 事業ロードマッピング手法
- プロジェクト管理特論 1
  - PMBOK ガイド
- Java プログラミング技法
- フレームワーク開発特論
  - Ruby on Rails チュートリアル

#### 2Q

- データベース特論

  - リレーショナルデータベースの基礎

- 人間中心デザイン特論

  - HCD の概念
  - ビジョン構想
  - ⾏動観察

- システムソフトウェア特論

  - Unix 系 OS
    - OS の仕組み
    - シェルスクリプトを使った実装

- システムプログラミング特論
  - Python を使った実装
    - I/O
    - アルゴリズム
    - 計算量を考慮した実装

の授業を受けました。

### 最後に

色々書きましたが、授業と業務の両立は、結構大変です。

学ぶ機会を強制的に作れるので、時間とお金があるエンジニアの皆さん、社会人大学院も検討してみるといいかもしれません。

高価な書籍を大学や系列の高専の図書館をレンタルできるのも嬉しい特典の一つです。

AIIT や社会人大学院に興味のある方は、[Twitter](https://twitter.com/watsuyo_2)で相談にのるので、ご質問等でもお気軽に DM ください 👍

大学院のことについては、引き続きこのブログでも発信していきます。

P.S.
お得な学割サービスを知りたい。。
Notion と ANC(オライリー本読み放題)は登録してます。


2021年4月に産業技術大学院大学(以下 AIIT) 情報アーキテクチャコースに入学し、フルタイムのフロントエンドエンジニアとの2足のわらじを履いて...

All Posts