javascript・jQuery部 中級

部活トップ画像

javascript・jQuery部では、「とりあえず使える」ということがメインでしたが、この部では、javascriptの言語仕様(javascript言語の説明書)をしっかり理解することで、実際の仕事現場で問題が起こった際に「原因を突き止める力」をつけていきます。
さらに「アコーディオンパネル」「ポップアップ」「モーダル」「アニメーション」などUI(ユーザーインターフェース)制作の実践を通して「動いている仕組み」を理解することで、「作りたいと思ったものを作れる」という力をつけていきます。
※この部はPHP・MySQL部、ネットワーク・サーバー部での知識も使用します

この部活で作るもの

まだ投稿されていません

javascript・jQuery部 中級の練習メニュー

Lesson1「Ajax通信と非同期処理」

今話題のAjax(エイジャックス)について解説! Ajaxは実際の仕事現場でも数多く使われる必須の技術です! Ajaxと併せて「非同期処理」の仕組みや「コールバック関数」といったものも学んでいきます。 また、公式ドキュメントや(リファレンス)の見方も簡単に解説していきます。

Lesson2「JSONってなに?データの形式」

Ajaxなどでもよく使われる「データ形式」。 その中でメジャーな、TEXT形式、CSV形式、XML形式、JSON形式といったデータ形式について学んでいきます!

Lesson3「Ajaxを実装してみよう!その1」

非同期でサーバーと通信のできる「Ajax通信」を実際に実装してみましょう! また、実際の現役エンジニアもやっているjsでDOMを操作する場合のclass名の付け方も覚えていきます!

Lesson4「Ajaxを実装してみよう!その2」

データそのまま、html形式、json形式でデータをやりとりしてみましょう! 実際の現場でエンジニアがやっている方法と同じようにGoogleChromeの開発ツールを使って、通信の中身も見ていきます!

Lesson5 「Ajaxを実装してみよう!その3」

Ajax通信の実装の最後! json形式での実装のやり方後編とtext形式で取ってきて画面に表示する方法をみていきます!

Lesson6 「Ajax通信でemail重複チェックをしてみよう!その1」

WEBサービスにある、「ユーザーが入力されたemailがすでに登録されているものかどうかを判別する機能」をAjax通信を使って、リアルタイムに判別してユーザーに知らせてみましょう! このレッスンでは、PHP・MySQL部でやったデータベース作成とアクセスも使っていきます!

Lesson7「Ajax通信でemail重複チェックをしてみよう!その2」

Ajaxで非同期でのemail重複チェックの後編! 現場で実際に使われいてるJsでスタイルを変更する方法やJsオブジェクトとjQueryオブジェクトの違いもみていきましょう!

Lesson8「フォームが入力されるまでボタンを押せないようにしてみよう!」

WEBサービスにはかかせない、ボタンの活性・非活性制御をしてみましょう! このレッスンでは、早送りでスピーディーに作っていきます!

Lesson9 「モーダルを作ろう!」

これもWEBサービスに欠かせないもののひとつ! 「モーダル」という画面内に浮かび上がって画像や文章を表示するパネルを作ってみましょう! このレッスンでは、早送りでスピーディーに作っていきます!

Lesson10 「javascriptの言語仕様〜基本の書き方〜」

初級編では、いきなりプログラミング言語自体を深く学んでも飽きてしまうので「とりあえず作れる」が目的でしたが、今回からはjsの言語仕様というものを深く学ぶ事で、「実際の現場でバグが出ても1人で対応できる力」をつけ、中級エンジニアレベルまでステップアップしていきます!

Lesson11 「javascriptの言語仕様〜データ型〜」

データの「型」をおさらいしつつ、さらに詳しくみていきましょう!

Lesson12 「javascriptの言語仕様〜演算子〜」

演算子もおさらいしていきましょう! 「厳密比較」ちゃんとしてますか!?

Lesson13 「javascriptの言語仕様〜条件分岐・繰り返し処理〜」

条件分岐のif文やswitch文、繰り返し処理のfor文やwhile文、breakとcontinueについてもおさらいしながら細かく学んでいきましょう!

Lesson14 「javascriptの言語仕様〜オブジェクトとnew演算子〜」

jsでは、全てのデータは「オブジェクト」です! そのオブジェクトというものについて、詳しく学んでいきましょう!

Lesson15 「javascriptの言語仕様〜独自コンストラクタ〜」

