Upgrade to Pro — share decks privately, control downloads, hide ads and more …

未経験者が完全独学でVue.jsのSPAを作れるようになるまで

 未経験者が完全独学でVue.jsのSPAを作れるようになるまで

未経験者が完全独学でVue.jsのSPAを作れるようになるまで

自己紹介
名前 … arapower
Twitter … @ara_shell
非ITエンジニア → IT企業(ITエンジニア2年目)
プロダクトオーナー兼フロントエンドエンジニア
一人で新規Webサービス開発中
自重トレーニング実施中

概要
ITエンジニア未経験者が独学でSPA(シングルページアプリケーション)の構築スキルを身につけた実体験
紹介する順序でSPAを構築できるようになる!
ただし、精神的な負担が非常に大きいことに注意

※時間の都合で飛ばす箇所があるかもしれません
※スライドはネットで公開予定です

伝えたい相手
未経験・独学でフロントエンドエンジニアを目指す人
未経験者にフロントエンド技術(Vue.js)を教える人

Vue.jsのスキル習得までの流れ
この流れでSPA構築スキルが身につきます!(私が証拠!)
JavaScriptの基礎を身につける
ターミナルに少しだけ慣れる
書籍でVue.jsの基本を身につける
単一ファイルコンポーネントでSPAを作る
バックエンド対応

Vue.jsのスキル習得までの流れ
この流れでSPA構築スキルが身につきます!(私が証拠!)
JavaScriptの基礎を身につける
ターミナルに少しだけ慣れる
書籍でVue.jsの基本を身につける
単一ファイルコンポーネントでSPAを作る
バックエンド対応

1. JavaScriptの基礎を身につける
Vue.jsの学習を始めるためには、JavaScriptの基礎を身に着けないといけない。
そのために最初はGAS(Google Apps Script)を始めるのがオススメ!

GASを勧める理由
ドキュメントが豊富、丁寧
目的達成にきちんと役立つ
環境構築不要

1. ドキュメントが豊富、丁寧
日本語情報が多い ← 初心者に優しい
公式リファレンスが丁寧で充実。迷わない ← 重要
公式リファレンスが英語 ← プログラミングに必要な英語に慣れるチャンス

2. 目的達成にきちんと役立つ
「学習のための学習」ではなく実用的 ← 意欲に最重要
様々な種類のプログラムを比較的簡単に組める
スプレッドシートやメールの自動処理
Webスクレイピング
Web API作成
GASのベースはJavaScript
→ GASができる ≒ JavaScriptの書き方はOK
クラウドソーシングで実力+金銭獲得

3. 環境構築不要
現在のフロントエンドは環境構築が大きなハードル
GASなら環境構築不要

Vue.jsのスキル習得までの流れ

JavaScriptの基礎を身につける
ターミナルに少しだけ慣れる
書籍でVue.jsの基本を身につける
単一ファイルコンポーネントでSPAを作る
バックエンド対応

2. ターミナルに少しだけ慣れる
プログラミング学習の壁は心理的なものがほとんど
代表的なのが「ターミナル(別名:黒い画面)が怖い」
環境構築にはターミナル操作必須
→ 逆に、ターミナルに慣れたら書籍やネットのCLIコマンドは雰囲気でわかる、調べられる

「ターミナルに慣れる方法」はお伝えできません

理由:私は趣味でシェルスクリプトを触り始めた

過去に触れてしまったもの
シェルスクリプトでCMSを作ってみる
『フルスクラッチから1日でCMSを作る シェルスクリプト高速開発手法入門』上田隆一
最近第2版が出たようです

過去に触れてしまったもの
POSIX原理主義に感化される
恐怖!シェルショッカーの POSIX原理主義シェルスクリプト

「ターミナルに慣れる方法」はお伝えできません

シェルに触れ始めた頃の感覚を忘れているため、お伝えできません。
『フルスクラッチから1日でCMSを作る〜』は実際に手を動かすタイプの書籍で初心者にもオススメです。
ただしフロントエンド学習にはオーバースペック

Vue.jsのスキル習得までの流れ

JavaScriptの基礎を身につける
ターミナルに少しだけ慣れる
書籍でVue.jsの基本を身につける
単一ファイルコンポーネントでSPAを作る
バックエンド対応

3. 書籍でVue.jsの基本を身につける
書籍『Vue.js入門 基礎から実践アプリケーション開発まで』を一通り終わらせる

