デイトラ Webアプリ開発コースを現役エンジニアがレビューしてみた

デイトラの「Webアプリ開発コース」はコスパが良いプログラミングスクールと評判ですが、自分に合っているか気になりますよね。

そこで、現役Railsエンジニアの管理人が、このコースで学習する個別技術がどういったものか、その内容が適切かどうかを簡潔に解説します。

膨大なカリキュラムを個別チャプターごとにレビューしたため、記事も長くなってしまいましたが、気になる部分だけ目次からたどって流し読みしてもらえればと思います。

結論だけ先にまとめると、デイトラの「Webアプリ開発コース」は実際の開発現場で使われているモダンなウェブ開発を一通り学べるというものでした。

カリキュラムの構成

Webアプリ開発コースは４つの開発セクションと1つの転職サポートセクションの合計5セクションに分かれています。

開発セクション

• Webアプリ開発コース 初級編：HTML、CSS、JavaScript、Ruby
• Webアプリ開発コース中級編：Ruby on Rails
• Webアプリ開発コース上級編：Ruby on Rails
• Webアプリ開発コースフロントエンド開発編: JavaScript、Node.js、TypeScript、React

転職サポートセクション

• Webアプリ開発コース転職サポート編：職務経歴書、面接対策、Wantedly応募方法など。

Webアプリ開発コース 初級編

初級編は38日間でWeb開発の基礎を学びます。

HTML・CSS基礎編

ウェブページがどのような仕組みで表示されるかを、HTMLとCSSを学ぶことで理解します。

開発環境は、以下の２つをインストールします。

• ブラウザー：Google Chrome
• エディタ：VS Code

Chromeの開発者ツールとVS Codeはフロントエンド開発では鉄板の組み合わせなので、学習ツールとして妥当な選択だと感じます。

また、VS Codeプラグイン「AIコードメンター」をインストールします。これは、通常のAIに尋ねると答えが表示されてしまい学習にならないため、答えではなく考え方のヒントを表示するように、デイトラが独自に開発したものです。

コーディング練習編

HTMLとCSSを使って実際にウェブサイトを作る練習をします。

具体的には、以下のような仮想スイーツショップのウェブサイトを作成します。

無味乾燥なHTMLやCSS文法をひたすら覚えるのではなく、具体的なLPを作成するのは学習モチベーションが高まるので良いと思いました。

また、HTMLやCSSを省略記法で高速に記述できるEmmet（エメット）というツールについても学習します。

Emmetの例：ul>li と入力すると <ul><li></li></ul> になります。

Bootstrap学習編

Bootstrapというのは、WebサイトやWebアプリケーションを効率よくデザインするための代表的な「CSSフレームワーク」です。ボタン、フォーム、ナビゲーションバーなどのよく使われるパーツが予め用意されていたり、スマホやタブレットでもレイアウトが最適化されるレスポンシブ対応が備わっていたりします。

Bootstrap学習編で作成するサイト：

私も過去にBootstrapを何度も使っているので、使い方を覚えておくと開発現場で役立つと思います。

JavaScript・jQuery学習編

JavaScriptの基礎や、JavaScriptフレームワークのjQueryを学びます。

最近はjQueryよりReactなどのモダンフレームを使うことが多いため、ウェブエンジニアの間ではjQueryはオワコンとされることが多く、私も「いまさらjQuery？」とは思いました。

ただ、Reactはこのコースに含まれている「フロントエンド編」で勉強できるので、特に問題ではないと思います（Reactの代わりにjQueryだったら問題ですが）。

また、自分の経験でも、レガシーサイトや昔ながらのウェブ制作会社から納品されるLPページでは依然としてjQueryが使われていることがあるのも事実です。がっつり取り組む必要はありませんが、そのような場面でも対応できるように基礎だけでも触れておくのに損はないと思います。

Sass学習編

