初心者でも安心『フロントエンドウェブ開発をBootstrap Vueでスタート!!』時間がない人×要点のみ学習したい人

エンジニア歴18年目の講師がシンプルにわかりやすさを追求した講座。時間がない人向け。最初の一歩踏み出す!要点のみに絞ったカリキュラム!詰め込みすぎず、Webの基礎からトレンドまでを一気に学習しよう

3.80 (5 reviews)
Udemy
platform
日本語
language
Web Development
category
instructor
74
students
11 hours
content
Sep 2021
last update
$19.99
regular price

What you will learn

フロントエンドエンジニア開発に必要な基礎として必要なレイアウトと入出力を学ぶことができます。

スマホとパソコンの両方に対応したWebサイトを作成できるようになります。

Vuejsの概念、環境構築手順、コーディング方法、モジュール追加方法を学び実践します。

Bootstrap Vueがどういうものか理解でき、標準搭載されているコンポーネントによる実装方法を学び実践します。

VisualStadioCodeの使い方を理解します。

プログラマーが当たり前に行うエディタ操作をレクチャーの中で説明します。

Description

■■本コースの狙い■■


「Webシステム開発に必要な知識ってなんだろう・・?」

「どうやって勉強したらいいの・・?」

「とにかく学習する時間が取れない。。」


これからフロントエンドを学んでみたいという方、こんな不安はありませんか?


  • エンジニアに転職したいけど時間が取れない。

  • 将来の夢はエンジニア!でも今学校の勉強もしなきゃ・・・。

  • 新入社員でフロントエンジニアになることが決まってるけど、不安。。


当然以下のような不安がある方もいると思います。

  • 必要な知識を身に着けたいけど何から学べば効率的なのか

  • どの程度の理解があれば、開発者としての一歩を踏み出せるのか

  • プログラミングは常に勉強だ!という理想だけでは先が見えず不安。

  • コースを受講した後、使える知識が増えたことを実感したい。


本コースでは、時間が無い方にいかにコスパよく学習できるかを考えたカリキュラムになっています。

全てを詰め込む学習は疲れちゃう方にお勧めです。フロントエンドエンジニアになったときにどういうプログラミング知識が必要か

当たり前のようで解決しないことが多いこの問題・不安を解決する事を常に意識して解説を行います。フロントエンド開発の学習を通じてフロントエンド開発がどういうものかを理解していただきます。


コンセプトは『詰め込みすぎず、Webの基礎からトレンドまでを一気に学習しよう』です。プログラミング未経験の新入社員がまずWeb系の開発を行うためには何を学習すると良いのかを考え、やってみる事の楽しさを実感できるように思った通りに実装できることを中心としたカリキュラムにしています。


一番重要な事はまず第一歩を踏み出せたという実感であり、自分でそれなりに物を作る事が出来るスキルが身につくことだと思っています。1日でも早く、先輩技術者と技術的な話が通用するようになることが重要であると考えます。


学習の中では、フロントエンドフレームワーク「Bootstrap Vue」についてスポットをあて「学ぶ」「試す」「理解する」ことで未来を切り開く手助けを行います


Bootstrap Vueは初学者向けで、今まさに世の中が求めているスマホ対応を簡単に実装するにはうってつけのフレームワークだと思っています。全てを全力で学ぶのではなく効率的に最低限の学びにポイントを絞り、受講生が本当に必要なものが何かを理解しながら自ら学べるような構成としています。



■■Bootstrap Vueって勉強して役にたつの?■■


Vue.jsはご存じでしょうか?Vue.jsとはJavaScriptフレームワークのことです。初心者向けでありながら、コアな使い方もできフロントエンドエンジニアでも人気で愛用されるフレームワークです。他にも人気のフレームワークがありますが、まだまだ根強い人気があります。そんなVue.jsですが、Vue.jsだけではスマホ対応はできません。BootstrapなどのCSSフレームワークというものでスマホデザインを実現することになります。

近年、お金をかけずにいかにデザイン重視したものを作ることが出来るのかがテーマになり、コスパ重視になってきています。そのため、BootstrapVueのようにデザインと内部処理をコスパよく実現できるフレームワークは非常に役にたちます。

そしてなにより、この講座では、Web系の基礎になる部分ですので役に立たなかったといことは間違いなくありません。


■■本コースのゴール■■


この3つができるようになります。

  • スマホ対応したレイアウトになるようコーディングできる

  • バックエンド通信を意識したフロントエンド側のデータ操作ができる

  • 必要なパッケージを自ら選定しインストールできる


