初心者がプログラミングについて勉強を始める場合、2つのアプローチが考えられます。

即ち、書籍から入るか或いは学習サイトを利用するかのいずれかに拠るでしょう。CodePrepは後者の学習サイトです。

CodePrepの特徴や効果的な使い方、利用者の評価などを織り交ぜながらその全貌を明らかにします。

CodePrepとはどんなサイト?

議論するグラフィックデザイナー


ひと言で言えばプログラミングについて学ぶための自習用サイトです。プログラムを実際に書くこと、動かすことを体験しながらブラウザ上にアプリを作ります。

運営コンセプトは「マイクロ」「プラクティカル」「ソーシャル」の3つです。

「毎日10分コツコツと」のマイクロ、「よく見る実用的なコンテンツを」のプラクティカルという意味になります。

「利用者同士でコミュニケーションを」のソーシャルが3つ目のコンセプトです。

CodePrepの特徴や使い方の説明の中にしばしば登場するので、気に留めておいて下さい。

カリキュラムは「ブック」と呼ばれる学習コンテンツで構成されており、学びたいテーマを選択します。

CodePrepの特徴の一つは穴埋め方式です。教科書や参考書の類とは違う記述式ドリルをイメージして下さい。

穴埋め問題を解きながらゴールへと向かう仕組みです。多種多用の言語に対応しているので幅広く学習できます。

基本的に無料で使えますが、対象レベルは初心者です。学習期間は1週間程度とされています。

株式会社ギブリーが提供するサイトですが、どんな会社か詳しく見ておきましょう。


株式会社ギブリーのこと

スタートアッププロジェクトを行う男性たち


同社はIT分野での成長支援を一つの企業理念とする東京の会社です。CodePrep以外にも

  • プログラミングスキルを把握する試験機能と学習機能が合体したtrack
  • エンジニア採用のプラットフォームであるathletics
  • コミュニケーションツールのSYNALIO
  • クラウド型AIチャットボットツールであるPEP

などのコンテンツを提供しています。


CodePrepの学習コンテンツ「ブック」

データ転送


ブック」と呼ばれる学習コンテンツがCodePrepの構成要素となると説明しました。ブックの中身をもう少し詳しく解説します。

CodePrepの公式サイトには目的に応じてどのブックを選べば良いかのガイドラインが示されています。

利用者の使い勝手に配慮された構造です。ガイドラインに示された6つのコースをご紹介しましょう。


初心者向けWebの基礎

初めてプログラミングを学ぶ人のためにHTML、CSS、JavaScriptの基礎を教えてくれます。全部で9ブックあります。


Webプログラミング

経験者を対象に基礎編の内容を深く堀り下げたもので、22ブックです。


開発の基礎

Webサーバを動かすプログラミングが中心でJavaを重点的に学習します。こちらは9ブックあります。


UIデザイン

User Interface作成のためのコースです。実践的なコース設計で36ブックが納められました。


フロントエンドの定番ライブラリー

全20ブックのWebプログラミングに習熟した人向けのコースです。


ゲームプログラミング

Webでのゲーム作成について学ぶコースとなります。

基礎的物理演算や動的な2次元ビットマップ画像を描くCanvasという技術仕様なども学習できます。こちらは全9ブックです。

この6つのコースには含まれていませんが、PythonRustなどを学ぶためのブックも用意されています。

尚、ブックは更新されると公式サイトのブック一覧に於いて「New」というアイコンが付されます。

同時にTwitterやFacebookでも告知がされるので時々チェックして下さい。


スキルレベルとブックの関係

SE エンジニア 


CodePrepのブックはレベルに合わせてラインアップが組まれており、これも特徴の一つと言えるでしょう。レベルは入門編基礎編実践編の3部構成です。

CodePrepの公式サイトには140冊ほどのブックが掲載されていますが、それぞれ入門・基礎・実践のタグが表示されています。

入門編、基礎編ではコードやメソッドなど文法の基礎、実践編ではプログラムを書いて動かすことの実体験が学習テーマです。


CodePrepとブラウザ

若い女性はバーチャルグラスをかけてタッチする


CodePrepは特定のブラウザの下で動作します。それらを個別に紹介します。


Safari

アップルインコーポレイテッドが開発したWebブラウザ。


Chrome

Google LLCにより開発されたもの。


Firefox

Mozilla Foundationが開発したオープンソースのWebブラウザ。


Internet Explorer 11

Microsoft Corporationが提供するInternet Explorerの最終バージョン。


Edge

Microsoft Corporationが提供するWebブラウザでWindows10のデフォルトブラウザ。

この内、Internet Explorer 11ではプレビュー機能が働かないと案内されています。

