サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
Wikipedia
www.hypertextcandy.com
この記事では、Laravel Valet を紹介します。Valet はローカル PC で動作する簡易 Web サーバーと考えていただくと良いでしょう。Nginx や Dnsmasq などのソフトウェアを組み合わせたライブラリです。サポートする OS は Mac のみです。 ちなみに、この記事で紹介する Valet のバージョンは 2.1.1 です。 Homestead と Valet Laravel の開発環境構築といえば Homestead がスタンダードですが、Homestead が仮想マシン上に開発環境を構築するのに対し、Valet は基本的にローカルマシン内に構築されたアプリケーションを内部的に app-name.test というドメインで見られるようにする機能しかありません。 Valet のメリットとしては… 仮想マシンを起動するよりずっと軽量で高速。 hosts ファイルや H
この章では、アプリケーション全体の設計を考えます。 まず SPA の特徴について見ていったあとに、データベースと URL を設計しましょう。 SPA のアーキテクチャ 通信パターンの特徴 シングルページアプリケーション(Single Page Application)とシングルページではない「普通の」Web アプリケーション(シングルページと対比してマルチページアプリケーションと呼ぶことにします)はブラウザ - サーバ間の通信パターンに大きな違いがあります。 まず、マルチページアプリケーションの通信は以下のようなパターンになります。 ブラウザの画面要求(GET)またはデータ送信(POST)に対してサーバは HTML を返却し、ブラウザはその HTML を描画して画面を構築します。マルチページアプリケーションの通信パターンはこのワンセットの繰り返しです。 これに対してシングルページアプリケー
はじめに 対象者 JavaScript / Vue.js / PHP / Laravel の入門レベルの方、入門書を読んだあとに「何か作ってみたい」という方が、それぞれの知識を組み合わせて本格的なアプリケーションを開発できるようになることを目指しています。 上記のいずれかの知識がまったくない状態だとこのチュートリアルの内容は少し難しいかもしれません。チャレンジするのもいいですが、参考文献に挙げた市販の入門書か、関連記事のチュートリアルを先に読んでおくと理解しやすいと思います。 学べること Vue.js と Laravel を組み合わせて SPA を構築する方法 SPA におけるクッキー認証と CSRF 対策 Vue Router を使用した画面遷移 Vuex を使用した状態管理 Vue でのタブやローディング UI の表現 SPA におけるエラー処理 扱わないこと デザインと CSS コー
src/components/EventButtons.vue <template> <div> <button @click="emitEventOne">Event 1</button> <button @click="emitEventTwo">Event 2</button> <button @click="emitEventThree">Event 3</button> </div> </template> <script> export default { methods: { emitEventOne () { this.$emit('event-one') }, emitEventTwo () { this.$emit('event-two', 'This is an argument') }, emitEventThree () { this.$emit('event-t
この記事では、Gulp 4でフロントエンドの開発環境を構築する方法を紹介します。Gulp 4をタスクランナーとして、CSSのトランスパイルに SCSS + Stylelint、JavaScript のトランスパイルに Webpack + ESLint、、テンプレートエンジンとして Edge.js、さらにローカルサーバーとして BrowserSync を組み合わせます。 私はどちらかというとサーバサイドな人でフロントエンド専門ではないのですが、モックアップ作ったりで HTML コーディングしたくなって、いまさらながら Gulp で自分なりの環境構築をしたので結果を共有します。 フロントエンドと言っても全面的に React や Vue でゴリゴリアプリケーションを書くというより HTML コーディングの範疇内でのユースケースを想定しています(フレームワークでゴリゴリしたいなら create-r
この連載記事では、Laravel を使用した Web アプリケーションの開発方法を紹介します。実際に(お決まりの?)ToDo アプリを開発する手順を通して Web 開発のエッセンスを学んでいただけるように書いていきます。取り扱う Laravel のバージョンは現時点で最新の 5.7 です。 電子書籍版も公開しています。 はじめに 対象者 Web 開発、特にフレームワークを用いた開発の経験が浅い方を対象としています。他の言語やフレームワークの経験があって Laravel について知りたい方にも参考にしていただけると幸いです。 学ぶこと、学ばないこと このチュートリアルでは Laravel の基本機能を学ぶこと、「フレームワークってこんな感じなんだ」という理解を得ていただくことを目的としています。次のステップを自身で踏み出すきっかけになればいいなと思っています。 そのため、例えばメソッドのオプ
この記事では、JavaScript モーダルウィンドウライブラリ、Micromodal.js を紹介します。 Micromodal.js は以下の特徴を持っています。 軽量である(1.9 KB!) WAI-ARIA ガイドライン に則ったアクセシビリティ対応 ライブラリに依存しない Pure JavaScript で書かれている スタイルが自由(デフォルトの装飾が適用されていない) CSS が付属されていないのがサイトのテイストに合わせやすくて逆に嬉しいです。jQuery 製のライブラリは結構個性的な装飾ついちゃってること多い気がするので。Pure JavaScript なので Vue や React とも相性が良さそうです。 というわけで、ここから使いかたを紹介していきます。 Micromodal.js の使いかた インストール まずはインストール方法です。npm リポジトリおよび CD
Nuxt.js アプリにBootstrap 4を導入し SCSS でカスタマイズする方法を紹介します。 プロジェクト作成 まずは create-nuxt-app コマンドで新しいプロジェクトを作成します。 create-nuxt-app は Nuxt アプリの環境を対話的に簡単に構築できるCLIツールです。 ? Use a custom UI framework と聞かれるところで bootstrap を選択しましょう。 依存ライブラリとして bootstrap-vue がインストールされます。 $ npx create-nuxt-app nuxt-bootstrap npx: 307個のパッケージを21.094秒でインストールしました。 > Generating Nuxt.js project in /Users/masahiro.harada/Projects/qiita/nuxt-b
この記事では、JavaScript 初学者の方が ES2015 以降のコードを見たときに戸惑いそうな文法を紹介します。メソッドなどとは異なり、記号の羅列でどうやってググればいいか分からないような文法をチョイスしました。 ブラウザによってはサポートされていない(主に IE11 )記法もあるので、実際に試してみたい場合は Babel の Try it out ページがオススメです。リアルタイムでレガシーな JavaScript への変換結果が表示されるので アロー関数 まずはアロー関数です。アロー関数は ES2015 の目玉機能だったのでご存知の方も多いかもしれません。ただ最近でも初心者向けの入門書では紹介されていなかったりしますね。 アロー(矢印)関数は「矢印関数」の名前の通り、function キーワードの代わりに矢印を使った無名関数の定義記法です。以下の2つは同じ意味です。
Documents Vue.jsの公式マニュアルは完全に日本語化されています 内容も充実しているので、私は開発時はマニュアルさえあれば大抵困りません。 インストール 今回はCDNにホストされたソースを利用します。つまりインストール作業は必要ありません。中規模以上の開発では主にnpmもしくはyarnを利用しますが、今回のチュートリアルにはCDNで足りるでしょう。
この記事では、普段 Laravel を使って開発しているエンジニアが WordPress テーマを作成する際にできるだけ違和感のない環境を作成する方法を紹介します。 いつも View まわりで使っている技術を取り入れようということで、テンプレートエンジンに Blade を、Sass コンパイルに Laravel Mix を使用します。 準備 WordPress インストール Codex に書かれている通りですが…。 $ wget http://wordpress.org/latest.tar.gz $ tar -xzvf latest.tar.gz $ rm -f latest.tar.gz
イベントとmethods Vue.jsでのイベントハンドリングは普通にHTMLにJavaScriptを書くのとほとんど同じなので、わかりやすいかと思います。 イベントの登録には以下のように v-on 属性を用います。 v-on:イベント名="***" という形式で記述します。属性の値の部分はJavaScriptの式もしくはメソッド名です。 v-on: の部分は @ で置き換えることができます。v-on:click="***" であれば、@click="***" とも書けるわけです。@ は糖衣構文であって、2通りの書き方に機能的な違いは全くありません。私は @ の方が短く視認性にも優れると感じるので @ を使います。 @ 属性の値にはメソッド名も取れると書きましたが、単なる関数ではいけません。以下のように、Vueインスタンスの生成時にコンストラクタに渡す設定オブジェクトの methods プ
この記事では、無料でBasic認証付きのWebサイトをホスティングする方法を紹介します はじめに モックアップやサイトのプレビュー版をチーム内やクライアントと共有したいときってありますよね。そんなとき、自前サーバやFTPソフトがなくてもターミナルだけで、しかもタダで実現する方法です。 最近では Netlify や Surge など、無料で静的コンテンツをクラウドにホスティングできるサービスが出てきていますが、問題は認証です。モックアップやプレビューはとりあえずBasic認証くらいかけとこうかって感じだと思いますが、上記のサービスでは認証機能は有料プランです。 そこで、Node.jsでBasic認証付きのWebサーバを書いて、Herokuの無料プランにデプロイする方法を紹介します。無料プランだと一定期間アクセスがないとスリープ状態になって初動が遅くなるとか制約はありますが、モックアップやプレ
nuxt.config.js build: { babel: { presets: [ [ 'vue-app', { targets: { ie: 11 }, useBuiltIns: true } ] ] }, vendor: [ 'babel-polyfill' ], /* 中略 */ } build.vendor オプションに指定されたパッケージはアプリケーション中で一度だけインポートされます。 Nuxt.js では vendor.bundle.js ファイル内にモジュールを追加できます。このファイルは app バンドルファイルのサイズを小さくするために生成します。外部モジュール(例えば axios など)を使うときにとても便利です。 また、babel-preset-env と同様に useBuiltIns を true に指定すると、targets の環境で対応していない機能につい
自動リロードするローカルWebサーバーを起動する方法を3点まとめました。 自動リロードとは、、、 ファイルの更新を検知して自動的にブラウザをリロードしてくれる機能です。 コードを変更したあと自分でいちいちブラウザをリロードしなくて済むので、フロントエンド開発が少しだけ便利になります いずれもエディタのプラグインやコマンドラインを利用する方法です。 そのため、GulpやWebpackの設定を行うよりも手軽に導入できるのではないでしょうか。 VS Code Live Server というプラグインを使用します。 インストール まずは左のメニューのうち「拡張機能」タブ(一番下)をクリック 「Live Server」で検索してインストール(画像で一番上にヒットしているプラグインです) インストールが完了したら変更をエディタに適用するため、一度再起動してください。 使い方 フッターの「Go Live
モダンJavaScript概論 − Node, npm, ECMAScript, Babel, Webpack
Vue + Vue Router + Vuex + Laravelで写真共有アプリを作ろう (16) エラーハンドリング Part.2
このページを最初にブックマークしてみませんか?
『Hypertext Candy』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く