javascript・jQuery部 中級
この部活で作るもの
まだ投稿されていません
javascript・jQuery部 中級の練習メニュー
レッスン一覧はレッスンを進めていくごとにゲームのように解放されていきます！
無料で受講してみる次の練習へ進む ボタンで解除
Lesson 01「Ajax通信と非同期処理」
今話題のAjax（エイジャックス）について解説！ Ajaxは実際の仕事現場でも数多く使われる必須の技術です！ Ajaxと併せて「非同期処理」の仕組みや「コールバック関数」といったものも学んでいきます。 また、公式ドキュメントや（リファレンス）の見方も簡単に解説していきます。
次の練習へ進む ボタンで解除
Lesson 02「JSONってなに？データの形式」
Ajaxなどでもよく使われる「データ形式」。 その中でメジャーな、TEXT形式、CSV形式、XML形式、JSON形式といったデータ形式について学んでいきます！
次の練習へ進む ボタンで解除
Lesson 03「Ajaxを実装してみよう！その１」
非同期でサーバーと通信のできる「Ajax通信」を実際に実装してみましょう！ また、実際の現役エンジニアもやっているjsでDOMを操作する場合のclass名の付け方も覚えていきます！
次の練習へ進む ボタンで解除
Lesson 04「Ajaxを実装してみよう！その２」
データそのまま、html形式、json形式でデータをやりとりしてみましょう！ 実際の現場でエンジニアがやっている方法と同じようにGoogleChromeの開発ツールを使って、通信の中身も見ていきます！
次の練習へ進む ボタンで解除
Lesson 05 「Ajaxを実装してみよう！その３」
Ajax通信の実装の最後！ json形式での実装のやり方後編とtext形式で取ってきて画面に表示する方法をみていきます！
次の練習へ進む ボタンで解除
Lesson 06 「Ajax通信でemail重複チェックをしてみよう！その１」
WEBサービスにある、「ユーザーが入力されたemailがすでに登録されているものかどうかを判別する機能」をAjax通信を使って、リアルタイムに判別してユーザーに知らせてみましょう！ このレッスンでは、PHP・MySQL部でやったデータベース作成とアクセスも使っていきます！
次の練習へ進む ボタンで解除
Lesson 07「Ajax通信でemail重複チェックをしてみよう！その２」
Ajaxで非同期でのemail重複チェックの後編！ 現場で実際に使われいてるJsでスタイルを変更する方法やJsオブジェクトとjQueryオブジェクトの違いもみていきましょう！
次の練習へ進む ボタンで解除
Lesson 08「フォームが入力されるまでボタンを押せないようにしてみよう！」
WEBサービスにはかかせない、ボタンの活性・非活性制御をしてみましょう！ このレッスンでは、早送りでスピーディーに作っていきます！
次の練習へ進む ボタンで解除
Lesson 09 「モーダルを作ろう！」
これもWEBサービスに欠かせないもののひとつ！ 「モーダル」という画面内に浮かび上がって画像や文章を表示するパネルを作ってみましょう！ このレッスンでは、早送りでスピーディーに作っていきます！
次の練習へ進む ボタンで解除
Lesson 10 「javascriptの言語仕様〜基本の書き方〜」
初級編では、いきなりプログラミング言語自体を深く学んでも飽きてしまうので「とりあえず作れる」が目的でしたが、今回からはjsの言語仕様というものを深く学ぶ事で、「実際の現場でバグが出ても1人で対応できる力」をつけ、中級エンジニアレベルまでステップアップしていきます！
次の練習へ進む ボタンで解除
Lesson 11 「javascriptの言語仕様〜データ型〜」
データの「型」をおさらいしつつ、さらに詳しくみていきましょう！
次の練習へ進む ボタンで解除
Lesson 12 「javascriptの言語仕様〜演算子〜」
演算子もおさらいしていきましょう！ 「厳密比較」ちゃんとしてますか！？
次の練習へ進む ボタンで解除
Lesson 13 「javascriptの言語仕様〜条件分岐・繰り返し処理〜」
条件分岐のif文やswitch文、繰り返し処理のfor文やwhile文、breakとcontinueについてもおさらいしながら細かく学んでいきましょう！
次の練習へ進む ボタンで解除
Lesson 14 「javascriptの言語仕様〜オブジェクトとnew演算子〜」
jsでは、全てのデータは「オブジェクト」です！ そのオブジェクトというものについて、詳しく学んでいきましょう！
次の練習へ進む ボタンで解除
Lesson 15 「javascriptの言語仕様〜独自コンストラクタ〜」
jsでクラスっぽいものを作るための方法が「コンストラクタ」と呼ばれるもの！ コンストラクタからは「インスタンス」というものを作ることができます！
次の練習へ進む ボタンで解除
Lesson 16 「javascriptの言語仕様〜色々なオブジェクト〜」
オブジェクトにも色々な種類があります。 その中でも、Globalオブジェクトはとても大切なオブジェクトなので、しっかり学んでいきましょう！
次の練習へ進む ボタンで解除
Lesson 17 「javascriptの言語仕様〜関数〜」
今まで「なんとなく」使ってきた関数！ jsの関数は、他の言語の関数とはかなり違った特徴が・・・ 関数の細かな特徴と仕組みをみていきましょう！
次の練習へ進む ボタンで解除
Lesson 18 「javascriptの言語仕様〜this〜」
いままでよくわからず使っていた「this」というもの。 その正体とは！？ javascript独特な３大機能の１つめ、「this」について学んでいきましょう！
次の練習へ進む ボタンで解除
Lesson 19「javascriptの言語仕様〜prototype(プロトタイプ)〜」
javascript独特な３大機能の２つめ、「プロトタイプ」について学んでいきましょう！ プロトタイプを使えば、オブジェクト指向の「継承」という仕組みが実現できます！
次の練習へ進む ボタンで解除
Lesson 20「javascriptの言語仕様〜クロージャーその１〜」
javascriptの独特な３大機能の３つめ！ 「クロージャ」について学んでいきましょう！ クロージャは実際の現場でも多用するので、必ず身につけておきましょう！
次の練習へ進む ボタンで解除
Lesson 21「javascriptの言語仕様〜クロージャーその２〜」
javascriptの独特な３大機能の３つめ！ 「クロージャ」の続きです！
次の練習へ進む ボタンで解除
Lesson 22「javascriptの言語仕様〜クロージャーその３〜」
javascriptの独特な３大機能の３つめ「クロージャー」の最後です！ 最後は、クロージャーと一緒に関数の「ホイスティング（巻き上げ）」についても学んでおきましょう！
次の練習へ進む ボタンで解除
Lesson 23「ドロップダウンメニューを作ろう！」
親メニューから子メニューが出てくる、ドロップダウンメニューを作ってみましょう！
次の練習へ進む ボタンで解除
Lesson 24「画像スライダーを作ろう！part1」
HPによくある、画像スライダーを作ってみましょう！ 仕組みさえ分かってしまえば実はとても簡単なんです！
次の練習へ進む ボタンで解除
Lesson 25「画像スライダーを作ろう！part2」
画像スライダーの後編です！
次の練習へ進む ボタンで解除
Lesson 26「JSでCookieをいじってみよう！part1」
JavaScriptを使って、ブラウザのCookieを操作してみましょう！ 他にもSessionやLocalStrage、DBといった「データの保存方法」も解説していきます！
次の練習へ進む ボタンで解除
Lesson 27「JSでCookieをいじってみよう！part2」
Cookie操作の後編です！ Cookie操作のための有名なライブラリ「jQuery.cookie.js」も使って、EC（通販）サイトによくある「カートに保存する機能」を簡易的に作ってみましょう！
次の練習へ進む ボタンで解除
Lesson 28 「npmを使ってみよう！〜コンソールとシェルの書き方〜」
WEBフロントエンド業界で使用されている「パッケージ管理ツール」の「npm」を使ってみましょう！「npmとは何か？node.jsとは何か？GUIとCUIの違いとは？コマンドとは？シェルとは？」まずは基本的なトコロを学習していきます。
次の練習へ進む ボタンで解除
Lesson 29 「npmを使ってみよう！〜npmでライブラリをインストール〜」
フロントエンドのパッケージ管理ツール「npm」を使って実際に色々なライブラリをインストールしてみましょう！ Mac用のパッケージ管理ソフト「Homebrew」も使っていきます！
次の練習へ進む ボタンで解除
Lesson 30 「npmを使ってみよう！〜browserifyでファイル結合〜」
フロントエンドのパッケージ管理ツール「npm」を使って、実際の現場でも使われている「browserify」というライブラリをインストールしましょう！ browserifyを使うと別のjsファイルを読み込んで、複数のjsファイルを一つに結合することができます！
次の練習へ進む ボタンで解除
Lesson 31 「gulpを使ってみよう！〜gulpとは？〜」
フロントエンド業界で実際に使われている「タスクランナーツール」の「gulp」を使ってみましょう！ gulpを使うとCSSやjs、画像ファイルの圧縮から、jsファイルなどの結合、ファイル更新を監視してブラウザをオートリロードしたりと色々なタスクを作って、手間のかかる作業を自動化することができます！
次の練習へ進む ボタンで解除
Lesson 32 「gulpを使ってみよう！〜gulpの書き方〜」
gulpを使って実際に「タスク」を書いてみましょう！
次の練習へ進む ボタンで解除
Lesson 33 「gulpを使ってみよう！〜画像圧縮とファイル監視〜」
専用ソフトを使わなければ出来なかった画像圧縮もこんなに簡単に出来ちゃいます！ ファイルに変更があったらタスクを実行させる「ファイル監視」もやってみましょう！
次の練習へ進む ボタンで解除
コーヒーブレイク「はたらくプログラミング 第7話」
javascript・jQuery部では、「とりあえず使える」ということがメインでしたが、この部では、javascriptの言語仕様（javascript言語の説明書）をしっかり理解することで、実際の仕事現場で問題が起こった際に「原因を突き止める力」をつけていきます。
さらに「アコーディオンパネル」「ポップアップ」「モーダル」「アニメーション」などUI（ユーザーインターフェース）制作の実践を通して「動いている仕組み」を理解することで、「作りたいと思ったものを作れる」という力をつけていきます。
※この部はPHP・MySQL部、ネットワーク・サーバー部での知識も使用します