弊社はWebシステム開発やアプリ開発を行っているのですが、今回はそれらの開発で使っている技術スタックを一挙大公開します！それぞれの特徴やメリットも紹介していきます。
技術スタック一覧表
クリーヴァの技術スタック紹介
弊社では、
React、Next.js、Node.js、Express、Go、Dart、Flutter
の7つの言語を主に使っています。
これら技術スタックを1つずつ紹介していきましょう。
1. React
Reactとは
Reactは、JavaScriptのUIを簡単に書けるようにするライブラリで、フロントエンドの開発言語です。
Reactは今世界中で使われている流行り言語で、例えばFacebook、Instagram、Netflix、Slackなど、広く普及しているアプリケーションのフロントエンド開発に使用されています。
Reactの特徴
ReactはJSX記法を用いて記述します。JSX記法とはHTMLのようにdiv、pなどのタグを用いて記述する方法です。つまり、JavaScriptの言語でありながらHTMLのような感覚で簡単にコードが書けるのです。
また、Reactでは変数や定数を宣言する宣言的なViewを用いています。
宣言方法は、var、let、constの3種類があり、これらを用いて「この変数はこのような内容です」と宣言します。
さらに、Reactではコンポーネントベースでコードが書かれ、レイアウトやスタイルをコンポーネントでまとめて管理します。
Reactのメリット
Reactのメリットを3つ紹介します。
①コードが読解しやすい
紹介したように、ReactはHTMLの要素があったり宣言的Viewで見やすいという特徴があります。
Reactを触ったことのない初心者や、途中からプロジェクトに参加する開発者にとって読解しやすく学習しやすい言語といえます。
②コンポーネントベースで開発効率UP
Reactでは、コードがコンポーネントごとに分けて書かれています。
なのである一つのコンポーネントの内容を変更したい時は、該当するコンポーネントのみ変更すれば良く、変更が容易に行えます。
また、コンポーネントごとに別れているおかげでコンポーネントの再利用がしやすく、開発効率がUPします。
③開発の途中からでもすぐに導入できる
Reactは開発の途中から導入されることを想定して作られているので、途中で導入する場合でも既存のコードを書き換える必要なく、すぐに開発を始められます。
Reactまとめ
以上のことより、Reactはチームでの開発に向いており、初心者にもおすすめの言語といえます。
2. Next.js
Next.jsとは
Next.jsはReactをベースとして、Reactを拡張するために使われるフレームワークです。
Reactにないルーティングやミドルウェアの機能を持っています。
Next.jsの特徴
Next.jsはサーバー機能を有しており、Reactと異なり単体でWebアプリを起動することができます。
SSGの機能がデフォルトで備わっているのに加え、SSRも使うことができます。
Next.jsのメリット
Next.jsのメリットを3つ紹介します。
①ページの表示や読み込みが早い
Next.jsはSSRやSSGを採用しているため、ページの表示や読み込みが速いというメリットがあります。
ページによってレンダリングする場所をクライアントサイドとサーバーサイドで使い分けるので、表示に時間のかかるページをより素早く表示させることができます。
SSGについては、サーバーで組み上がったものが届くので画面の組み立てが早くSEO対策に有効です。
②プラスで自分で構築するものが少なくて楽
Next.jsはサーバーからルーティング、ミドルウェアなどReact開発に必要な機能がほとんど揃っているため、構築が容易にできます。
③画像最適化で画像の読み込みが早い
Next.jsでは画像を自動で最適化し、ファイスサイズを最小限に、そしてどのデバイスでも適切なサイズ・解像度で表示されるように調節してくれます。
これにより画像の表示速度が速く、ユーザーが画像ローディング中に離脱するのを防ぐことができます。
Next.jsまとめ
Next.jsはとりわけ情報の読み込み速度を強みとしている言語ということがわかります。
ショッピングサイトなどの、大規模でページ読み込みの速さが求められたり、画像を多用するサイトの構築に向いているといえます。
3. Node.js
Node.jsとは
Node.jsとは、JavaScriptのバックエンド言語です。
通常、JavaScriptはフロントエンドでしか動かせない特徴を持っていますが、そんなJavaScriptをサーバーサイドでも動かせるようにしたのがNode.jsです。
Node.jsを使えれば、わざわざPHPなどJavaScript以外の言語でバックエンドを構築する必要がなくなります。
Node.jsの特徴
Node.jsの大きな特徴としては、ノンブロッキング I/O方式を採用しているという点が挙げられます。
ノンブロッキング I/O方式とは、情報の入出力の間にも他のタスクを処理することができる仕組みのことを指します。
またNode.jsは、シングルスレッドを採用しているという特徴があります。
シングルスレッドとはプログラム処理の流れが一本のみの状態であることを表します。シングルスレッドによって設計の構築をシンプルなものにすることができます。
Node.jsのメリット
Node.jsのメリットを3つ紹介します。
①高性能処理
Node.js は情報の同時処理に強い「ノンブロッキング I/O方式」を採用しているため、処理能力が高いです。
この仕組みにより、大量のアクセスがあった場合にも複数の情報の処理を同時に行うことができます。
②リアルタイムで処理可能
ノンブロッキングI/Oモデルとシングルスレッドにより、多くの接続があってもリアルタイムでレスポンスを返せるというメリットがあります。
③Webサーバーを構築できる
Node.jsではWebサーバーを構築することが可能です。
紹介した通り、Node.jsは処理速度に優れた言語です。WebサーバーもNode.jsで作ることで処理速度の早いサーバーを構築することができます。これにより、ローディングの早い快適なUXを実現することができます。
Node.jsまとめ
Node.jsは処理の効率や速度、リアルタイム性が優れています。
そのため、チャットアプリやチケット販売アプリなど、いくつもの送受信が行われリアルタム性が重要視されるシステムの構築に向いている言語といえます。
4. Express
Expressとは
Expressは、JavaScriptでWebアプリケーションを構築する際に使われるNode.jsフレームワークです。
API開発や、フロントからバックエンドまで一通りの開発をすることができます。
Node.jsのフレームワークなので、Node.jsの環境の構築が必要になります。
Expressの特徴
Expressを使うと、Node.js上で動作するシングルページアプリケーションやマルチページアプリケーションがシンプルに作成できます。
また、バックエンドではMEAMスタック（MangoDB、Express.js、Anglar.js、Node.jsの構成のこと）を用いて開発を行います。
Expressのメリット
Expressのメリットを3つ紹介します。
①豊富なモジュールでカスタマイズが可能
Expressはモジュールが豊富であることもメリットとして挙げられます。
元々ExpressはWebアプリケーション開発に必要な機能が揃った最小限構成となっているので、プログラム構成を自分好みにカスタマイズしやすいのです。
②日本語ドキュメントが豊富
Expressは日本での利用実績やユーザー数が多い言語なので、日本語でのチュートリアル記事が多く存在します。なので初心者が学習しやすい環境が整っている。
③JavaScriptで書けるため学習コストが低い
ExpressはMEANスタックを採用しています。
MEANスタックに含まれるどのインターフェイスもJavaScriptで書くことができるので、JavaScriptの書き方を知っている人であれば、新たな書き方を学習する必要がなく開発を始められます。
Expressまとめ
ExpressはカスタマイズしたJavaScriptでWebアプリケーションを作りたい人におすすめです。
5. Go
Goとは
Goは、C言語をもとにGoogleが開発したプログラミング言語です。
Google開発ということもあり、YouTubeの開発などに用いられています。
Googleソフトウェアエンジニアの鵜飼氏のインタビューによると、開発当時、Google社内ではC言語を用いた開発を行っていましたが、ビルドに膨大な時間がかかっていたそうです。Googleはそんな社内の課題を克服すべく開発された言語だそうです。
Goの特徴
C言語と同様に、処理が高速でありながらコードがシンプルであることが特徴です。
鵜飼氏も、C言語よりも安全に、そしてスクリプト言語的なシンプルな書き方のできる言語としてGoを開発したと仰っています。
Goのメリット
Goのメリットを4つ紹介します。
①並行処理ができる
Go言語は情報の並行処理ができるため処理速度が速いです。
goroutineやチャネルなどの機能を利用しているため、複数の作業を同時に、また順不同に行うことができます。
②コードの実行速度が速い
Goはコードの実行速度が速いというメリットもあります。
JavaやC言語などの言語は、コードを1行ずつ機械語に変換するので、実行に時間がかかります。一方Goの場合、コードを一旦全部機械語にコンパイルしてから実行するので一括でスムーズに実行することができるのです。
③文法がシンプルで学びやすい
紹介したように、Go言語はシンプルにコードを書けるよう開発された言語です。
そのため、初心者でも学習しやすい言語であるといえます。書き方がしっかり決まっているので、初心者だけでなく開発者にとっても読みやすい言語になっています。
④安全性が高い
Goの代表的な書き方に「型宣言」があります。型宣言をすることでメモリの開放し忘れなどのミスを起こしにくく、安全性が上がります。
Goまとめ
Goは、実行速度と安全性、コードのわかりやすさに特徴のある言語です。
なるべくシンプルに、かつ安全にコードを書きたいという方にはおすすめです。
6. Dart
Dartとは
Dartは、JavaScriptに足りないパフォーマンス性やセキュリティの高さを求めてGoogleが開発した言語です。
DartのフレームワークであるFlutterを使えば、WebサイトだけでなくiOSやAndroidアプリも構築できます。
Dartの特徴
Dartはオブジェクト指向型の言語で、クラスでコンポーネントを定義する書き方をします。
また、DartはJavaScriptやC言語を参考にして開発されているので、JavaScriptやJavaによく似た書き方が特徴です。
Dartのメリット
Dartのメリットを4つ紹介します。
①JavaScriptから派生しているので学習しやすい
DartはJavaScriptが元になっているので、すでにJavaScriptを書ける人にとって学習コストが低く開発できます。
②大規模開発がしやすい
Dartはオブジェクト指向の言語ですので、大規模なアプリケーションの開発がしやすいです。
またパフォーマンスが高いことからも大規模開発に向いていると言えます。
③動的型付けと静的型付けの両方が使える
Dartでは、型をあらかじめ設定する静的型付けと、型を指定せずに記述する動的型付けの両方が使えます。
大人数で開発する時は静的型付け、直感的に学習コストを低く開発したい時は動的型付けを使うなど、開発環境に合わせて記述方法を選択することができます。
④iOS、Androidアプリケーションを開発できる
Dartは、主にFlutterでのアプリ開発に使用します。flutterではAndroidとiOSに対応するアプリを1つのコードで開発できます。
Dartまとめ
Dartは大規模開発やiOS、Androidアプリケーションの開発を低コストで始められる言語といえます。
7. Flutter
Flutterとは
FlutterはiOS、Androidなどのマルチプラットフォームを作れるDart言語のフレームワークで、スマートフォン向けアプリケーションの構築を得意としています。
Flutterの特徴
Dartのフレームワークとして代表的なのがFlutterとShelfですが、ShelfがWebアプリケーションの構築に特化しているのに対し、Flutterはスマートフォン向けアプリが構築できるところに大きな特徴があります。
対応できるプラットフォームの幅が広く、かつそれぞれのプラットフォームに対してカスタマイズすることも可能です。
Flutterのメリット
Flutterのメリットを3つ紹介します。
①学習コストを抑えてiOSとAndroidに対応できる
AndroidやiOSのアプリケーション開発というと、JavaやSwiftなど、全く異なる言語をそれぞれで用いなければならず、学習コストがかかるイメージがあります。
その点、FlutterはJavaScriptをもとに作られているDart言語を用いたフレームワークなので、モバイル開発をしたことはないけどJavaScriptは書ける、という方なら新たな言語を学ぶことなくスムーズに開発を始められます。
②開発費用・時間を削減できる
一般的なスマートフォンのアプリ開発では、AndroidとiOSを別々に開発し、それぞれで開発時間と費用などのコストがかかってしまいます。
しかしFlutterの場合、AndroidとiOSを一度に開発できるため、コストを削減しやすいというメリットがあります。
③レイアウトの幅が広い
FlutterはGoogleが推奨するマテリアルデザインを用いており、複数のプラットフォームにおいて統一感が出るようにカスタマイズしたり、ユーザーが直感的に操作できるコンポーネントを考えることができます。
また、FlutterはWidgetというオブジェクト指向でコンポーネントを書いていきます。UIをWidgetでまとめながら、汎用性のあるデザインを提供することができます。
Flutterまとめ
Flutterでは、Dart言語一つでコードを書くだけでiOS、Android向けアプリケーションが同時に構築できるフレームワークです。
また学習・開発時間・開発費用の3つのコストを削減しながら、優れたUIを作ることができます。
コストを削減しながら簡単にマルチアプリケーションを構築したい人におすすめです。
