<ウェブパブリッシャーのためのJS核心理論および実戦例題の教材と完成版>
CodingWorksが心を込めて制作したJS基礎核心教材、
ウェブデザイナー、ウェブパブリッシャー、ウェブ開発者に特化した説明とスモールミッション、
そして実務に必要な現実的で楽しい実践例まで、
JavaScriptとjQueryに自信がつきます!!
特に、パブリッシャーがウェブサイト制作のために
必須となるjQueryインタラクションの実践例題を学習することができます。
'ウェブデザイナー、ウェブパブリッシャーにとって負担の大きいJS学習を理解しやすく!'
CodingWorksが心血を注いで丁寧に作り上げた、JS核心理論および実戦例題のPDF自社教材です。一般的な書籍とは異なり、JavaScriptとjQueryに苦手意識を持つWebデザイナーやパブリッシャー就職準備生のために、CodingWorksが「これだけは絶対に必要!」という内容を簡単に理解できるよう、十分な解説を盛り込みました。本教材を制作しながら 「どう説明すれば受講生の皆さんがより簡単に理解できるだろうか…」 と考え、一生懸命作り上げました。
'ステップ別の理論学習から、学んだ理論をすぐに活用できるスモールミッションまで!'
既存のJavaScriptおよびjQueryの教材は、今すぐ必要のない内容まで膨大に説明していますが、核心的な内容に対する区分や説明が不足しています。読者の立場からは、何をどのように、どこに集中して学習すべきか判断が難しいです。特に、理論に対する現実的な例題が不十分な傾向にあります。例題があったとしても、現実的な例題とは言い難いケースが多いです。しかし、コーディングワークスが制作した<ウェブパブリッシャーのためのJS核心理論および実戦例題の教材と完成版>は、実務ですぐに使える核心的な内容だけを分かりやすく整理しました。そして、新しい理論を学んだら、必ずその理論を活用する例題、すなわちスモールミッション(Small Mission)ができるように構成されています。
'これをどこに使うのかと思っていたけれど…あ〜、勉強した理論をこういう時に使うんだ!'
学習したすべての理論を活用して、実践的な例題を作成します。理論を勉強している時は「これをどこに使うんだろう?」と思うかもしれませんが、複数のスモールミッションと最後のパートの実践例題を作成しながら「あ〜、勉強した理論をこういう時に使うんだ!」と実感していただけるはずです。そうすることで、理論をよりしっかりと記憶に定着させることができます。特に現実的な実践例題を作ってみることで、JavaScriptやjQueryが開発者だけが扱う難しくて負担の大きいものではないと感じ、これからさらにJavaScriptやjQueryを楽しく勉強できるモチベーションにつながります。
'PDF教材なので、いつでもどこでも確認できて良いですし、完成版ファイルもとても役に立ちます!'
パブリッシング関連やプログラミング関連の学習のために、以前は書店で本を購入して読んでいました。私もそうでした。しかし、本というのは必要な時に見ようとすると常に手元になければなりませんが、持ち歩くのも大変ですし、家に置いたままにすることがほとんどです。そのため、いつでもどこでも気になった時にすぐに見られる電子書籍が良いのです。
余談ですが… 教材なしでパブリッシングやウェブ開発を学習する習慣は、あまり良い習慣ではありません。検索してYouTubeやブログを通じて多くの人の知識を取り入れたとしても、結局自分にとっては断片的な知識になってしまうことが多いです。一般の書籍であれ電子書籍であれ、どのような形であっても、実力向上のための参考書は必ず持っておくべきです。
教材で説明したすべてのスモールミッションと実戦例題ファイルは、HTML+CSS+JSファイルの形式でダウンロードいただけます。 そのため、教材の内容をコーディングする前に、プレビューとしてファイルを先に開いてから教材を通じて練習することができ、教材で書き漏らした部分を完成版ファイルを通じてチェックすることができます。
📖 PDF 教材内容(JavaScript、212ページ)
01. JavaScriptの基本文法
- JavaScript言語の連結
- 注釈を付ける
- データの出力
- データ型
- 四則演算子と比較演算子
02. JavaScriptの変数
- 変数宣言、割り当て、初期化、ブラウザ出力
- 変数名の命名規則
- 変数に格納するデータ型
- 変数の再宣言
- 変数を使う理由
- 変数と関数を利用してプログラムを作る(平均を求める)
- ES2015 バッククォート(`)とテンプレート文字列
03. JavaScriptの条件文 if、switch文
- 基本的な if else 条件文
- 多重if条件文
- 論理演算子
- 入れ子になったif条件文
- switch 文
- 三項演算子
- ifと'?'を使用した条件処理
04. JavaScriptの繰り返し文 - while文、do while文、for文
- 複合代入演算子
- 増減演算子
- while 反復文
- do while 反復文
- for反復文
- 二重forループ
05. JavaScriptの配列とfor in文
- 配列(Array)
- 配列とfor文
- for in 文
- break キーワード
- continue キーワード
06. JavaScriptの関数(function)
- 関数の宣言と呼び出し
- 引数とreturnキーワード
- 変数式関数宣言
- 組み込み関数
- 即時実行関数
- 関数式、アロー関数
07. JavaScriptのオブジェクトとコンストラクタ関数
- オブジェクトの種類
- オブジェクトの宣言と呼び出し
- 変数、配列、オブジェクトの概念比較
- thisキーワード
- コンストラクタ関数とプロトタイプ(Prototype)
08. JavaScript基本組み込みオブジェクト
- String 文字列
- Number 数字 & Math 数学
- Array 配列のプロパティとメソッド
- Date 日付
- DateオブジェクトのGetterとSetterメソッド
09. BOM(Browser Object Model) : ブラウザオブジェクト
- BOM(Browser Object Model)
- windowオブジェクトの属性とメソッド
10. DOM(Document Object Model) : 文書オブジェクト
- DOM文書オブジェクトとは?
- DOM文書オブジェクトを取得するメソッド
- DOM文書オブジェクト準備構文メソッド(onload)
- 文書オブジェクトの属性とメソッド
- イベントオブジェクトのプロパティとメソッド
- マウス & キーボードイベントオブジェクトの属性とメソッド
11. HTML DOM Node
- HTML DOM Node とは?
- HTML DOM Node 間の探索
12. JavaScript - 文書オブジェクトの属性
- ドキュメントオブジェクト - フォーム(Form)
- 文書オブジェクト - クラス属性
- 文書オブジェクト - 領域属性
- 文書オブジェクト - dataset 属性
13. JavaScript実践例
- マウスクリックでスムーズにスクロール移動させる
- デジタル時計作り(方法 1)
- デジタル時計作り(方法 2)
- モーダル(Modal)を表示する(1)
- モーダル(Modal)を表示する(2)
- ストップウォッチ(StopWatch)作り(分:秒:ミリ秒)
- ストップウォッチ(StopWatch)作り(時:分:秒)
- じゃんけん(Rock Paper Scissors)ゲーム作り
- Gridを用いた計算機作成(インラインJavaScript方式)
- 電卓作り with Grid(関数引数呼び出し方式)
📖 PDF 教材の内容(jQuery、112ページ)
01. jQueryの連結および基本文法
- ジェイクエリの連結 - ダウンロード後のリンク方式
- ジェイクエリ(jQuery)連結 - CDNリンク方式
- ジェイクエリの基本文法 - スクリプトの記述場所/コメント
02. jQuery必須メソッド Part1
- CSSスタイル変更メソッド
- 要素探しのメソッド
- マウスイベント関数(function)の作成 & ジェイクエリ変数(variables)
- クラス追加・削除メソッド
- エフェクトメソッド
- テキスト関連メソッド
- 属性関連メソッド
- 動的にhtml要素を挿入/削除
- width, height 関連メソッド
- 位置関連メソッド
- 要素のスクロール位置メソッド
- コピーおよびラップ関連のメソッド
- イベントの種類(マウスイベント、キーボードイベント、フォーム関連イベント)
03. jQuery必須メソッド Part2
- アニメーション効果 animate()
- 個別文書をページの好きな場所に読み込む load() メソッド
04. jQuery実戦例
- 3つのタイプのイメージスライダー作り、ジェイクエリーのタブメニューコンテンツ
- ジェイクエリー アコーディオン コンテンツ
- フッターファミリーサイト カスタムセレクト(select)ボックス
- input colorを使用して背景色を変える
- マウスを下げるとCSSが変化し、スムーズにトップへ戻る
- スムーズにスクロールしながら各セクションへ移動する
- フォントサイズ増減バーを作る
- フォントサイズ増加・減少ボタンを作る
- ライトモード & ダークモードを切り替える
- ファイルアップロードフォーム作り
- プロフィール写真アップロードフォーム作り
- チェックボックスにチェックを入れると非表示の入力フィールドを表示させる
- 「もっと見る」ボタンを押すと隠された内容をロード(load)する
- サムネイル画像をクリックすると大きな画像が表示されるフォトギャラリー
- パスワード入力値の表示・非表示切り替え with フォントアイコン
- テキスト入力ボックス(textarea)の文字数チェックをする
- マウスポインターに追従する虫眼鏡機能を作る
- マウススクロールに伴うパララックス効果(Parallax Effect)
- モバイル下端のアイコンタブバーナビゲーション作り
- ToDoリスト(To Do List)作り
- スライダー(前後ボタン、Autoplay制御ボタン)
- スライダー(自動Autoplay、マウスオーバーで停止、外れると再開)
- フォーム入力フィールドをクリックするとテキストが上がるアニメーション
- 画像ホバーエフェクトをjQueryのanimateで作る
- サイドバーナビゲーションで隠されたコンテンツを開く
- フォトギャラリーライトボックス(Lightbox)作り
- レスポンシブ・アニメーションモーダルの表示
- Front Back トランジション画面遷移
05. jQueryプラグインの使い方
- ジェイクエリスライダープラグイン Slick Slider の使い方
- jQueryタイピングプラグインTyped.jsの使い方
- ジェイクエリ ライトボックス プラグイン featherlight.js の使い方
- ジェイクエリ カウントダウンタイマー プラグイン The Final Countdown
※ 該当のjQuery教材ではAjaxの使用方法は扱っておりません。
🚩 PDF 教材プレビュー スクリーンショット(JavaScript)
🚩 PDF教材プレビュー スクリーンショット(jQuery)
⚡ JavaScript(ジャバスクリプト)実戦例完成版プレビュー

▲ スライダー(前後ボタン、Autoplay制御ボタン)

▲ スライダー(自動Autoplay、マウスオーバーで停止、外れると再開)

▲ マウスクリックでスムーズにスクロール移動させる方法(JavaScript方式)

▲ [分秒ミリ秒] ストップウォッチ(Stop Watch)作り

▲ じゃんけん(Rock Paper Scissors)ゲーム作り

▲ 計算機作り with Grid

▲ マウスイベントで背景色を変更する

▲ モーダル(Modal)を表示する(方法 2)
⚡ jQuery(ジェイクエリ)実戦例 完成版 プレビュー

▲ マウスクリックでスムーズにスクロール移動させる方法(jQuery方式)

▲ やることリスト(To Do List)作成

▲ モバイル下端のアイコンタブバーナビゲーション作成(Tab Bar navigation)

▲ マウスポインターに追従する虫眼鏡機能の作成

▲ ライトモード&ダークモードの切り替え

▲ フォントサイズの拡大・縮小バーを作る

▲ テキスト入力ボックス(textarea)の文字数をチェックする

▲ パスワード入力値の表示・非表示切り替え with フォントアイコン

▲ プロフィール写真アップロードフォームの作成

▲ フォーム入力フィールドをクリックするとテキストが上がるアニメーション

▲ フォトギャラリー ライトボックス(Lightbox)の作り方

▲ 画像ホバーエフェクトをjQuery animateで作る

▲ サイドバーナビゲーションで隠れたコンテンツを開く

▲ Front Back トランジション画面切り替え

▲ jQueryスライダープラグインSlick Sliderの使い方

▲ jQueryタイピングプラグイン Typed.js の使い方

▲ jQueryプラグイン Featherlight の使い方

▲ jQueryカウントダウンタイマー・プラグイン The Final Countdown の使い方
🌈 JavaScript & jQuery 完成版ファイルのプレビュー
受講前のご注意事項 📢
この教材は、ウェブパブリッシャーとしての就職を準備している方、またはウェブパブリッシャーとして現職で働いている方のための教材です。 フロントエンド開発者やバックエンド開発者が求めるレベルの深さを持った講義ではありません。 だからといって、JavaScriptおよびjQueryの核心的な理論内容をおろそかに扱っているわけではありません。全般にわたって必ず必要な内容を扱っています。フロントエンド開発者やバックエンド開発者が求めるJS講義レベルの深さは、市販の中上級JavaScript教材が適しています。
🟢 本講義を受講される前に、以下のCodingWorksブログの記事を一度ご覧いただくことをお勧めします。
ウェブデザイナーとウェブパブリッシャーがJavaScriptよりもjQueryを使いこなすべき理由 : https://www.inflearn.com/blogs/3527
前提知識および注意事項
- パブリッシングがメインではないJS学習教材なので、HTML+CSSの基礎能力程度があれば大丈夫です。
講師紹介 ✒️
現) 国費パブリッシング&フロントエンド講師
現) フリーランス フロントエンドパブリッシャー
現) HTML+CSS+JQUERY パブリッシングYouTubeチャンネル「コーディングワークス」運営
グリーンコンピュータアカデミー ウェブパブリッシング講師
ザ・ジョウンコンピュータアカデミー ウェブパブリッシング講師
イゼンコンピュータアカデミー ウェブパブリッシング講師
フロントエンドパブリッシャー、フロントエンドパブリッシング専門講師
UI/UXウェブデザインポートフォリオ講義
ウェブデザイン技能士実技資格クラス講義
イージーアンドエデュ フロントエンドUI/UXデザインおよびパブリッシング
🌏コーディングワークス インフラン講義一覧 - https://www.inflearn.com/users/@codingworks
🌏インフラン コーディングワークス 講義学習順序(学習ロードマップ) - https://www.inflearn.com/blogs/2351
🌏コーディングワークス インフラン パブリッシングブログ - https://www.inflearn.com/users/@codingworks/blogs
🌏コーディングワークス パブリッシング YouTube チャンネル - https://www.youtube.com/codingworks