Vue.jsの開発について必要な知識は網羅されている
基礎知識は体系的にまとまった書籍を利用するのが近道

覚悟すべきこと
GASが少し書ける程度のスキルではすべてを理解するのは絶対にできない難易度
Google検索で先人の知恵をかき漁って理解しようとしても苦しい、心折れるかも
全部わからなくてもいい、大体の構成がわかればSPAは作れる!
この書籍を理解するのが最大の山場

『Vue.js入門』の読み方
前半の基本知識は一度に理解できない。流し読み
後半で作成するサンプルアプリ(カンバンアプリ)の構成を理解することを重視
テストコードは雰囲気を掴む。詳細の理解は後回し
サンプルのデータをダウンロードして、完成品のsrcディレクトリ内の構成が理解できれば完了!
一通りやればVue Router、Vuexを使った単一ファイルコンポーネントのSPAが作れるはず

『Vue.js入門』の注意点
※@vue/[email protected]のバージョン差異が原因で書籍通りの手順でテストが通らない
上記の対策はAmazonレビューおよび下記Twitterスレッドが詳しい
https://twitter.com/sumihiro/status/1068177620829855744

Vue.jsのスキル習得までの流れ

JavaScriptの基礎を身につける
ターミナルに少しだけ慣れる
書籍でVue.jsの基本を身につける
単一ファイルコンポーネントでSPAを作る
バックエンド対応

4. 単一ファイルコンポーネントでSPAを作る

自分の作りたいアプリケーションを単一ファイルコンポーネントの形式で作ってみる
『Vue.js入門』のサンプルのカンバンアプリをベースに改良していく
上記サンプルアプリの構成が理解できていれば、Vuetify.jsを適用していく

Vuetify.jsとは
Vue.jsのコンポーネントライブラリ
デザインはMaterial Designがベース
Vuetify.jsのコンポーネントはMaterial Designに即した見た目、動きがあらかじめ設定されている
一からコンポーネントを作らずMaterial DesignのSPA構築に着手できる
Vue CLI 3.0でvue createの後vue add vuetifyすればVuetify.jsでHello worldができる ← 迷わない

Vuetify.jsの注意点
リファレンスを一通り読まないとどんなコンポーネントが用意されているか把握できない
リファレンスの日本語版はオプションの説明が空欄多い
リファレンスは量が多く、初心者にとって理解しにくい部分もある
特に、、の関係性やclass指定(xs12、grey--text-darken2)

Vue.jsのスキル習得までの流れ

JavaScriptの基礎を身につける
ターミナルに少しだけ慣れる
書籍でVue.jsの基本を身につける
単一ファイルコンポーネントでSPAを作る
バックエンド対応

5. バックエンド対応
フロントエンド技術の習得を最優先するなら、Firebaseにおまかせ
ここまで段階を経た人ならFirebaseはできる!
今回は省略

さいごに
独学は辛い(私は現在進行形…)
相談相手がいたら学習しやすいのは間違いない!
学習につまずいている方、Twitter(@ara_shell)で気軽に質問をどうぞ
プログラマーの仲間がほしい
新天地、探しています(お察しください)
お声がけ待ってます!!!

arapower

July 12, 2019
Tweet

Other Decks in Programming

Transcript

  1. 自己紹介 • 名前 … arapower • Twitter … @ara_shell •

    非ITエンジニア → IT企業(ITエンジニア2年目) • プロダクトオーナー兼フロントエンドエンジニア ◦ 一人で新規Webサービス開発中 • 自重トレーニング実施中
  2. 2. 目的達成にきちんと役立つ • 「学習のための学習」ではなく実用的 ← 意欲に最重要 • 様々な種類のプログラムを比較的簡単に組める ◦ スプレッドシートやメールの自動処理

    ◦ Webスクレイピング ◦ Web API作成 • GASのベースはJavaScript ◦ → GASができる ≒ JavaScriptの書き方はOK • クラウドソーシングで実力+金銭獲得
  3. Vuetify.jsとは • Vue.jsのコンポーネントライブラリ • デザインはMaterial Designがベース • Vuetify.jsのコンポーネントはMaterial Designに即した 見た目、動きがあらかじめ設定されている

    • 一からコンポーネントを作らずMaterial DesignのSPA構 築に着手できる • Vue CLI 3.0でvue createの後vue add vuetifyすれば Vuetify.jsでHello worldができる ← 迷わない