Vue.js + axios + Vue Routerで作る！シンプルなSPAの作り方 | Public Constructor
この記事では、SPAがはじめてという方向けに、”Vue.js”と”Vue Router”、”axios”を使った、SPAの作り方を紹介します。 そのため、「SPAのアプリケーションを作ってみたいけれど、どこから手をつければ良いかわからない」という方向けの内容となっています。 今回作成するアプリケーションは、「Ajaxで自分のIPアドレスを取得し、表示する」ことを目標としています。 実装する機能としてはシンプルですが、「画面遷移」や「Ajaxによるデータ通信」といった、アプリケーションに欠かせない処理を含んでいます。 この記事を参考にSPAを作ってみて、Vue.jsでSPAを作ることが、どういった感じかを掴んでいただければと思います。 作成するアプリケーションのイメージを下記に記載します。 ホーム画面 IPを表示する画面 SPAとは何か？ SPAは、”Single Page Applicat
【Vue.js】爆速でSPAを作る - Qiita
シングルページアプリケーションが流行っているらしいので、今頃便乗して簡単にできると言うVue.jsを使ってSPAを作ってみます。 Vueとか何もわからないけど、とりあえずやってみたいという人はぜひ参考にしてください。 ただ、多少触ってみてからSPAに挑戦するのをおすすめします。 超簡単にですが前回まとめた記事がありますのでこちらをご覧ください。 https://qiita.com/nagimaruxxx/items/279ca1c57a8ec8325558 開発環境 dockerコンテナ内とかではなくMac上で行います(ここで間違えてつまづいた人) - macOS High Sierra - node.js 10.11.0 - npm 6.4.1 Vue.jsって？ JavaScriptのフレームワークです。 特徴としてあげられることは ・MVVMフレームワーク ・学習コストが低い ・双方
Vue-routerを使って、SPAをシンプルにはじめてみる - Qiita
はじめに Vue-routerを使ってシンプルなSPA(Single Page Application)的なサイトを作ってみる。なかなかシンプルにやりたいことだけやれる説明サイトが見つからなかったのでまとめておきます。 やりたいことは、最初に画面がでてきて、画面内のリンクをおしていくとどんどん次のページへ進んでいくという単純な画面遷移をVue-routerを使って実現すること、それだけです。 むかしはこれだけでもできたら、すぐに"アドベンチャーゲーム"作れるなー とか思いましたが、最近アドベンチャーゲームというジャンルもなかなか聞かなくなりましたね..... 説明は、大事なポイント以外は省略してやりたいことに一直線でいきます。 (2018.11) しばらく放置した結果Vueのバージョンが変わり動かないサンプルコードになっていたので修正しました。。 Vue および Vue-router のイ
PWAで注目されるオフラインWebアプリをService WorkersとPouchDBで実装しよう
グーグルのPWA（Progressive Web Apps）の登場によって、再び注目されているWebアプリのオフライン機能。Service WorkersとPouchDBを使って実装する実例を紹介。 オフラインWebアプリがどんどん使われるようになっています。オフラインのサポートが重要になった結果、最初にオフラインでの利用を考える「オフライン・ファースト」を話題にするのが普通になりました。また、プログレッシブWebアプリ（PWA）という考え方が現れたのもオフライン・サポートが普及し始めた一因になっています。 この記事では、アセット・キャッシング、クライアント側のデータストレージ、リモート・データストアとの同期などの機能を利用して、基本的な電話帳Webアプリにオフライン・サポートを追加する方法を説明します。 アプリのソースコードはGitHubで入手できます。 なぜオフライン・サポート？ なぜ
いまさら聞けない「オフラインWeb」入門──オフラインでも使えます
いまさら聞けない「オフラインWeb」入門──オフラインでも使えます：いまさら聞けないリッチクライアント技術（14）（1/3 ページ） Webアプリケーションだって、オフラインで使いたい！という声に応えるスタンドアロン型「オフラインWebアプリ」。Google Gears、Adobe AIR、Prismの3つを紹介（編集部） 今回取り上げる用語は「オフラインWeb」です。皆さんも一度は聞いたことがあるのではないでしょうか。では、オフラインWebとは実際どんなものなのかを、早速、紹介していきましょう。 オフラインWebってなに？ ネットワークにつながっていないオフライン状態で、Webアプリケーションが使いたいケースってありませんか？ 今回紹介するのは、そういった要求に応える、デスクトップ上のスタンドアロン型Webアプリケーションです。 一般的に、「オフラインWeb」もしくは「オフラインWebア
【PHP】リモートマシンのデバッグを、「複数人で」やる【Xdebug×DBGpProxy】 - Qiita
参考 やむにやまれない理由で、ローカル環境またはローカルの仮想マシン内に自分だけの開発環境を構築できない場合があります。 でもリモートデバッグはやりたい...ヨダレが出るほどに...var_dumpとか書きたくないし！ #想定環境 今回の想定は、↓の図のような感じで開発してるものとします。 ポイントは、 開発者のローカル端末でソースコード編集が行われず、開発サーバ内のソースコードをみんなで編集している 開発サーバが、開発者ローカル端末と 同サブネットに存在しない。 ##開発サーバが同サブネットに存在する場合は... 同サブネットに存在する場合は、そもそもxdebugの設定で解決する（はず）と思います。 xdebug.remote_connect_backの設定がそれです。 remote_connect_backは、$_SERVER['REMOTE_ADDR']によってデバッグ待機中のマシン
「コードを書き続けたい」は悪いことじゃない――“生涯技術を極めていきたい”エンジニアにLINE CTO 朴イビンが送るメッセージ - エンジニアtype | 転職type
この連載では、注目企業のCTOが考える「この先、エンジニアに求められるもの」を紹介。エンジニアが未来を生き抜くヒントをお届けします！ 「現場から離れたくない」「技術だけを極めていきたい」という理由から、マネジャーになることに拒否感を覚えるエンジニアは少なくない。自らの技術力に自信があるエンジニアならなおさらだろう。 これまで、LINE・CTO朴イビン（パク・イビン）さんは、さまざまな機会を捉えて「年齢にかかわらず本人が希望し、能力があれば技術を極める道を歩むべき」と、現場志向のエンジニアにエールを送ってきた。 一方で、エンジニアのキャリアは単純に「管理」「現場」の２つに分けられるものではないと朴さんは言う。若手エンジニアが自分のキャリアパスを考える際、どのようなことを意識するべきか、朴さんに聞いた。 LINE株式会社 上級執行役員 CTO 朴イビン（パク・イビン）さん 2002年にゲーム開
jQueryでfadeOutの後にremove - Qiita
としてみたところ、 フェードアウトせずにそのまま消えてしまった。 ちょっと調べてみると、処理を待つキューに入る処理と入らない処理があるとのこと。 エフェクト系は概ね入るようだけど、remove()はキューに入らない。 キューに入れるには.queue()を使う。
意外と知らない？HTML/CSSを書く上で便利なデベロッパーツールの機能13選｜かずたか
※こちらの記事が400はてブ以上ついて、総合とテクノロジーの人気エントリーに入りました！ こんにちは。Kazutaka Shimizuです。 フリーランスとしてPM、エンジニアをやっています。 元々はWebマーケティングのコンサルタントをやっていましたが、独学でWeb開発を勉強してプロダクトを作って起業しました。 最近は創業した会社を離れ、フリーランスとして活動したり、プログラミングを独学した経験をこちらのツイッターで発信しています。 みなさんはGoogle Chromeのデベロッパーツールをご存知ですか？ ドットインストールなど一部のプログラミング学習サービスでは、デベロッパーツールのレッスンがあるなど、おそらく全く知らない人はかなり少ないと思います。 しかし、とにかく多機能なため、意外と便利な機能を使ったことがないというプログラミング初心者の方も多いようです。 僕自身、何度か自分のTw
Atomでタブを押した時に入るスペースの数を言語ごとに設定する方法 - Qiita
Why? 言語ごとにインデント変えてる人多いですよね？ いちいち設定を変えるのめんどくさいのですよね？ Atomでは言語をファイルの拡張子から読み取って、タブによるスペース挿入の数などの設定が言語それぞれ別ににできます。 How? 1. 設定を開きます。 2. Packagesをクリックします。 3. 検索欄に個別に設定したい言語を検索します。 例ではJavaScriptを検索しています。 4. Settingsをクリック。 5. 下にスクロールするとTab Lengthと書いてあるので、そこで任意のスペースに設定してください。 6. お疲れ様でした。以上で設定完了です。 終わりに 簡単ですね。日本語で解説しているページが無かったので投稿してみました。
［速報］マイクロソフト、Webブラウザで動作する「Visual Studio Online」発表。VSCodeベース、IntelliCode、Live Share、拡張機能にも対応。Microsoft Build 2019
マイクロソフトは米シアトルで開催中のイベント「Microsoft Build 2019」で、Webブラウザで動作する開発環境「Visual Studio Online」を発表しました。 Visual Studio OnlineはWebアプリケーションとして提供されるため、Webブラウザから「https://online.visualstudio.com」へアクセスすることで利用可能になる予定です。 Visual Studio Codeをベースにしており、既存の拡張機能も利用可能。 Visual Studio CodeのワークスペースとVisual Studioのプロジェクトに対応し、機械学習がコーディングを支援してくれる「IntelliCode」、Visual Studioファミリー製品のあいだでリアルタイムにコードの編集やデバッグ操作などを共有できる「Live Share」機能などが最初
HTML5・CSS3のブラウザ対応チェックサイト3選 | Webデザイン・Webデザイナースクール
Web業界で仕事をしていくにあたって、もっとも重要なことのひとつは、最新技術を追い続けるということです。しかし、そこで困るのが、最新技術を試してみたいけど、どのブラウザだったら対応しているのか、ということだと思います。 そこで、ブラウザごとの技術対応状況が一覧で分かるWebサイトをご紹介していきたいと思います。 Can I Use... HTML5、CSS3、JavaScriptまで、幅広く対応していて、Web技術者にとって欠かせないWebサイトといっても良いくらい有名なサイトです。調べたい技術を検索ボックスに入力することで、ブラウザごと、さらにバージョンごとにも詳しく対応状況を一覧することができます。 MOBILE HTML5 その名のとおり、モバイルブラウザに特化してHTML5やCSS3の対応状況を確認することができます。Can I Use... よりもモバイルブラウザに多く対応してい
CSSベンダープレフィックス-webkit-を今この瞬間に辞める為のAutoprefixerの導入 - Qiita
ブラウザの進化が早い昨今、CSSのベンダープレフィックス(-webkit-や-ms-)が必要なプロパティと不要なプロパティが入り乱れています。必要なベンダープレフィックスのみを付与しようとした場合、途端にコード量が倍増し、メンテナンス性が低下し、バグの温床となります。このベンダープレフィックス地獄を解消するAutoprefixerをGulpやwebpackで使う方法を紹介します。 今なお続くベンダープレフィックス地獄 角丸を表現するborder-radiusプロパティはIE 11を含む全ての主要ブラウザで、ベンダープレフィックス無しで使えます。(Can I use border-radius) 一方で、ボックスレイアウトモジュールの為のflexboxプロパティやテキスト要素を変形するtransformプロパティ等では、Android 4.4以下等一部のブラウザではベンダープレフィックスが必
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
オフラインWebアプリの仕組み
CakePHPでテスト PHPUnitを使ったテスト | Ver.1.0 Blog
Microsoft、「Web Template Studio」を早期プレビュー 〜「VS Code」でWebアプリの雛形を／“Microsoft Garage”のインターンで開発された「Windows Template Studio」の弟分
ほぼろ on Twitter: "これは本当にとても便利なgitのログ機能なんですが、 `git log -L :関数名:ファイル名` でその関数の履歴が見れます https://t.co/wcul1OYr0W"
Switch用「プチコン4 SmileBASIC」本日発売 いつでもどこでも自由にプログラミングを楽しもう
「Visual Studio Code」でリモート開発 ～Microsoftが新しい拡張機能パックをリリース／リモートサーバー/コンテナー/WSLへ手軽にリモート接続
https://jp.techcrunch.com/2019/05/07/2019-05-06-microsoft-launches-react-native-for-windows/
