WordPressテーマ『十二単』リリース 🎉

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

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

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

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

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

もくじ

ハンバーガーメニューの実装

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

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

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

🎮 デモ

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

🚚 使用する技術

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

スライドの実装

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

🎮 デモ

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

🚚 使用する技術

  • トランジション

モーダルウィンドウ作成

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

🎮 デモ

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

🚚 使用する技術

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

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

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

🎮 デモ

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

🚚 使用する技術

  • v-model

切り替え可能なタブの作成

🎮 デモ

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

🚚 使用する技術

  • メソッド

画像ジェネレーターを作る

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

🎮 デモ

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

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

🚚 使用する技術

  • 動的処理

タスク管理アプリを作る

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

🎮 デモ

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

🚚 使用する技術

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

VueとRailsで作るTodoApp

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

🎮 デモ

VueとRailsで作るTodoApp

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

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

🚚 使用する技術

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

VueとRailsで作るモダンなWebApp

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

🎮 デモ

VueとRailsで作るモダンなWebApp

従業員管理用CMS的な?

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

🚚 使用する技術

  • json
  • API
  • Rails

がっつり学びたい人向け

techpit

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

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

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

ちなみに上のコースはやっていないのですがこちらのコースはやりました。Railsの知識は前提条件なのでRailsを学んでいる方にはお勧めです。

【Rails / Vue.js】Snippet アプリを作ってみよう

Udemy

動画ベースの方が取り組みやすい人はUdemyがオススメです。僕がやったのは下画像の赤枠で囲われた3つのコース。

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

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

ドットインストール

Vue.js入門

安定すぎるドットインストール。

前に数ヶ月分まとめてプレミアムプラン入った余りの期間がまだあったからできました。基礎を学びたいという方はぜひぜひー。

CTAエリアイメージ

WordPressテーマ『十二単』

無料のWordPressテーマです。絶賛開発中。
詳しくみる

✒️ Writer ✒️

たかさき

しがないたかさきです。HTML/CSS/JS/PHP/Ruby/SQLちょっと書けます、Photoshopちょっと使えます。Vue勉強中、埼玉とか都内の勉強会良いのあれば教えてください〜。メディア売買経験あります、ミドルレベルでの検索結果1位何回か取ったことあります。詳しくはこちら

Follow Me:)

COMMENT

コメントする

入力エリアすべてが必須項目です。メールアドレスが公開されることはありません。


内容をご確認の上、送信してください。