jsでクラスっぽいものを作るための方法が「コンストラクタ」と呼ばれるもの! コンストラクタからは「インスタンス」というものを作ることができます!

Lesson16 「javascriptの言語仕様〜色々なオブジェクト〜」

オブジェクトにも色々な種類があります。 その中でも、Globalオブジェクトはとても大切なオブジェクトなので、しっかり学んでいきましょう!

Lesson17 「javascriptの言語仕様〜関数〜」

今まで「なんとなく」使ってきた関数! jsの関数は、他の言語の関数とはかなり違った特徴が・・・ 関数の細かな特徴と仕組みをみていきましょう!

Lesson18 「javascriptの言語仕様〜this〜」

いままでよくわからず使っていた「this」というもの。 その正体とは!? javascript独特な3大機能の1つめ、「this」について学んでいきましょう!

Lesson19「javascriptの言語仕様〜prototype(プロトタイプ)〜」

javascript独特な3大機能の2つめ、「プロトタイプ」について学んでいきましょう! プロトタイプを使えば、オブジェクト指向の「継承」という仕組みが実現できます!

Lesson20「javascriptの言語仕様〜クロージャーその1〜」

javascriptの独特な3大機能の3つめ! 「クロージャ」について学んでいきましょう! クロージャは実際の現場でも多用するので、必ず身につけておきましょう!

Lesson21「javascriptの言語仕様〜クロージャーその2〜」

javascriptの独特な3大機能の3つめ! 「クロージャ」の続きです!

Lesson22「javascriptの言語仕様〜クロージャーその3〜」

javascriptの独特な3大機能の3つめ「クロージャー」の最後です! 最後は、クロージャーと一緒に関数の「ホイスティング(巻き上げ)」についても学んでおきましょう!

Lesson23「ドロップダウンメニューを作ろう!」

親メニューから子メニューが出てくる、ドロップダウンメニューを作ってみましょう!

Lesson24「画像スライダーを作ろう!part1」

HPによくある、画像スライダーを作ってみましょう! 仕組みさえ分かってしまえば実はとても簡単なんです!

Lesson25「画像スライダーを作ろう!part2」

画像スライダーの後編です!

Lesson26「JSでCookieをいじってみよう!part1」

JavaScriptを使って、ブラウザのCookieを操作してみましょう! 他にもSessionやLocalStrage、DBといった「データの保存方法」も解説していきます!

Lesson27「JSでCookieをいじってみよう!part2」

Cookie操作の後編です! Cookie操作のための有名なライブラリ「jQuery.cookie.js」も使って、EC(通販)サイトによくある「カートに保存する機能」を簡易的に作ってみましょう!

Lesson28 「npmを使ってみよう!〜コンソールとシェルの書き方〜」

WEBフロントエンド業界で使用されている「パッケージ管理ツール」の「npm」を使ってみましょう!「npmとは何か?node.jsとは何か?GUIとCUIの違いとは?コマンドとは?シェルとは?」まずは基本的なトコロを学習していきます。

Lesson29 「npmを使ってみよう!〜npmでライブラリをインストール〜」

フロントエンドのパッケージ管理ツール「npm」を使って実際に色々なライブラリをインストールしてみましょう! Mac用のパッケージ管理ソフト「Homebrew」も使っていきます!

Lesson30 「npmを使ってみよう!〜browserifyでファイル結合〜」

フロントエンドのパッケージ管理ツール「npm」を使って、実際の現場でも使われている「browserify」というライブラリをインストールしましょう! browserifyを使うと別のjsファイルを読み込んで、複数のjsファイルを一つに結合することができます!

Lesson31 「gulpを使ってみよう!〜gulpとは?〜」

フロントエンド業界で実際に使われている「タスクランナーツール」の「gulp」を使ってみましょう! gulpを使うとCSSやjs、画像ファイルの圧縮から、jsファイルなどの結合、ファイル更新を監視してブラウザをオートリロードしたりと色々なタスクを作って、手間のかかる作業を自動化することができます!

Lesson32 「gulpを使ってみよう!〜gulpの書き方〜」

gulpを使って実際に「タスク」を書いてみましょう!

Lesson33 「gulpを使ってみよう!〜画像圧縮とファイル監視〜」

専用ソフトを使わなければ出来なかった画像圧縮もこんなに簡単に出来ちゃいます! ファイルに変更があったらタスクを実行させる「ファイル監視」もやってみましょう!