又、CodePrepはPCの画面サイズやキーボードに対応して動く設計です。タブレットやスマホには対応していません


対応する言語

JAVA


CodePrepの中でカリキュラムとして対象とされている言語を個別に解説します。

これらの言語はWebの世界では不可欠と言えるものばかりで、学習課題として重要度高と考えて下さい。


HTML

W3Cにより標準化されているマークアップ言語です。文書表示論理構造などを制御します。

多くのWebブラウザで使われていてハイパーリンクの設定などにも利用できるものです。


JavaScript

簡易言語の一種で、簡単な記述でプログラムが作れる点に特徴があります。

動きや効果を表現するために使われることもあります。名前は似ていますがJavaとの互換性はありません。


CSS

Webページのビジュアルなコントロールを担う言語です。見た目や要素の配置などを制御します。Cはcascadeの意味で、設定値が上から下へ階段状の滝のように流れることから命名されました。


Ruby

プログラミング言語の一つですがオブジェクト指向の言語と定義されています。

密接な関係にあるデータと処理手順をまとまりとして定義しつつ、システム構築を進める手法のことです。


PHP

コマンドや手続きを順番に記述することによりプログラムを形成する「手続き型言語」の一つに分類されています。

Webページを動的に生成することが特徴と言えるでしょう。


jQuery

jQueryはオープンソースとして公開されています。

簡単な記述で多くの機能を動かすことができるのが特徴です。イベント起動やアニメーション効果などに力を発揮します。


Bootstrap

この言葉の元々の意味は、靴の上端にあって足を靴の中にスリップインさせる時に引っ張る革のつまみのことです。

転じてコンピューターの起動からOSのスタンバイまでの一連の動作を指すようになりました。

bootstrap loaderと呼ばれるプログラムを実行して起動に繋げます。


Java

米国のOracle CorporationがSun Microsystems社より開発を引き継いだ人気の高いプログラミング言語です。

データ集合体と操作手順をオブジェクトにまとめるオブジェクト指向プログラミングとして認知されています。


Scala

プログラミング言語、Scala


関数定義によりプログラムを成立させる関数型言語オブジェクト指向言語との融合体という特異な構造を持っています。


Python

機種やOSに左右されず抽象度の高い記述でも受け入れられる言語を高水準言語と呼びます。

Pythonもその一種です。記法、構文などは抽象的なものであっても対応できます。


Rust

安全性並行性速度の3要素に於いて優れたプログラム言語として人気が高いのがRustです。高水準言語のような抽象化も志向しています。

以上の言語をCodePrep内のブックの数で比較するとCSSがトップで47冊です。次いで37冊のHTML、36冊のJavaScriptの順となっています。

言語学習での優先順位付けに際して意識すると良いかも知れません。


CodePrepの特徴

セキュリティエンジニア


個別に解説したものも含め、CodePrepの特徴をまとめると凡そ次の通りです。

  • プログラミングについて学習と実践を一緒に経験できる。
  • ブックという学習コンテンツのバリエーションが豊富。
  • 穴埋め形式の問題を解き進めることで着実に力が付いてくる。
  • セクションの終了毎に経験値が貯まるので学習意欲が持続する。
  • ディスカッション機能によりユーザー同士のコミュニケーションが取れる。
  • 応用編が充実していて、ゲーム感覚で学ぶことができる。

これらの特徴からはCodePrep独自のユニークなコンセプトを窺い知ることができます。


CodePrepの使い方


公式サイトに掲載されている実際の使い方を4つのステップで解説します。


穴埋め形式

ブック1冊毎に10分程度の所要時間でユニットが完了します。まずはプログラミングの動作確認から始めます。

空欄に解答を埋めて進みます。HINTやTIPSも表示されるので参考にして下さい。

解答が正しければ出力結果ページもリアルタイムで変化します。


自由編集モード

Playgroundと名付けられたモードに切り替えて自由に編集することもできます。編集した結果の動きを確認することも重要です。


コードのダウンロード

コードを自分自身の環境にダウンロードすることも可能です。自分の環境で動かせたら感激ですね。


ディスカッションボード

時には壁に突き当たることもあります。そんな時はディスカッションボードに質問を入力して他のユーザーの助けを借りて下さい。

ユーザー同士、切磋琢磨しながらの学習というのもCodePrepの魅力の一つです。


プログラム学習サイトのラインアップ

オンラインインターネットカフェのゲーミングPC


ここまでCodePrepという学習サイトに絞って掘り下げてきました。他の学習サイトにも目を向けてみましょう。いずれも無料で学べるツールがある前提です。


Progate

Progateは解説と演習がセットになっていてCodePrepと同じ構造です。