「ようやく学習の先が見えてきた!?」

「ここから先は独学で勉強できるかも!?」

「Bootstrap Vueでもっともっと出来る事に挑戦したいっ!」

「もしかして自分のホームページを自分で作れるんじゃないか・・?」


と思ってもらえるコースを目指して渾身の内容にしました!


■■自己紹介■■


システムエンジニア歴18年になります。18年間Web系システムの設計から製造、保守まで幅広いフェーズを担当してまいりました。現場では、案件プロジェクトを進めながら人材育成も同時に行うといった事が求められますが、これではなかなか知識を深めることはできないと思っています。自ら勉強して、うまく自分の力に出来る人もいますが、出来ない人は何をしたらいいのかわからず途方に暮れるなんてことも多々あります。理解が深まらず退職を選択するなんてことも見てきました。

しっかり基礎から学ぶことができれば、もう少し違った形になったかもしれません。

18年の経験を活かし他のエンジニアの手助けをしたい。新しいエンジニアの育成に携わりたいと思っています。


18年の経験を踏まえ、最低限必要な事はしっかり押さえ、最短でゴールへ導くようにコースを考えました!実務ではあまり使わないことをそぎ落としたカリキュラム。自分の力でやり遂げたと実感できることをお約束いたします。


■■本コースの受講にあたり■■


こんな不安があるかもしれません。でも大丈夫!丁寧に解説いたします。


  • HTMLとかJavaScriptってちょっとだけ見た事あるだけでよくわかってないけど大丈夫?

  • Bootstrap Vueって聞いたこともないけど大丈夫?


自分の力で学ぶ手助けを行います。やる気があれば十分!学習した先にはフロントエンドエンジニアの夢を掴んだ自分が待っています!一緒に頑張りましょう!


では、コースでお会いできることを楽しみにしています。

Content

はじめに

講座の狙い
学びと受講要件
教え方

フロントエンドとは

フロントエンドとバックエンド
フロントエンド言語の歴史①
フロントエンド言語の歴史②

HTML言語の理解/HTML構造タグ

HTML構造タグ
タグの紹介と説明
学習のポイント

HTML言語の理解/HTMLレイアウトタグ

セクションの説明とHTML自学方法
レイアウトタグの説明
学習のポイント
レイアウトタグ演習1
レイアウトタグ演習1(解説)
レイアウトタグ演習2
レイアウトタグ演習2(解説)
レイアウトタグ演習3
レイアウトタグ演習3(解説)
レイアウトタグ演習4
レイアウトタグ演習4(解説)
レイアウトタグ演習5
レイアウトタグ演習5(解説)
レイアウトタグ演習6
レイアウトタグ演習6(解説)

HTML言語の理解/HTMLフォームタグ

セクションの説明
よく使う属性
1行テキスト
パスワード
ラジオボタン
チェックボックス
プルダウン
テキストエリア
ボタン
セクションのまとめ
フォームタグ演習について
フォームタグ演習1
フォームタグ演習1(解説)
フォームタグ演習2
フォームタグ演習2(解説)
フォームタグ演習3
フォームタグ演習3(解説)
HTML言語を終えて~お疲れ様でした~

CSS言語の理解/装飾プロパティ

セクションの説明
今回学習するページの説明
カラーコード
color
background
font-size
font-weight
tableを装飾する

CSS言語の理解/スペースプロパティ

セクションの説明
今回学習するページの説明
開発者ツールにの起動方法や使い方
開発者ツールによるスペースの確認
開発者ツールによるスペース状態の見方
margin、padding解説

CSS言語の理解/styleタグによる集約

セクションの説明
タグ指定
複数プロパティ
クラス定義
複数クラス

CSS言語の理解/グラデーションとセレクタ

セクションの説明
今回学習するページの説明
複雑なデザインを実装するコツ
グラデーション
セレクタ
セクションまとめとCSS定義の調べ方

JavaScriptの理解/関数と変数

セクションの説明
変数
関数
開発者ツールにの使い方(JavaScript編)
イベントと関数
変数代入
引数
数値計算と文字列連結
セクションまとめ

JavaScriptの理解/Object

セクションの説明
要素の読み込み
要素の更新
要素の削除
要素の入れ替え

JavaScriptの理解/Array

セクションの説明
要素の読み込み
要素の更新
要素の削除
要素の入れ替え

