ゼロから始めて、
楽しく学べる
カリキュラム

課題を進めてプログラミングの基礎、
コーディングの仕方、デバッグやデプロイの方法まで、
サービス開発に必要なことを学習しましょう。

目指すゴール

自分でゼロからサービスを立ち上げることが目標です。

フロントエンドとバックエンドの開発方法を学び、Webサービスの開発方法を習得しましょう。

働く自由を得る

開発に必要な技術や知識を身に付ければ、

就職や転職に強く*¹、副業で稼いだり、フリーランスで仕事を受注することができます。

作ったサービスがビジネスになれば、会社を大きくすることもできます。

家やカフェで好きな時に仕事ができます。

技術系(IT・通信)の求人倍率は全職種の中で最も高く 2019年は9〜10倍で推移しています。

楽しく習得する

技術の習得は決して簡単ではありません。

覚える量は多く、データや通信など目に見えないものを理解する必要があります。

簡単にはできませんが、楽しくすることはできます。

自分に合った学習方法を見つけてください。

カリキュラムの進め方

  • 全てを覚えようとするのではなく仕組みを理解するように努めてください。
  • 分からないところがあればGoogleで検索してください。そして答えの見つけ方を覚えてください
  • 必ず自分のパソコンでコーディングを行い実行してください。
  • 継続してください。(最も難しい)
ロボットの操作

学習準備

Webサイトの開発には、無料で使えるブラウザ Google Chrome を使用します。なぜ、このブラウザを使用するかと言うと、開発する際に使用できる多くの機能が豊富で使いやすいからです。

開発者がGoogle Chromeを使う理由

プログラミングは、パソコンのキーボードで素早くタイピングを行う必要があります。また、ファイルの保存や文字列のコピー、貼り付けなどの基本的な動作はショートカットキーを用いて実行します。これはプログラミングを始める前に必要な技術であるため、問題なく学習できるレベルなのかどうかをゲームを使って確認します。

プログラミングに必要なタイピングスキル

「Webサイトがどんな仕組みで配信されているか」について学習します。自分が今どこの何を作っているのかを理解することは、学習のモチベーションに繋がります。全体像が分かることで理解できることもあるため、ここでWebの概念について簡単に学習します。

学習前に知っておこう!Webの概念について

プログラミングは、ソースコードと呼ばれるテキストを記述したファイルを作成し、そのファイルをコンピュータが実行することで意図した動作を実現できます。このファイルを作成するときに使用する無料の編集用のソフトをダウンロードします。

Visual Studio Codeをダウンロードして拡張機能をインストールしよう

フロントエンド学習とバックエンド学習の違いと、それぞれに必要な知識について確認してみましょう。最初にフロントエンドの学習を行い、次にバックエンドを学習します。

フロントエンドとバックエンドの違いとは?それぞれの開発に必要な知識について

Frontend(フロントエンド)

フロントエンド学習

ブラウザで文章を表示するための HTML の基礎を学習します。この HTML はこれから学習する CSS や JavaScript の土台となります。基本的な記述の仕方や確認方法などを学びます。

【HTML】はじめてのHTML

【HTML】フォーマットの規則

【HTML】基本的なタグ

【HTML&CSS】汎用タグの役割

CSS は HTML を彩るための言語です。HTML で記述された文章に色を付けたりサイズを変更したりといったスタイルを設定する方法について学習します。Webサービスの開発では、ほぼ確実に CSS を使用します。この CSS  がサービスやブランドのイメージを左右するといっても過言ではない程重要です。

【CSS】はじめてのCSS

【CSS】セレクタとは

CSSを使用して、ページをレイアウトするための方法やコンポーネントのデザインについて学習します。

【CSS】Flexbox(フレックスボックス)のデモ

【CSS】ボタンをデザインしよう

【CSS】背景画像を表示してみよう

現在では、Webサイトを訪問する7割はモバイルからのアクセスだと言われています。レスポンシブデザインを学習することで、パソコンの大画面で見た場合と、タブレットやモバイルでみた場合とで、表示の仕方を変えることができます。例えばモバイル用に文字を縮小したり、不要なコンテンツを非表示にすることができます。

【CSS】レスポンシブデザイン

CSSフレームワーク とは、決められた手順でコーディングすることによってデザインされた部品を簡単に使用することができる枠組みのことです。このCSSフレームワークを導入すれば、簡単に素早くデザインされたサイトを作成することができます。ここでは、CSSフレームワークについて学習し、実際に使用してみます。

【CSS】CSSフレームワーク

JavaScript は HTML に動きを与えることができる言語です。ここから本格的なプログラミング学習となります。値や変数、条件分岐、ループ文、関数の作成や実行について基礎を学習します。

【JavaScript】はじめてのJavaScript

【JavaScript】真偽値、条件分岐(if、switch)

【JavaScript】配列、繰り返し処理(for、while)

【JavaScript】オブジェクトと関数

JavaScript は DOM 操作を行うことで HTML を動的に作成、変更、削除することができます。また、サーバーと通信しデータの検索や更新、削除をリクエストすることができます。ここでは実際に外部のサーバーからデータを取得し、画面に表示させる方法について学習します。

【JavaScript】イベントバブリング

【JavaScript】DOM操作

【JavaScript】Web API(XHR、Fetch API)

【JavaScript】クラスとオブジェクト指向プログラミング

Git は作成したファイルのバージョンを管理するためのシステムです。この Git を使用することで、バージョンごとにどこが更新されたか更新履歴などを簡単に参照することができます。このGitについて基本的なことを学習し、GitHubというサービスを使用してオープンソースについて理解します。

【Git】Gitの使い方

【GitHub】GitHubの使い方

【GitHub】GitHubページでポートフォリオ作成

この最終課題を行うことで、フロントエンドの基礎知識は身につくはずです。実際に簡単なアプリケーションを作成し、合否判定を行います。

最終課題で制作するWebアプリ

【フロントエンド最終課題】◯◯風本の検索アプリ

Backend(バックエンド)

バックエンド学習

Javaを開発するためには開発環境をパソコンに構築する必要があります。またIDE(Visual Studio Code)の設定を行うことで快適に開発ができるようになります。

【Java】Javaの開発環境を構築

【Java】Visual Studio CodeでHello World

Javaのコードの書き方などの基礎を学習します。Javaはオブジェクト指向プログラミングといわれ、オブジェクトを意識しながら開発していきます。

【Java】はじめてのJava入門

【Java】真偽値と条件分岐

【Java】配列と繰り返し処理