はじめに 対象者 JavaScript / Vue.js / PHP / Laravel の入門レベルの方、入門書を読んだあとに「何か作ってみたい」という方が、それぞれの知識を組み合わせて本格的なアプリケーションを開発できるようになることを目指しています。 上記のいずれかの知識がまったくない状態だとこのチュートリアルの内容は少し難しいかもしれません。チャレンジするのもいいですが、参考文献に挙げた市販の入門書か、関連記事のチュートリアルを先に読んでおくと理解しやすいと思います。 学べること Vue.js と Laravel を組み合わせて SPA を構築する方法 SPA におけるクッキー認証と CSRF 対策 Vue Router を使用した画面遷移 Vuex を使用した状態管理 Vue でのタブやローディング UI の表現 SPA におけるエラー処理 扱わないこと デザインと CSS コー
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 2019.09.12 追記 後日談を書きました(外部ブログ) 結局、ど初心者が1日でVue.jsを学ぶとどこまで理解できるの？ – 過去企画を振り返ります Vue.js 1 Day BootCamp! みなさま、こんにちは！どんぶらっこ(@don-bu-rakko)です。 今私が通っているプログラミングスクールでは周囲がVue.jsをどんどん学び始めています。その結果、仲間の話している内容がわからなくなって辛い毎日を過ごしているわけです。 こんな状態はいかん！ ということで、私もVue.jsを本腰入れて学習することを決意しました。 しか
概要 Vue.jsを初めて触る人に向けたサンプルと解説です。 React.jsと比較する形で書いています。 Vue.jsとは 原作者であるEvan You氏が中心となって開発中の、Javascriptフレームワークです。 日本語の公式サイトがあるため、初心者にもかなり分かりやすいです。 Vue.js 環境構築 vue-cliというコマンドラインツールが主流です。 Vue CLI 単一ファイルコンポーネント VueはReactと同じく、パーツ単位でHTMLをまとめるコンポーネント指向ですが、.vue拡張子の単一ファイルコンポーネントによって、その「パーツを構成するために必要な HTML・CSS・JSをひとまとめに」して独立した1つのファイルで扱うことができます。 それぞれ<template>、<script>、<style>が担当します。 <template> <div class="say
The Progressive JavaScript Framework Web ユーザーインターフェース構築のための、親しみやすく、パフォーマンスと汎用性の高いフレームワーク。 Vue を使う理由 はじめる インストール Vue 2 のセキュリティー・アップデート Special Sponsor slot is now vacant - Inquire now 親しみやすい 直感的な API とワールドクラスのドキュメントを使用して、標準的な HTML、CSS、JavaScript をもとに構築します。
Vue.js、Nuxt JSを学習するときにやったこと以前「WebデザイナーのためのVue.js事始め」という記事でVue.jsについて触れたのですが、それから今まで、どんな手順で勉強してきたのかを紹介してみます。途中ReactやGatsbyを取り入れたりもしていたのですが、結局 .vueファイルでの単一ファイルコンポーネントが楽だなーと思い、今はVue.jsに全振り中です。これから勉強してみたい方の参考になれば幸いです。 Web デザイナーのための Vue.js 事始め 1. Vue.js 公式 Web サイトを確認まずはVue.js の公式 Web サイトを確認。日本語にも対応しています。ここで基本的な使い方、文法、何ができるのかなどをざっくり学習しました。 サンプルコードがある箇所は実際にCodePenを使ってコードを記述し、動作確認します。公式は今後何度も繰り返しチェックすることに
TIGの伊藤真彦です。 ここ最近はVue.jsでのフロントエンド開発を行っています。 ほぼ何もない状態からのスタート段階から始めたのですが、その際調査したことが学びになったので共有します。 ※この記事は 2020/10/13 に執筆されました。調査日は2020/08/17～2020/09/01 のため、バージョンなど当時と状況が異なるものがあります。この1ヶ月の間でも、alphaからbetaに変わったり、betaが取れたりと進化が速いです。 公式ライブラリのステータスはこちらもご参考ください。 https://v3.vuejs.org/guide/migration/introduction.html#supporting-libraries 前提として押さえておきたい2点のポイント環境構築はVue CLIフューチャーでは仕事ですぐに使えるTypeScriptと題しまして、TypeScri
スマートキャンプの20卒エンジニアの高砂です！ 新卒入社後、スマートキャンプでは2週間の全体研修と1ヶ月のエンジニア研修に参加しました。 本記事では、後者のエンジニア研修について紹介させて頂きます！ 研修目的 「一定以上のレベルで実務に貢献できる技術力」を身につけること OJTではない分、目指すレベルは高く 研修内容 1ヶ月でAsanaを再現 実際の開発結果 研修による成長 Vue.jsでの開発に自信が持てるように 質問・相談の質が向上 研修を踏まえて今後どうするか 習得した技術を中心に事業へ貢献 質問・相談はより具体的に その機能の将来を考えて設計・開発 最後に 宣伝 研修目的 「一定以上のレベルで実務に貢献できる技術力」を身につけること ベンチャーでは「OJTで学んでいく」というのも一般的です。 しかし私の場合は先輩社員と相談した結果、研修中はメンタリングをして貰いながら実務とは直結し
こんにちは。DA事業本部の春田です。 普段の業務では全く扱わないフロントエンドの世界に飛び込んでみたいと思います。最近3系が登場しましたがまだ情報が少ないので、2系のチュートリアルを進めていきます。サンドウィッチマンでいう「ちょっと何言ってるかわからない」ポイントは、その都度調べていきます。英語版の公式ドキュメントがベースです。 今回は、一番最初のInstallationです。 はじめに 互換性の注意 最初のセクションは「互換性の注意」についてです。ECMAScript 5とun-shimmableが、早速「ちょっと何言ってるかわからない」ポイントだったので調べてみました。 Vue.js uses ECMAScript 5 features that are un-shimmable in IE8 ECMAScript5は2009年にリリースされたJavaScriptの標準仕様のことで、プ
Vue.jsを使用して、Webページやスマホアプリでよく使用されるフォームを簡単に実装できるVue Formulateを紹介します。 サインアップ、ログイン、メールアドレス、ファイルのアップロード、アンケートなど、さまざまなフォームをサポートしており、バリデーション機能も備えています。 Vue Formulate Vue Formulate -GitHub Vue Formulateの特徴 Vue Formulateのデモ Vue Formulateの使い方 Vue Formulateの特徴 Vue Formulateは、Vue.jsを使用してフォームを構築する最も簡単な方法です。主な機能は、フォームとフィールドの検証、ファイルのアップロード、フォームの生成、ラベルをサポートする単一要素の入力、ヘルプテキスト、エラーメッセージ、プレースホルダーなど、さまざまなプロジェクトで使用するための包
Vue.jsを100時間ほど勉強して分かったことを整理します。 勉強時間の内訳は、 Udemyの Vue JS 2 - The Complete Guide (incl. Vue Router & Vuex) をだいたい全て完了（85時間） 実際に自分でコードを書いてみた（15時間） です。 学習開始時のレベルは、JavaScript・jQueryはそれなりに扱うことができ、過去に少しだけReactを勉強したことがある感じでした（専門は Ruby on Rails）。 Vue.js 自体の構文 まず、Vue.js 自体の基本的な構文を整理します。 Vue インスタンス Vue インスタンスの書き方は次のような感じです。 new Vue({ el: "#app", data: { name: "Kei", age: "30", counter: 0 }, methods: { increas
スマートキャンプでBiscuetのエンジニアをしている中川です。 本記事はスマートキャンプ Advent Calendar 2019 - Qiitaの19日目の記事です。 現在弊社のプロダクトであるBOXILとBiscuetは、そのどちらの開発チームもVue.jsを使用して開発しています。 Vue.jsの学習コストの低さやコンポーネント指向は少人数のチームでユーザーに素早く価値を届けていきたい弊社の開発においても重宝しています。 さてそんなVue.jsですが、2020年のQ1にバージョン3.0が正式リリースされることが予告されており、正式リリースに先駆けて目玉機能のひとつであるComposition APIが公開されました。 Composition API RFC | Vue Composition API ドキュメントやAPIリファレンスのみならず、バージョン2系でプラグインとして利用で
この記事はBASE Advent Calendar 2019の15日目の記事です。 こんにちは。フロントエンドグループの加藤です。 私達は、「Payment to the People,Power to the People.」というミッションを掲げ、日々サービスづくりを頑張っています。 Peopleとは誰か このミッションにある、Peopleとは誰のことを指すのでしょうか？ 自分の周りの環境を想像しても、実に多様な人がいることがわかります。 また、日々ショップオーナーさんや購入者さんからいただく様々なお問い合わせの内容を見ていると、ほんとに様々な背景を持った方々に使っていただいているんだなと思います。 Webフロントエンド開発者としては、自分の力で出来ることがあれば、出来る限り多様な使われ方に対応できるプロダクトにしていきたいという思いがあります。 何を指針とするか では、まず何をどうす
iOS開発におけるCopilot For XcodeとCode Completion / copilot for xcode
前書き フロントエンドエンジニアの松原(@simezi9)です。 先日10月30日にクラウドワークスさんをお借りして実施したVue.jsの設計勉強会である、Vue.jsアーキテクチャリング勉強会 にて、 BASEの現在のVueコンポーネントの設計に関して登壇してお話してきました。 全体の資料はこちらです もともとBASEではVue.js+TSを採用した大規模なシステムのリニューアルプロジェクトが2018年からスタートしていました。それにあたっての大まかなフロントエンドの構築方針は以前もblogや外部登壇で発表していました。 次世代の管理画面を作るフロントエンドの取り組み - BASE開発チームブログ 次の5年を支えるVue.js製UIコンポーネントライブラリを育てる これまでの発表では大枠の技術スタックやワークフローの話が多かったですが、 今回はVueコンポーネントの設計が勉強会の主眼にあ
はじめに Vue.jsの「コンポーネント」をなんとなく理解できたので、まとめてみました。 Vue.jsの初歩的な知識はある前提です。 この辺↓が分かっていればとりあえずOKかと。 5分でわかるVue.js基礎の基礎 環境 Vue CLIを使います。 使ったことない方はインストールをお願いします。 ※参考：Vue CLI スタートガイド プロジェクトを立ち上げるとこんな感じの構成でファイルが作られていると思います。 基本的に編集していくのはApp.vueとcomponentsフォルダです。それ以外はデフォルトのまま触らなくて大丈夫です。 ターミナルで を実行すると開発用サーバが立ちます。 その状態でhttp://localhost:8080/にアクセスすると、下のような画面が表示されます。 vueファイルに変更を加えると、その変更内容がこのページに即座に反映されます。 試しにApp.vueの
Vue.jsだけで作る基本的なチャットアプリ機能のサンプルコードと概要説明です。 Vue.jsの概要説明とプロジェクト設定はこちら： www.katonobo.com www.katonobo.com Vue.jsで超基本的なチャットアプリ機能を実装しよう Vue.jsのサンプルコード コードの説明 Vue.jsで超基本的なチャットアプリ機能を実装しよう Vue.jsだけで作っています。そのため、メッセージはリロードしたり画面遷移したらデータは消えますので実用レベルではありませんが、むしろ無駄を一切削ぎ落としたコードなのでチャットアプリの基本的なロジックを理解するのに役立つはずです。 今回の機能は、自分のメッセージの送信と相手のメッセージの送信を分けて、自分のメッセージは「赤色」相手のメッセージは「青色」になり順番に表示されるようになっています。 実際の動作はこちらのサイトで確認してくださ
こちらでVue.jsのプロジェクトを作成しておいてください。 今回のレッスンの全体像 今回のレッスンは、Vue.jsとFirebaseを連携させることが目的です。 Vue.jsとFirebaseが連携できれば、Vue.jsで作成した画面から、データをFirebaseに保存したり、引き出したり、消したり出来るようになります。 つまり、皆さんが想像する一般的なウェブサービスを作れます。 Firebaseとは？ Firebaseとは、Googleが提供するモバイル・Webアプリケーション開発プラットフォームです。 様々な便利なサービスを提供してくれていますが、今回はFirestoreと言う、データベースのサービスを利用します。 Firebaseのプロジェクトを作成 まずはFirebaseのアカウントを作成してください。 Firebase アカウントができたら「プロジェクトを追加」をクリックします
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