Sass（サス）はCSSをより効率的かつ保守しやすくするために拡張されたメタ言語です。そのままではブラウザが読み込めないので、ビルド・デプロイ時にCSSに変換して使います。

RailsではSassを使うことが多く、CSS変換ツールもデフォルトで組み込まれています。Rails開発を行うならほぼ必須の知識のため、カリキュラムに組み込まれているのは妥当です。

Ruby学習編

いよいよサーバーサイド言語Rubyの基礎を学びます。

技術記事サイトQiitaのAPIを使って、記事を検索するミニアプリも作成します。

まずはRubyの基礎を理解しないとRailsのコードも読めないので、妥当な学習順番だと思います。

初級編を終えたら

初級編を終えると、以下の転職サービスの利用が可能となります。

• スカウトサービス
• 一部のスポンサー企業への応募

初級編完了レベルのスキルでも応募可能な企業もあるとのことなので、学習と並行して履歴書や職務経歴書の準備を進めていくと良いでしょう。

Webアプリ開発コース中級編

中級編は32日間で構成されており、いよいよRuby on Railsを学習します。

中級編を終えると、以下の機能が付いたブログアプリをRailsで開発できるレベルになります。

• 新着順の記事一覧閲覧
• ブログ記事の投稿、編集、削除
• 記事への「いいね」とコメント
• 画像のアップロード

Webの基本編

Webの基本編とありますが、学ぶ内容は以下のような「ウェブ開発の基本」です。

• HTTPやIPアドレスなどのウェブの仕組み
• GitとGitHubの使い方
• ターミナル（いわゆる黒い画面）の使い方
• データベースとSQLの基本

SQLの講義動画：

Railsに触れる前にウェブ開発の基本を学習することで、次の章で学ぶ以下のトピックについて自然と理解できるようになっているのは良い構成だと思いました。

• HTTPリクエストとRubyメソッドの紐付け
• RubyコードのSQLへの変換

Railsの基礎編

いよいよRailsを使っての開発が始まります。

このチャプターでは、Railsの基本的な機能や使い方を学び、記事一覧ページを実際に作成します。

CRUDアプリ編

このチャプターではCRUDアプリの作り方を学びます。

CRUDアプリというのは以下の4つの動作ができるアプリのことで、世の中のほとんどのアプリはこの組み合わせでできています。

• Create （作成）
• Read（表示）
• Update（更新）
• Delete（削除）

Railsの重要概念

このチャプターでは、以下のようなRailsの概念を学びます。

• Rails開発環境構築：デバッガーのインストールなど。
• ActiveRecord：RailsコードからSQLを自動生成してくれる仕組み
• Validation：保存前のデータ検証機能

デバッグがうまいエンジニアは優れたエンジニアであることが多いため、ここでデバッガの使い方をしっかり学習しておくとよいと思います。

ユーザ認証の実装編

ログイン・ログアウトなどのユーザ認証機能の構築です。Railsではほぼデファクトの認証ライブラリである「Devise」を使います。

私のこれまでの経験でも、認証機能のあるRailsアプリはほぼ100%Deviseを使ってきました。Deviseの使い方を覚えると、一瞬でユーザ登録、ログイン、ユーザプロフィール、ログアウトを実装できるようになります。

リレーション学習編

リレーションというのは、データ同士の関連性のことです。例えば、記事とユーザを紐づけて記事の投稿者としたり、どのコメントがどの記事に対するものなのかを定義したりします。初めてRailsを使う人は、リレーションが驚くほど簡単に構築できることに驚くと思います。

デプロイ編