対応言語はHTML、CSS、PHP、jQuery、Rubyの5種類となります。

レッスンを一つクリアするたびに経験値が貯まるのもCodePrepに似ていますね。

無料会員は17レッスン、有料になると76レッスンが受講できます。


Codecademy(コードアカデミー)

世界的に知られた学習サイトです。英語が基本ですがトップページのみ日本語対応が始まりました。

ブラウザ上でコードが書けるので、特別な開発環境がなくても受講できるのが強みです。


Udemy

動画学習サービスで日本語コンテンツも豊富です。無料・有料両方のコンテンツがあります。


ドットインストール

プログラミング学習サイトとしては国内最右翼との評価です。

全てのレッスンをYouTubeにより無料で見ることができるのが最大の特徴でしょう。

対応言語も幅広く、PHP、JavaScript、Ruby、Pythonなどに対応しています。


CodeStudy

株式会社Techouseが運営するサービスで求人メディア「Jeek」の内部コンテンツと位置付けられています。

主に学生がターゲットで、ブラウザ上だけの学習ができる仕組みです。対応言語はJavaScriptとjQueryとなります。


プログラミン

文部科学省が提供する子供向けプログラミング学習サイトが「プログラミン」という名前で公開されています。

2020年度からの小学校プログラミング教育開始を念頭に開発されたものです。動作環境はAdobe Flash Playerとなります。

ブロックの組み合わせだけで、コード入力が無くても絵を動かして遊ぶことができるものです。


Google Blockly

ビジュアルプログラミング言語という言語があります。「子供でも使える」を基本コンセプトとしていてパズル感覚で学べるサイトです。

こちらもプログラミンと同様にコード入力はせず、命令と状態をブロックで指定してゴールへ進みます。

言語の使い方よりも考え方を学ぶことに主眼を置いているサイトです。

これらのサイトは子供たちも含めて初めてプログラミングに挑戦する人に向けて、垣根を低くすることに腐心しています。

IT関連スキルの進化には目覚ましいものがありますが、学習サイトも共に成長していることが実感できるのではないでしょうか。


企業向け新サービス


企業支援の新たなプラットフォームとして「track LEARNING」というサービスをスタートさせました。

企業内のプログラミング研修にCodePrepを用いるという仕組みです。

エンジニアの研修・育成のためのプラットフォームと銘打って「試験」と「学習」を融合させたサービスに仕上げています。

試験はプログラミングスキルをチェックするため、学習は習熟度の可視化を図り学習を管理するためとの説明です。

試験は4つの要素で構成されます。知識はITリテラシーやコンピューターサイエンス、セキュリティなどの問題です。

プログラミング力についてはアルゴリズム実装力が問われるでしょう。

更に言語やソースコードを扱う実務力、データダウンロードと評価モデル構築を扱うAIチャレンジの4要素となっています。

尚、試験環境の対応ブラウザはGoogle Chrome または Firefoxです。

学習ではHTMLやJavaScriptなど言語別の基礎知識、プログラミングの基本操作やアルゴリズムなどについて理解を深めます。

学習効果測定のための事前試験、教材選定、受講、進捗管理と進め、受講後は習熟度チェックがあります。

試験・学習の結果はレポーティングに反映されるので、次のステップに進むための糧として下さい。


模範解答表示機能

ソフトウェアのウェブサイトを扱うプロの開発者プログラマーdes


CodePrepに搭載された模範解答表示機能についても紹介しておきましょう。

Exercise(エクササイズ)という機能があります。出題されたブックに関連する課題を、自由編集したプログラムでクリアするというものです。

解答に対してはプログラムが正しく動作するか否かだけが判定されていました。

模範解答表示機能は、解答が案出できなくても解答が閲覧できる機能です。

解答を振り返り、先に進むためには有効な機能と言えるでしょう。


CodePrep利用者の声

広告制作チームはキーデザインを考えている


実際に利用したユーザーの声を集めてCodePrepという学習サイトの評価をしてみます。

多くのユーザーが感じているのは学習と実践の組み合わせにより知識が定着する、ということでした。

書物による学習の後にCodePrepで実際のアプリ作成に挑むのが効果的との意見が多数寄せられています。穴埋め形式の学習も一役買っているでしょう。

ディスカッション機能を便利と評価しているユーザーも多いようです。質問スレッドを自由に起こせるので連帯感を取り結ぶことができます。

直面する悩みの共有、お互いの進捗確認など使い方は様々ですが、助け合いながら進めることは貴重な経験です。

CodePrepというツールは、株式会社ギブリーが提唱する「IT分野での成長支援」という理念を具現化した学習ツールと言えるでしょう。