夏が過ぎかぜあざみ
タイトルの "～編" に特に意味はないです。まるで僕の人生みたいですね。はいどうも、僕です。本日はタイトル通りCODEPREPをやっていこうと思います。
CODEPREPはプログラミングを書いて動かしながら
学ぶ実践型のプログラミング学習サービスです。
件のやつはこれです。ちょうど九月末まで無料で全講座使えるそうなので夏の終わりの思い出作りにやってみることにしたのでした。本当は、つい最近になって昔利用していたこの学習系サイトが終了に当たって全編無料ということを知ったのでやろうと思っただけです。
やってみた
そんなわけでサクッと触ってみました。サービスが終了して見返した時に何も残らないってのもやなので感想とか雑な知見とか情報とかを残しておこうと思います。
■「初心者向け Webの基礎を学ぶ」終わらせた。
とりあえず「ホームページ」ってやつを作れるようになる系の基礎講座です。
### コンテンツ
・プログラミング超入門
読み物コンテンツ。プログラミングとはなんぞやについての話。
・HTML基礎 HTMLの仕組み編
おおまかなマークアップの話。多分最低限のWebコンテンツを作れるようになれる。個人的にはガチでやりたい場合は以下を見るといいと思ってる。
W3C HTML
・HTML基礎 基本要素(タグ)編
よく使いそうなタグの説明（画像・テーブル・フォームなど）。
・HTML入門 HTML5編
HTML5についての説明とか新しい機能の話。最新の話を追いたい場合は上のリンク見て確認するのが個人的に一番手っ取り早い方法だと思ってる。
・CSS入門 基本スタイリング編
CSSについての大まかな話。個人的にはガチでやりたい場合は以下を見ればいいんだと思ってる。
Cascading Style Sheets
・CSS入門 CSS3編
CSS3で追加された機能とかの話。最新の事情を追いたい場合は上の（以下略。
・JavaScript入門 基本操作編
Webページでよく使う言語JavaScriptでなんか動くものを作る系の話。仕様とか確認したい場合は以下リンクを確認すればいいと個人的には思ってる。
JavaScript
JavaScript | MDN
ECMAScript (※ JavaScriptの標準仕様について)
Welcome to Ecma International
・JavaScript演習 基本操作編
上のやつの演習バージョン。基本的に「逐次」「分岐」「繰返」の要素が分かっていれば苦戦することのない内容。僕はfilterとかmapとかreduceを使って一行に処理をねじ込もうとして苦戦していたけども……。
・JavaScript入門 jQuery編
jQueryの簡単な使い方的な話。個人的には詳しく仕様とか確認したい場合は以下を見ればいいと思ってる。
公式
jQuery
■「Webプログラミングを学ぶ」終わらせた。
Webを支えるガワの技術のおはなし。
### コンテンツ
・HTML入門 HTML5編 （※）
上に同じ
・HTML基礎 フォーム実装編
入力フォームとかの話。入力チェックとか属性とかなど。
・CSS入門 CSS3編 (※)
上に同じ
・CSS基礎 margin padding編
要素(タグで囲ったもの)の余白をいじる方法についての話。
・CSS基礎 position編
要素(タグで囲ったもの)の配置をいじる方法についての話。
・CSS基礎 display編
要素(タグで囲ったもの)の表示のされ方をいじる方法についての話。
・CSS基礎 色の理論編
色彩論とかの話でなく、色の表示の仕方についての話。色彩とかを考えたい場合は以下サイトみながら色彩について考えて以下にゃならん気がする。
WEB色見本 原色大辞典 - HTMLカラーコード
・JavaScript入門 ES6編
ES6(ECMAScript 2015)で追加された機能の話。
・JavaScript入門 オブジェクト指向編
JavaScriptでオブジェクト指向プログラミングやる話。ES6になって追加されたclass構文を使ってオブジェクト指向プログラミングっぽいことやる（じゃんけんプログラム）って話。
・JavaScript基礎 配列操作編
配列使って色々いじる方法についての話。
・JavaScript演習 配列操作編
上の演習バージョン。基本の方で意味もなく触っていたfilterとかmapとかreduceを使って一行に処理をねじ込もうとしてきたやつが生きる演習。
・JavaScriptでつくる残り文字数表示
テキストエリア上に打ち込んだ文字数をカウントして、残り文字数を表示してくれるやつをつくっていくお話。
・JavaScriptでつくるタイマー
スタート、ストップ、リセット機能のついた3分タイマーを作っていくお話。
・JavaScriptでつくるおみくじ
今日の運勢とラッキーカラーをランダムで表示するおみくじをつくっていくお話。
・JavaScript入門 jQuery編 （※）
上に同じ
・JavaScript演習 jQuery編
演習問題。基本的にDOMいじったりイベント処理いじれれば解ける問題。
・JavaScript基礎 jQueryセレクタ編
特定要素(タグ)を取得したり、変更したりする方法についてお話。
参考
Selectors - jQuery 日本語リファレンス
・JavaScript演習 jQueryセレクタ編
演習問題。要素の取り方がわかれば解ける問題。
・JavaScript基礎 jQueryイベント編
jQuery使ったイベントの話。
$(要素).on('イベント', function(e){ // 処理 });
こんなやつです。
参考
Events - jQuery 日本語リファレンス
・JavaScript基礎 jQueryトラバーサル編
DOMをとことんいじり倒す機能(トラバース)とかの話。
参考
Traversing - jQuery 日本語リファレンス
・JavaScript演習 jQueryトラバーサル編
上の演習問題。
・JavaScript基礎 Ajax編
Ajax(Asynchronous Javascript+XML)のいじり方の話。
参考
Ajax - jQuery 日本語リファレンス
参考に挙げたjQueryリンク古い版なんで必要に応じて公式のリファレンスを確認したりして対応する必要がでるかもしれない。
■「システム開発の基礎を学ぶ」終わらせた。
システム開発といえば "Java" しかないみたいな意思を感じるJavaオンリーのラインナップです。
公式
java.com: あなたとJava
### コンテンツ
・Java入門 基本操作編
「逐次」「分岐」「繰返」についての内容。
・Java演習 基本操作編
上の演習問題。基本操作だからってのもあるんだろうけど他の演習問題よりも難易度低い気がした。
・Java基礎 Map編
HashMap、TreeMap、LinkedHashMap、Mapについて使い方の話。使いわけは以下のようになるらしい。
| 種類 | 説明 |
|---|---|
| HashMap | キーの順序に意味が無い場合に利用（高速） |
| TreeMap | キーを自然順序付けでソートしたい場合に利用 |
| LinkedHashMap | 追加順に意味がある場合に利用 |
・Java基礎 List編
Listの使い方のお話。Listの特徴としては以下のようになるらしい。
| 種類 | 説明 |
|---|---|
| LinkedList | 格納される各要素が前後の要素へのリンクを保持するデータ構造 |
| ArrayList | 内部的に配列を使用するデータ構造 |
・Java演習 List編
上の演習問題バージョン。Java普段書かなすぎて苦戦した。特徴にあげた違いがわかっていればなんとかなります。
・Java基礎 オブジェクト指向編
オブジェクト指向についてお話。じゃんけんプログラムをつくる話です。一番最初に説明もなくクラス図突き付けられて、この章ではこれを作りますってなるの最高にJavaって感じで衝撃的だった。
・Java ファイルI/Oの基礎
FileNotFoundExceptionで明日怯えないためのファイル操作に関してのお話。
・Java基礎 例外処理編
ありがちなエラーの確認と例外処理の実装の仕方についてのお話。
・Java基礎 Unicode編
Javaそのものというより、Unicode*1のお話。
■「UIデザイン実践」終わらせた。
作ってみようコンテンツが多いので、気が向いたらJSFiddleとかに内容をぶん投げたりするかもしれない。
### コンテンツ
・HTML入門 HTML5編 (※)
上に同じ
・HTML基礎 フォーム実装編 (※)
上に同じ
・CSS基礎 margin padding編 (※)
上に同じ
・CSS基礎 position編 (※)
上に同じ
・CSS基礎 display編 (※)
上に同じ
・HTML & CSSでつくるWebページ
めっちゃシンプルなシングルカラムのWebページが作っていくお話。
・HTML & CSSでつくる登録フロー
登録フロー要素を作っていくお話。横並びリストの装飾に同じだと思う。
・HTML & CSSでつくるナビゲーションバー
ナビゲーションバーを作っていくお話。
・HTML & CSSでつくるグリッドレイアウト
floatつかって頑張ってグリッドレイアウトを作っていくお話。今はdisplay: grid;があるから……。
・HTML & CSS & JSでつくるサムネイルグリッド
オンマウスで画像が切り替わるやつをグリッドレイアウトにして作ってみるお話。
・HTML & CSS3でつくるポップなメニュー
何をもってポップと言うかよくわかんないんですけど、CSSアニメーションを駆使したメニューを作っていくお話でです。
・HTML & CSSでつくるモーダルウィンドウ
モーダルウィンドウを作っていくお話。モーダルウィンドウってページ前面にでてくるコンテンツのことです。Webページを開いたときに閉じるボタンを押さないと消せない前面に表示されるあの広告とかです。
・HTML & CSSでつくるドロップダウンメニュー
オンマウスでメニューが下にズラーって出てくるドロップダウンメニューを作っていくお話。
・はじめてのSass
CSSの拡張言語Sassについて。詳しくは公式をみよう！
公式
Sass: Syntactically Awesome Style Sheets
・Font Awesome
Webフォントの定番Font Awesomeについてのお話。今は5.x系になって、拡張機能とかも追加されているようですね……。
公式
Font Awesome
・HTMLとCSSで作るWeb名刺
Web名刺なるものを作っていくお話。カード型レイアウトとかでググったりするとこの手のやつはデザインに応用きく気がします。
・HTMLとCSS3でつくるクルクル回転するローディング
君だけのオリジナルスピナーを作っていくお話
・HTMLとCSS3でつくるトグルスイッチ
トグルスイッチを作っていくお話。トグルスイッチってあれね、オンオフの切り替えが視覚的なやつ。
・HTMLとCSS3で作るホバー時に動くアニメーション
オンマウスで動くアニメーションボタンを作っていくお話。
・HTMLとCSS3で作る通知ベル
LINEとかの通知ベルのあのレイアウトを作っていくお話。バッジとかでググったりするとこの手のやつはデザインに応用きく気がします。
・HTMLとCSS3でつくるホバー時に動くアニメーションリンク
オンマウスで動くアニメーションボタンを作っていくお話のリンクバージョン。
・HTMLとCSS3でつくるお天気パネル
お天気パネルを作っていくお話。フレックスボックスの練習用コンテンツ。
・動画を使って夏らしいWebページを作ろう！
タイトルから何を言っているのかわからないけども、背景に動画を使うやつです。
・HTMLとCSS3で作るサイドメニュー
サイドメニューを作っていくお話。
・HTMLとCSS3でつくるパンくず
パンくずリストを作っていくお話。
・JavaScript入門 jQuery編 (※)
上に同じ。
・JavaScript基礎 jQueryセレクタ編 (※)
上に同じ。
・JavaScript輝度 jQueryトラバーサル編 (※)
上に同じ。
・jQuery UIでつくる ドラッグ&ドロップリスト
jQuery UIにあるドラッグ&ドロップ機能を使ったリストの作成していくお話。
公式
jQuery UI
・CSS3+jQueryでつくるスライドショー
スライドショーを作っていくお話。
・jQueryでつくるタブ切り替え
jQuery使ったタブ切り替え機能です。
・jQueryでつくるパララックス
パララックスを作っていくお話。
・jQueryとCSS3で作るアコーディオンパネル
アコーディオンパネル（マウスクリックで開閉できるコンテンツ）をつくっていくお話です。
・jQueryでつくるシンプルなマークダウンエディタ
Marked.jsを組み合わせてマークダウンエディタを作っていくお話です。マークダウンの記法部分はほぼMarked.jsで完結するので細かい制御をjQueryでいじっていく感じになります。
公式
Marked.js Documentation
・jQueryとCSSでつくるスクロールすると隠れるヘッダー
スクロールすると隠れるメニューを作成していくお話です。
・jQueryとCSS3で作るコンタクトフォーム
下までスクロールするとコンタクトフォームが出てくる機能の作り方のお話です。
■「フロントエンドの定番ライブラリを学ぶ」終わらせた。
これもほぼ作ってみようコンテンツの話だし、どこかにぶん投げたりするかもしれない。
### コンテンツ
・JavaScript入門 ES6編 (※)
上に同じ。
・JavaScript基礎 jQueryセレクタ編 (※)
上に同じ。
・JavaScript基礎 jQueryトラバーサル編 (※)
上に同じ。
・はじめてのBootstrap
Bootstrapの使い方について。何ができるかはドキュメントのコンポーネントを見れば大体のってます。
公式
Bootstrap · The most popular HTML, CSS, and JS library in the world.
・Bootstrapのグリッドシステムを理解する
Bootstrapのグリッドシステムについてです。何ができるかはドキュメントのレイアウトを見れば大体のってます。
・Bootstrapで作る登録フォーム
登録フォームを作ってみようというお話。
・Bootstrapで作るWebページ
Webページを作ってみようというお話。
・Font Awesome (※)
上に同じ。
・moment.jsを理解する
時間いじるのに便利ライブラリの使い方について。これでサマータイムも乗り切れるようになれるかは知らない……。
Moment.js | Home
・はじめてのAnimate.css
色々アニメーションできるCSSライブラリ。何ができるかは講座を見るよりも直接公式を見た方が早いのではとか感じたりもする……。
公式
Animate.css
・はじめてのSass (※)
上に同じ
・JavaScriptで学ぶユニットテスト
テストフレームワークのJasmineの操作方法。
Jasmine Documentation
・GoogleMapで遊ぼう
Google MAP APIの使い方についてのお話です。何ができるかは……、公式を見よう。
公式
Google Maps Platform - Geo-location API | Google Maps Platform | Google Cloud
・WebSocketでチャットをつくろう
WebSocket*2を使ってチャットをつくるお話。
参考
HTML Standard
・jQueryでつくるシンプルなマークダウンエディタ (※)
上に同じ
・Webカメラで遊ぼう！
Media Capture and Streams API機能を使ってWebカメラを動かすお話。サポート状況はみじんも追ってないので各自で確認してください。
参考
Media Capture and Streams API (Media Streams) - Web APIs | MDN
・はじめてのReact
Reactのレッスン。以前に公式見ながら怪しい使い方をしていたけども、おおむね使い方は間違ってないっぽそう。
公式
React – A JavaScript library for building user interfaces
・Reactで作るTodoアプリ
上のツールつかって、Todoアプリを作っていくお話。
・はじめてのVue.js
MVVMフレームワークのVue.jsの使い方のお話です。最終的にTodoアプリ作ってみようとかやっています。
公式
Vue.js
・Vue.jsで作り直すアコーディオンパネル
こちらはアコーディオンパネルの作り方についてのお話です。
■「ゲームプログラミングを学ぶ」終わらせた。
Webで2D表現を可能にするCanvasの基礎、ゲームプログラミングに必要な基礎的な物理演算、パズル思考について学習することを目的としています
方針としては上のような方針なので、がっつりゲームを作るって感じの内容ではないです。
### コンテンツ
・はじめてのCanvas
Canvs機能の使い方のお話です。
・Camvasでつくるクリスマスメッセージ
特にゲームとかと関係ないですが、雪降らす演出のページが作れます。
・JavaScriptでつくるおみくじ (※)
上に同じ。
・CSS3+jQueryでつくる2Dゲームモーション
2Dゲームのモーションの作り方のお話です。やっていることはスプライト画像を並べてコマ送りしているって感じです。
・Canvasで作るエアーホッケー 跳ね返り編
Pongつくれるよ！まずは画面の描画と跳ね返るボールの作り方。
・Canvasで作るエアーホッケー パドル操作編
Pongつくれるよ！操作プレーヤーの作り方について。
・Canvasで作るエアーホッケー スコア実装編
Pongつくれるよ！ゲームとして遊べるようにスコアなどの細かい調整について。
・jQueryで作る数独ソルバ Part.1
数独解く奴つくるよ！その１
・jQueryで作る数独ソルバ Part.2
数独解く奴つくるよ！その２
とりあえず学習コースにあったやつ完走しました。これ一記事にまとめる分量じゃないな……。そして、全140レッスンのはずだけど、なんか足んない……。まあ、いいや余りは次回記事にします。