デプロイとは、アプリケーションをインターネット上のサーバで公開することです。デイトラではアプリケーション自体はHerokuというサービスを使い、画像は別途Amazon Web Services (AWS）にホスティングするという方式です。

Herokuは大規模サービスになると料金が他のサービスと比べ割高だったりサーバが海外にしかないなどのデメリットもありますが、サーバ設定の知識がほとんどなくても簡単にアプリケーションをデプロイできるので、学習用には最適だと思います。

TODOアプリ開発編

中級編の最終課題として、要件定義とデザインに基づいて０からアプリを構築します。

要件定義書：

デザイン：

要件定義とデザインを元にアプリを設計・実装するというのは、まさに現場のエンジニアの仕事の流れなので、非常に実践的と思います。

その他学習に役立つTIPS

現役のエンジニアが、どうやってエラー解決するか、実際にどのように機能開発するか、というプロセスを動画で視聴する、箸休め的なチャプターです。

自分でプログラミングしてアウトプットするのが一番大切ですが、時には他の人のプロセスをインプットして真似してみるのも非常に参考になります。

Webアプリ開発コース上級編

26日間で、転職可能なレベルまで技術力を伸ばしていく最終段階です。

Rails発展編

中級編で作成したブログアプリを改善していきます。

• エディターの改善：ブログ投稿画面に見出しや太字などを付けられる機能（WYSWYGエディタという）を実装。
• フォロー機能：x (旧Twitter）のようなフォロー機能。
• タイムライン：フォローしたユーザの記事を一覧表示。

フォロー機能はほぼRailsの標準機能で実装できるので、Railsで出来ることの理解を深めるのに良さそうな題材です。

Ajax編

Ajaxは、ブラウザ画面のリロードなしでサーバと非同期で通信するJavaScriptの技術です。

Reactなどのフロントエンドフレームワークを使わなくても、Rails標準機能だけである程度のAjax処理は可能ということを教えてくれるのはとても良いと思います。標準機能だけで実装できるのに、わざわざ別のフレームワークを使うのは過剰実装でエンジニアの力不足と見なされますからね。

非同期処理

Railsにおける非同期処理は、リクエストを受けた際に重い処理をせずにユーザにはレスポンスをいったん返しておいて、後でその処理をバックグラウンドで行うことを指します（例：ユーザ登録の際の登録メール送信）。

非同期処理を行わないと、ユーザを不必要に待たせたり、処理が失敗したときにリトライできなくなるので、ウェブアプリには必須の機能です。

Railsのその他の機能

これまで勉強してこなかったRailsの他のメジャーな機能を学習します。

• rakeタスク：コマンドラインで実行するバッチ処理などの機能。
• 国際化：アプリケーションコードを変えずに多言語化する機能。
• ルーティング：URLリクエストを特定のコードにマッピングする際に使える名前空間、リソース、RESTなどの概念。

テスト

自動テストの書き方を勉強します。テストを書いておくと、副作用のあるコードを追加したときにテストが壊れて検知できるので、開発現場では必須です。

ちなみに私が過去にエンジニア採用をする際は、コーディングテストで自動テストを書かない応募者は全員落としてました。それくらい自動テストは重要です。

セキュリティ

Railsはデフォルトである程度のセキュリティを担保してくれます。ただ、どのようなセキュリティリスクがあり、Railsがそれをどのように防いでいるのか、セキュアなコードを書くにはどうするべきかを知るのはウェブエンジニアとして非常に重要です。

セキュリティ意識の低さが原因で、機密情報や個人情報が漏洩した際はエンジニアの責任が厳しく問われるのは言うまでもありません。

一般技術

読みやすいコード（可読性が高いといいます）は、特にチーム開発において重要です。読みにくいコードを書くエンジニアはチームメイトから嫌われますし、そもそも採用されない可能性が高まってしまいます。

最終課題

最終課題では、これまで学習したスキルを総動員して、instagram風アプリを0から作成します。

実装機能一覧：

• ログイン機能
• プロフィール画像設定
• 画像投稿機能
• タイムライン
• いいね機能
• コメント機能
• メール送信
• フォロー機能
• テスト

課題デザイン：

オリジナルアプリでないのが若干マイナスポイントですが、オリジナルアプリをカリキュラムに入れてしまうとレビューが完全に個別対応になり講師のコストが跳ね上がるので、コスパを売りにしているデイトラでは妥当なトレードオフかと思いました。

とはいえ、ここまでの知識を学習された方であれば自身でのオリジナルアプリ開発も問題ないかと思います。

REST API

RailsをAPIサーバとして使う方法を学習します。

フロントエンドはReact、バックエンドはRailsのAPI、という組み合わせは本番アプリでも非常に多いです。フロントエンド開発編ではまさにこの組み合わせを使うので、ここで事前学習しておくと良いでしょう。

カリキュラム後の学習

カリキュラムが終わった後に学習すべきRubyやRailsの内容を教えてくれます。当然ですが、プログラミングスクールに通ったからといってそれで勉強は終わりではなく、常に自身の技術力を高める姿勢が求められます。

学んだスキルを仕事に繋げよう！【転職編】

転職支援コースの紹介チャプターです。実は「Webアプリ開発コース」でも転職支援コースとほぼ同じ教材が閲覧できるのですが、転職支援コースは教材に加えて、マンツーマンでの職務経歴書の添削を受けられたり、サポートチャットで転職に関する質問をすることができます。

Webアプリ開発コースフロントエンド開発編

フロントエンド基礎

HTML、CSS、JavaScriptについて、より深く学んでいきます。

フレームワークなしの素のJavaScript（バニラJavaScriptと言います）の文法や特性を知ることで、TypeScriptやReactを使うメリットをより深く理解できるようになります。

モダンJavaScript開発

サーバーサイトでJavaScriptを使うためのNode.js、パッケージマネージャのnpm、JavaScriptの上位互換であるTypeScriptについて学びます。

特にNode.jsとnpmはフロントエンド開発だけでなくRails内でもよく使う、モダンアプリ開発には必須の存在です。

Node.jsのコード例：

import { createServer } from 'node:http';

const server = createServer((req, res) => {
  res.writeHead(200, { 'Content-Type': 'text/plain' });
  res.end('Hello World!\n');
});

// ローカルサーバーをポート番号3000で起動
server.listen(3000, '127.0.0.1', () => {
  console.log('Listening on 127.0.0.1:3000');
});

// `node server.mjs`で起動

TypeScriptでアプリを作るセクションは、素のJavaScriptで作ったアプリとの違いを実感できる良いカリキュラムだと思います。

TypeScriptの例：

React開発

Reactはメタ（旧Facebook）が開発したフロントエンドフレームワークで、インタラクティブなUIを構築するために使われます。

フロントエンドエンジニアになるならばほぼ必須の知識ですし、バックエンドエンジニアでもフロントエンドエンジニアと連携するためにも基本的なコンセプトは押さえておく必要があります。

Webアプリ開発コース転職サポート編

プログラミングを学ぶ動機の多くがエンジニアとして転職したい、というものです。そのため、Webアプリ開発コースには以下のようなサービスが含まれています。

• スポンサー企業からのスカウト
• スポンサー企業の説明会への参加権
• 書類作成・面接対策のカリキュラム
• 履歴書・職務経歴書テンプレート

エンジニアとして採用されるために特化した内容になっていますので、転職を目指す人は必見かと思います。

転職サポート編は自習形式なのですが、もしマンツーマンの職務経歴書添削や転職に関するチャットサポートを希望する場合は、別売りの「転職支援コース」を購入することができます。

まとめ：デイトラWebアプリ開発コースはモダンウェブ開発を一通り網羅してる

現役エンジニアの目で見ても、デイトラのWebアプリ開発コースはウェブエンジニアに必要な知識は一通り網羅されていました。

特に、論理的に構成されたカリキュラムと、バックエンドからフロントエンドまでウェブ開発の知識が幅広く学べる点が印象的でした。

カリキュラムを全てこなせば、実際の開発現場で他のチームメンバーの会話についていけなかったり何をやっているのかわからないということはほとんどないと思います。

一方、非常にボリュームがあり、かつ自習形式なので、しっかりと学習計画を立てて進めることが重要だと思いました。