JavaScriptの理解/ArrayとObjectの併用

セクションの説明
各レクチャーの共通部分の説明
要素の読み込み
要素の更新
要素の削除
要素の入れ替え
セクションまとめ

JavaScriptの理解/イベント

セクションの説明
ロードイベント
マウスイベント
style書き換え①
style書き換え②
フォーカス
HTML書き換え
クラス書き換え
セクションまとめ

JavaScriptの理解/値の取得

セクションの説明
1行テキスト
ラジオボタン
チェックボックス
プルダウン
セクションまとめ

JavaScriptの理解/値の設定

セクションの説明
1行テキスト
パスワード
ラジオボタン
チェックボックス
プルダウン

開発環境の構築/環境の理解

セクションの説明
インストールするもの

開発環境の構築/インストール★実技

コーディング環境
セクションの説明
インストールの流れ
node.js(NPM)のインストール
実行ポリシーの変更
VisualStudioCodeのインストール
拡張機能のインストール
VueCLIのインストール

★必ずみてください★

これからの学習について!

BootstrapVue入門/特徴

実装面での特徴
フレームワークの特徴

BootstrapVue入門/Bootstrapの理解

セクションの説明
レスポンシブ
グリッドシステム
クラスの紹介①色など
クラスの紹介②スペース
クラスの紹介③設定例
クラスの紹介④その他
Bootstrapクラスのまとめと考え方

BootstrapVue入門/Vue.jsの理解

セクションの説明
初期フォルダ構成
コーディングの進め方
Vue.jsの書き方
Sciprtタグ/概要
Scriptタグ/export宣言
Styleタグ
Templateタグ/展開・イベント
Templateタグ/ディレクティブ
Vueライブラリ
VueRouterによる画面遷移
VueAxiosによるデータ通信

BootstrapVueプロジェクト作成

セクションの説明とプロジェクト作成の流れ
プロジェクト作成実施
BootstrapVueの組み込み

Bootstrap Vue/Vue.jsの実践

セクションの説明
まずはやってみよう
データバインディング
イベントと変数書き換え
mountedを使ってみる
objectクラスを使ってみる
ArrayとObjectクラスを使ってみる
v-ifディレクティブを使ってみる
v-hmlディレクティブを使ってみる

Bootstrap Vue/コンポーネントの利用★実技

セクションの説明
コンポーネントについて
1行テキスト
入力規則
テキストエリア
プルダウン
ラジオボタン
チェックボックス
スライドショー(b-carousel)
埋め込み動画(b-embed)
カード(b-card)
モーダルウィンドウ※折り返し設定も
グリッドシステム(b-container,b-col,b-row)
ラベル
VueRouterによる画面遷移(実践)

Bootstrap Vue/演習★実技

セクションの説明
演習1:ログインページの作成
演習1:ログインページの作成(解説)
演習2:商品リストページの作成
演習2:商品リストページの作成(解説)
演習3:商品詳細ページの作成
演習3:商品詳細ページの作成(解説)

Bootstrap Vue/拡張とネットへの公開

セクションの説明
おすすめモジュール
モジュールの探し方
ネットへの公開(バックエンド無しのみ)

最後に

今後の発展
ボーナスレクチャー

Screenshots

初心者でも安心『フロントエンドウェブ開発をBootstrap Vueでスタート!!』時間がない人×要点のみ学習したい人 - Screenshot_01初心者でも安心『フロントエンドウェブ開発をBootstrap Vueでスタート!!』時間がない人×要点のみ学習したい人 - Screenshot_02初心者でも安心『フロントエンドウェブ開発をBootstrap Vueでスタート!!』時間がない人×要点のみ学習したい人 - Screenshot_03初心者でも安心『フロントエンドウェブ開発をBootstrap Vueでスタート!!』時間がない人×要点のみ学習したい人 - Screenshot_04

Charts

Price

初心者でも安心『フロントエンドウェブ開発をBootstrap Vueでスタート!!』時間がない人×要点のみ学習したい人 - Price chart

Rating

初心者でも安心『フロントエンドウェブ開発をBootstrap Vueでスタート!!』時間がない人×要点のみ学習したい人 - Ratings chart

Enrollment distribution

初心者でも安心『フロントエンドウェブ開発をBootstrap Vueでスタート!!』時間がない人×要点のみ学習したい人 - Distribution chart
4181206
udemy ID
7/13/2021
course created date
9/29/2021
course indexed date
Bot
course submited by