見出し画像

開発チームで働くUIデザイナーのための、開発用語カンペ📝(開発系)

IT業界はツールや用語の種類が多く、情報更新も頻繁なので大変ですね…。今回は、仕事する上でよく聞く用語を『開発チームで働くUIデザイナーのための、開発用語カンペ』としてざっくりとまとめました。(随時更新予定…✍️)


📝開発系(プログラミング言語)

Javascript

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://www.python.jp/

オブジェクト指向のプログラミング言語。少ないコードで簡潔にプログラムを書け、専門的なライブラリが豊富。ライブラリが多いので分野問わず広く作成でき、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://www.ruby-lang.org/ja/

日本初のオブジェクト指向のプログラミング言語。Ruby on Railsはフレームワーク(Webフレームワーク)。得意開発領域はWebサービス(EC・オウンドメディア)やスマートフォン向けアプリ、SNS開発、スクレイピングなど。Webサーバー上に情報取得・保存などの「サーバーサイド処理」が得意。

スクレイピング
Web上の指定したデータを抽出する「スクレイピング」という処理。
参考:初心者にもわかるスクレイピングに関する解説!


📝開発系(フレームワーク・ライブラリ)

React

https://ja.react.dev/

UIを作ることに特化したJavaScriptフレームワーク(アプリケーションの土台・枠組)。Facebook(現:Meta)作成。無料で利用でき、iOSとAndroid両方作成できる。Ruby on Rails(Ruby)や、Django(Python)のフレームワークに組み込むことが可能。

  • React JS:WebサイトとWebアプリケーション

  • React Native:ネイティブアプリケーションとWebアプリケーション。

デザイナーも知っとこ
参考:デザインチームでReactを学んだ話

Next

https://nextjs.org/

Reactをベースに開発された、フロントエンドフレームワーク。サーバー機能がある。最近人気。

Vue

https://ja.vuejs.org/

JavaScriptフレームワーク。元Googleの社員がAngular JSを元に開発した。Google、Apple、ZOZO、DMMなどで利用されている。Vue.jsをベースにしたフロンドエンドフレームワークにNuxt.jsもある。

デザイナーも知っとこ
参考:デザイナー向けのVue.js紹介

Angular

https://angular.jp/

JavaScriptフレームワーク。Google作成。学習コストは他のフレームワークより少し高いらしい。

JQuery

https://jquery.com/

最も有名なJavaScriptライブラリ(JavaScriptで書いていた内容を、短いコードで簡単にわかりやすく記述できる)。アニメーション表現などに使う。豊富なプラグインが公開されているが古いこともある。React・Vue.jsなどのモダンフレームワークが主流になりつつある。

⭐️プログラミング言語周り 相関図

以上をまとめると下記のような感じでしょうか。

たぶん、相関図

おまけ Three.js

https://threejs.org/

手軽にWebGLを扱える3Dライブラリ(Javascriptで記述)。


📝アプリ開発系

Flutter

https://flutter.dev/

Googleが開発した、スマートフォンのアプリケーション開発に特化したモバイルエディター。

デザイナーも知っとこ
flutterはマテリアルデザインが標準コンポーネントになっている。「Material Components widgets」で既存コンポーネントで利用できるものがないかを確認する。アイコンは「Material Design」を確認。
参考:【Flutterでのアプリ開発】デザイナーはマテリアルデザインを知っておくべき

Swift

https://www.apple.com/jp/swift/

Appleが開発した、アプリ開発のためのプログラミング言語。iPhoneアプリ、Webアプリケーションなどが作れる。それ以前は、Objective-C(C言語ベース)を使用。Swiftはその新しい版。

デザイナーも知っとこ
専用アプリのplaygroundsで学習&開発のリアルタイム確認ができる。

Firebase

https://firebase.google.com/?hl=ja

Googleが提供している、モバイルアプリやWebアプリのためのバックエンドプラットフォーム。 ユーザー認証、リアルタイムデータベース、ストレージ、プッシュ通知、アプリ分析などの豊富な機能がある。

デザイナーも知っとこ
Firebase consoleでアクセスして、無料でプロジェクトを作成できる。


📝開発系(プロジェクト管理・協業)

Jira

https://www.atlassian.com/ja/software/jira

アジャイル型開発向けプロジェクト管理ツール。ロードマップ、スクラムボード、レポートによるチームのパフォーマンスを確認できる。

Storybook

https://storybook.js.org/

UIコンポーネントとページを切り離し、独立した状態でコンポーネントの開発を行うことができるオープンソースツール。コンポーネントをカタログのように一覧で見ることができる。React、Vue、Angularなどで利用できる。

デザイナーこそ知っとこ
企業によっては、Storybookを公開していることもある。一見の価値あり。
参考:SmartHR UI

Chromatic

https://www.chromatic.com/

StorybookをベースとしたUIテストツール。chromatic上でUIを確認できるのでステージングにあげることなくUIレビューが行える。変更箇所もビジュアルで確認(Changeset)できるため、リファクタ(内部構造を整理)する際にも便利。

デザイナーも知っとこ
参考:リリースの早さと品質を保ち続けられる体制へ。 「ビズリーチ」のデザイナーとエンジニアの連携フロー

git

https://git-scm.com/

ソースコードのバージョンを管理するツール。

SourceTree
SourceTreeはGitをコマンド入力せずに操作できるツール。

gitHub

https://github.co.jp/

Gitを使ってエンジニアを支援するWebサービス。世界中の開発者同士が自由にコミュニケーションをとれる。

gitLab

https://about.gitlab.com/ja-jp/

プロジェクトチーム内でソースコードを確認&レビュー、実装が可能。


あとがき

私がこの業界に足を踏み入れた時、とにかく覚えないといけない用語がたくさんあり、分からなければ、メモして調べてを繰り返していました。字引きのように、簡単に見返せるまとめがあればいいなと思っていました。手元にメモしている用語の一部にはなりますが、誰かの役に立てばいいなと思います。

その他、デザイン関する情報を「ハードル低く、分かりやすく」をモットーにnoteにまとめています。よかったら他の記事も読んでみてください。


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