![見出し画像](https://assets.st-note.com/production/uploads/images/136086151/rectangle_large_type_2_17a7d198a9cedad1c2429265e80241b2.png?width=1200)
開発チームで働くUIデザイナーのための、開発用語カンペ📝(開発系)
IT業界はツールや用語の種類が多く、情報更新も頻繁なので大変ですね…。今回は、仕事する上でよく聞く用語を『開発チームで働くUIデザイナーのための、開発用語カンペ』としてざっくりとまとめました。(随時更新予定…✍️)
📝開発系(プログラミング言語)
Javascript
![](https://assets.st-note.com/img/1701396549165-GmWVrhpz4H.png?width=1200)
HTML、CSSと並ぶ主要プログラミング言語。動的なWebページを作るために利用される(スライダー、ポップアップなどのアニメーションなど)。ChromeやFirefoxといった「ブラウザ上」で動作する、PythonやRubyのような一般的なプログラミング言語は「パソコン上」で動作する。
デザイナーも知っとこ
・Node.js
ブラウザ上という制限された環境でしか動けなかったJavaScriptを、PythonやRubyのようにパソコン上で動かせるようにしてくれる。(例:scssをコンパイルしてcssにする)Nodebrewはnode.jsのバージョン管理に使用。
・JavaScriptフレームワーク
React(React Native)、Next.js、Angular JS、Vue.js、Nuxt.js など
・JavaScriptライブラリ
React.js、JQuery、Riot.js、Node.js など
Python
![](https://assets.st-note.com/img/1701393603743-44tpBy8SGU.png?width=1200)
オブジェクト指向のプログラミング言語。少ないコードで簡潔にプログラムを書け、専門的なライブラリが豊富。ライブラリが多いので分野問わず広く作成でき、Instagram、YouTube、Evernote、DropBoxの開発で使用されている。
デザイナーも一応知っとこ
・LAMP環境
Webサイト・Webサービスを構築する際に「Linux(OS🐧)」「Apache(Webサーバソフトウェア)」「MySQL(データベース管理システム)」「Perl・PHP・Python」を用いて開発すること。
・Java、Perl、PHP、Python、Ruby
Web系で使われているプログラミング言語群。
Javaはメジャー。PerlはLinuxにほぼ標準でインストールされている言語だが、人気は下降気味。PHPはJavaに次いで人気、WebサイトやECサイト、予約・お問合わせなどのフォーム、検索・ログイン機能などに使用できる。
Ruby、Ruby on Rails
![](https://assets.st-note.com/img/1701330287987-ofFDNLZI7P.png?width=1200)
日本初のオブジェクト指向のプログラミング言語。Ruby on Railsはフレームワーク(Webフレームワーク)。得意開発領域はWebサービス(EC・オウンドメディア)やスマートフォン向けアプリ、SNS開発、スクレイピングなど。Webサーバー上に情報取得・保存などの「サーバーサイド処理」が得意。
スクレイピング
Web上の指定したデータを抽出する「スクレイピング」という処理。
参考:初心者にもわかるスクレイピングに関する解説!
📝開発系(フレームワーク・ライブラリ)
React
![](https://assets.st-note.com/img/1701320222043-SXvBqDcYRn.png?width=1200)
UIを作ることに特化したJavaScriptフレームワーク(アプリケーションの土台・枠組)。Facebook(現:Meta)作成。無料で利用でき、iOSとAndroid両方作成できる。Ruby on Rails(Ruby)や、Django(Python)のフレームワークに組み込むことが可能。
React JS:WebサイトとWebアプリケーション
React Native:ネイティブアプリケーションとWebアプリケーション。
デザイナーも知っとこ
参考:デザインチームでReactを学んだ話
Next
![](https://assets.st-note.com/img/1701320221722-2AIYw1LOdX.png?width=1200)
Reactをベースに開発された、フロントエンドフレームワーク。サーバー機能がある。最近人気。
Vue
![](https://assets.st-note.com/img/1701320222112-maxLmjRSZe.png?width=1200)
JavaScriptフレームワーク。元Googleの社員がAngular JSを元に開発した。Google、Apple、ZOZO、DMMなどで利用されている。Vue.jsをベースにしたフロンドエンドフレームワークにNuxt.jsもある。
デザイナーも知っとこ
参考:デザイナー向けのVue.js紹介
Angular
![](https://assets.st-note.com/img/1701320221993-T5RpdmeCyL.png?width=1200)
JavaScriptフレームワーク。Google作成。学習コストは他のフレームワークより少し高いらしい。
JQuery
![](https://assets.st-note.com/img/1701320222152-FiKb0Yx31b.png?width=1200)
最も有名なJavaScriptライブラリ(JavaScriptで書いていた内容を、短いコードで簡単にわかりやすく記述できる)。アニメーション表現などに使う。豊富なプラグインが公開されているが古いこともある。React・Vue.jsなどのモダンフレームワークが主流になりつつある。
⭐️プログラミング言語周り 相関図
以上をまとめると下記のような感じでしょうか。
![](https://assets.st-note.com/img/1701602706094-kPUZdCRuvJ.png?width=1200)
おまけ Three.js
![](https://assets.st-note.com/img/1701320222202-GzYOROSabw.png?width=1200)
手軽にWebGLを扱える3Dライブラリ(Javascriptで記述)。
📝アプリ開発系
Flutter
![](https://assets.st-note.com/img/1701069097311-etpzFflFkC.png?width=1200)
Googleが開発した、スマートフォンのアプリケーション開発に特化したモバイルエディター。
デザイナーも知っとこ
flutterはマテリアルデザインが標準コンポーネントになっている。「Material Components widgets」で既存コンポーネントで利用できるものがないかを確認する。アイコンは「Material Design」を確認。
参考:【Flutterでのアプリ開発】デザイナーはマテリアルデザインを知っておくべき
Swift
![](https://assets.st-note.com/img/1701070244605-M4FKZUutOZ.png?width=1200)
Appleが開発した、アプリ開発のためのプログラミング言語。iPhoneアプリ、Webアプリケーションなどが作れる。それ以前は、Objective-C(C言語ベース)を使用。Swiftはその新しい版。
デザイナーも知っとこ
専用アプリのplaygroundsで学習&開発のリアルタイム確認ができる。
Firebase
![](https://assets.st-note.com/img/1701070307446-u5BaLEnsoW.png?width=1200)
Googleが提供している、モバイルアプリやWebアプリのためのバックエンドプラットフォーム。 ユーザー認証、リアルタイムデータベース、ストレージ、プッシュ通知、アプリ分析などの豊富な機能がある。
デザイナーも知っとこ
Firebase consoleでアクセスして、無料でプロジェクトを作成できる。
📝開発系(プロジェクト管理・協業)
Jira
![](https://assets.st-note.com/img/1701404053111-lk7wOVAk9b.png?width=1200)
アジャイル型開発向けプロジェクト管理ツール。ロードマップ、スクラムボード、レポートによるチームのパフォーマンスを確認できる。
Storybook
![](https://assets.st-note.com/img/1701404053038-zcMxOPGEK0.png?width=1200)
UIコンポーネントとページを切り離し、独立した状態でコンポーネントの開発を行うことができるオープンソースツール。コンポーネントをカタログのように一覧で見ることができる。React、Vue、Angularなどで利用できる。
デザイナーこそ知っとこ
企業によっては、Storybookを公開していることもある。一見の価値あり。
参考:SmartHR UI
Chromatic
![](https://assets.st-note.com/img/1701410819219-ZV0WQ9VPpB.png?width=1200)
StorybookをベースとしたUIテストツール。chromatic上でUIを確認できるのでステージングにあげることなくUIレビューが行える。変更箇所もビジュアルで確認(Changeset)できるため、リファクタ(内部構造を整理)する際にも便利。
デザイナーも知っとこ
参考:リリースの早さと品質を保ち続けられる体制へ。 「ビズリーチ」のデザイナーとエンジニアの連携フロー
git
![](https://assets.st-note.com/img/1701609100251-te9k4rdp7q.png?width=1200)
ソースコードのバージョンを管理するツール。
SourceTree
SourceTreeはGitをコマンド入力せずに操作できるツール。
gitHub
![](https://assets.st-note.com/img/1701609100221-cEU8Zq1nLr.png?width=1200)
Gitを使ってエンジニアを支援するWebサービス。世界中の開発者同士が自由にコミュニケーションをとれる。
gitLab
![](https://assets.st-note.com/img/1701609100317-DRqUKNOj34.png?width=1200)
プロジェクトチーム内でソースコードを確認&レビュー、実装が可能。
あとがき
私がこの業界に足を踏み入れた時、とにかく覚えないといけない用語がたくさんあり、分からなければ、メモして調べてを繰り返していました。字引きのように、簡単に見返せるまとめがあればいいなと思っていました。手元にメモしている用語の一部にはなりますが、誰かの役に立てばいいなと思います。
その他、デザイン関する情報を「ハードル低く、分かりやすく」をモットーにnoteにまとめています。よかったら他の記事も読んでみてください。