無料で作れる!Vueでアプリを作るための参考ページ9選

本や教材を買ってもいいのですが、

https://takasaki.work/wp-content/uploads/2019/09/syoboiblog_icon.png
緑ズキン

手っ取り早く&&色々な種類&&実践的&&小規模なアプリとかコンポーネントを作りたい!

という方向けに雑多なWebページをまとめました。ガンガンコード書いてVueの勉強していきましょう\(^o^)/

一応、難易度順にソートしてお送りします。

記事執筆時点の僕は、以前書いた記事

Vue.js超入門〜基本文法と具体的使い方など〜

レベルで、基本文法を知っている程度にしかVue分かっていません。

1、Vueでハンバーガーメニューの実装

Vue.jsはjQueryの代わりになり得るのか!?実用的なあれを実装をしてみる。

上のページにて作れるものが下のPenのもの。

少し僕が遊んだり書きやすいように書いたりで参考ページのコードと違う点などありますが。そもそもBabel分からない……。

デモ

See the Pen hamburger-vue.js by Takasaki (@tkskds) on CodePen.

使用する技術

  • 真偽値切り替え
  • 動的クラス付与

難易度★☆☆

2、Vueでスライドの実装

Vue.jsで画像が横からスライドで切り替わるサンプル

デモ

See the Pen slide-vue by Takasaki (@tkskds) on CodePen.

使用する技術

  • トランジション

難易度★☆☆

3、Vueでモーダルウィンドウ作成

vue.jsだけで、モーダルのオーバレイ機能を作成する

デモ

See the Pen modalWindow-vue by Takasaki (@tkskds) on CodePen.

使用する技術

  • 動的クラス付与
  • メソッド

難易度★☆☆

4、Vueでフォームの入力文字数をリアルタイム反映

Vue.jsで簡単に文字数カウンターを実装する

デモ

See the Pen form-vue by Takasaki (@tkskds) on CodePen.

使用する技術

  • v-model

難易度★☆☆

5、Vueで切り替えできるタブの作成

デモ

See the Pen Tabs-vue by Takasaki (@tkskds) on CodePen.

使用する技術

  • メソッド

難易度★☆☆

6、Vueで画像ジェネレーターを作る

html2canvasとVue.jsでつくるコラ画像ジェネレータ

デモ

See the Pen imageGenerater-vue by Takasaki (@tkskds) on CodePen.

html2canvasというライブラリで画面をスクショして画像に変換するという仕組みです。『オリジン(ドメイン)が違う画像は保存(描写?)できない』というcanvasの制約のせいで上手くジェネレートできないのですが、同一ドメインに画像をアップロード(今回で言えばcodepen)できれば問題なく動作します。

使われている技術

  • 動的処理

難易度★☆☆

7、Vueでタスク管理アプリを作る

Vue.js でかんばんライクなタスク管理アプリを作ってみました。

デモ

See the Pen taskManager-vue by Takasaki (@tkskds) on CodePen.

使用する技術

  • コンポーネント
  • メソッド
  • トランジション
  • 算出プロパティ

難易度★★☆

8、VueとRailsで作るTodoApp

Vue.jsとRailsでTODOアプリのチュートリアルみたいなものを作ってみた

デモ

materializeが気持ち良すぎる。使おう使おうと思っていたもののなかなか使う機会がなかったので良い機会にもなりました。

バックエンドがRailsでフロントがVue。

使用する技術

  • ライフサイクルダイアグラム

難易度★★★

9、VueとRailsで作るモダンなWebApp

Ruby on Rails, Vue.js で始めるモダン WEB アプリケーション入門

デモ

従業員管理用CMS的な?

自分でも何を作ったかあまりよく分かっていない謎の状況。さらに悪いことに打っているコードが何を意味するか分からないこともしばしばだったので、調べつつ。

使用する技術

  • json
  • API
  • Rails

難易度★★★

がっつり学びたい人向け

techpit

大好きなtechpitさんにも以下の講座がありました。

https://takasaki.work/wp-content/uploads/2019/09/syoboiblog_icon.png
緑ズキン

techpitさんはテキストベースで学べます。個人的には動画ベースよりテキストベースの方がやりやすい。

Vue.js & FirebaseでTwitterライクなSNSアプリを作ってみよう!

Udemy

https://takasaki.work/wp-content/uploads/2019/09/syoboiblog_icon.png
緑ズキン

動画ベースの方が取り組みやすい人はこちらがオススメ

僕がやったのは下画像の赤枠で囲われた3つのコースです。

Vue.js + Firebaseで作るシングルページアプリケーション
Vue JS 2 入門 完全パック – もう他の教材は買わなくてOK! (Vue Router, Vuex含む)
Vue JS入門決定版!jQueryを使わないWeb開発 – 導入からアプリケーション開発まで体系的に動画で学ぶ
https://takasaki.work/wp-content/uploads/2019/09/syoboiblog_icon.png
緑ズキン

作りながら学ぶのが好きなので、FirebaseとVueでSPA作れる教材が個人的に一番楽しかったです

ドットインストール

Vue.js入門

https://takasaki.work/wp-content/uploads/2019/09/syoboiblog_icon.png
緑ズキン

安定すぎる。前に数ヶ月分まとめてプレミアムプラン入った余りの期間がまだあったからできた

コメントを残す

メールアドレスが公開されることはありません。