Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?
私がWebサービスのバージョンアップでVue.js導入することになり、取り組んでる内容についてWEBエンジニア向けに簡単に解説する記事です。 例えばjQueryのUIプラグインを沢山使ってるサーバーフレームワークで Vue.js、Vuex、Storybook を導入する際にどうすれば良いのか?などのノウハウについて記述します。 はじめに サーバーフレームワークのテンプレートへの組み込みが今回の要件です。 つまりVue.jsでカスタムコンポーネントもどきを作り、テンプレートエンジンで使えるようにするのが今回の要件です。 フロントエンド界隈のノウハウ集は大体がビッグスケールしても耐えられるようにフロントエンドとサーバーを開発チームまで完全に分離し、サーバーは API のみ提供する設計でしょう。最近ではVue.jsがどんどん認知され、実験的にRailsに組み込む軽いサンプルが散見するでしょう。
こんにちは。明治大学総合数理学部現象数理学科の鈴木です。2016年度からWeb Engineerはじめて、現在はPlaid, incでインターン中です!明治大学総合数理アドベントカレンダーを@ryunryunryunを巻き込んで作ってみたのですが、カレンダーはスッカスカです!(ネタも思いつかないし) 最近のwebpackだと、webpack-dev-serverをインストールすれば、簡単にhot reload開発ができるようになります。しかし、既にサーバー側のコードを書いていて、そちらにhot reloadを組み込みたい場合もあると思います。今回は、Expressサーバーにhot reloadを組み込む方法を記事にしてみました。 Hot reloadとは Hot reloadとはコードを変更したときマニュアルでリロードしなくとも、自動でリロードしてくれることを言います。ただ単にブラウザで開
0.前提 今回のOracleのインストールは とりあえず使いたい 古いノートにUBUNTU入れている(バージョン 14.04.4) 32ビット版!! 使用範囲としてはローカルネットワーク内 メイン(SQLの発行)は別マシンから行うのでDBが入れば後は別マシンから行う予定 こんな条件なので、入れるだけ入れてみた状態です 0.追記(2016/04/06) …どうやらOracleのサイトからダウンロードができない模様… もしかしたら配布が終わったのかも… 1.ダウンロード Oracle 10g Express Editon を ダウンロード Oracleのアカウントが必要かと… http://download.oracle.com/otn/linux/oracle10g/xe/10201/oracle-xe-universal_10.2.0.1-1.0_i386.deb 2.インストール パッケ
フロントエンドフレームワークも通常のプログラミングと同じように、第二,第三の言語の習得にそこまで時間はかからない。 選択に時間を使うくらいなら、何か一つ直感で選んで遊んでみるべきである。 私は、それを知らずにそれなりの時間をフレームワークの特徴探しに費やしてしまったので、過去の自分自身に送るつもりでこの記事を書いてみる。そして、過去の私と同じ境遇の人が少しでも参考にしてくれたらいいと思う。 これらは完全に主観であるため、何か納得できない点があれば、コメント欄に残しておいてほしい。 Why choose React over Angular and Vue.js 上で述べたように、フロントエンドフレームワークの学習という観点では何から始めても大きな問題はない。ここでは、その'何か'でReactが選ばれる理由を述べる。 Reactは小さく、シンプル。 Reactは、ちょっとしたReactとの対
こんにちはソウゾウ社な@vvakameです。 TypeScript 2.8.1がアナウンスされました。 What's new in TypeScriptも更新されているようです。 破壊的変更もあるよ! 今回からこの辺に僕が試した時のコードを投げておくことにしました。 変更点まとめ Conditional types(条件付きの型) Conditional types T extends U ? X : Y みたいなの書ける Conditional typesでの型推論 Type inference in conditional types infer の導入 ある型に式を当てはめた結果、得られた型推論の型を新たな型パラメタとして利用可能 type ReturnType<T> = T extends (...args: any[]) => infer R ? R : T; こういう R が新
<!-- マウント先 --> <div class="main" chain-case='chain' camelCase='camel' snake_case='snake' /> <!-- マウントするタグ --> <script type="riot/tag"> <my-tag> <h3>Hello { opts.title }</h3> console.log(opts); </my-tag> </script> <script src="https://cdn.jsdelivr.net/riot/2.3/riot+compiler.min.js"></script> <script> riot.mount('div.main', 'my-tag', {title: 'World', 'chain-title': 'chain', camelTitle : 'camel', sna
Vue.jsミニハンズオン(TODOリスト作成) AngularでもReactでもriot.jsでも満足できなかったひとに、ぴったりフィットなJSフレームワーク「Vue.js」のざっくりハンズオンです。 このハンズオンではnode.jsのパッケージは使わず、Google ChromeとテキストエディタがあればOKです。 Vue.jsミニハンズオンのシリーズは以下を公開しています。 Vue.jsミニハンズオン(TODOリスト作成) Vue.jsミニハンズオン(TODOリストにアニメーションをつける) Vue.jsミニハンズオン(TODOリストをコンポーネント化する) 今回の目標 目標はシンプルなTODOリストの作成です。 WebStorageに保存してリロードしてもデータを保持できるようにしてます。 Chromeの拡張機能を入れる デベロッパーツールでデータを見やすくするためChromeの拡
#2018/3/15追記 先日リリースされたwebpack 4で、CommonsChunkPluginは廃止され、代わりにoptimization.splitChunksが追加されました。 詳細は記事に書きましたのでwebpack 4を利用している方は以下をご覧ください。 webpack 4 の optimization.splitChunks の使い方、使い所 〜廃止された CommonsChunkPlugin から移行する〜 それ以前のバージョンでは有用なツールだと思いますので、まだ移行できない方はご覧いただければと思います。 はじめに webpackのプラグインであるCommonsChunkPluginに関しての基本的な使い方、使い所に関しての記事です。 CommonsChunkPluginを利用する機会はそこそこあると思うですが、日本語の解説記事をほとんど見かけなかったため本記事を
'use strict'; require('dotenv').config(); var fs = require('fs'); var path = require('path'); var Sequelize = require('sequelize'); var basename = path.basename(__filename); var env = process.env.NODE_ENV || 'development'; var config = require(__dirname + '/../config/config.json')[env]; var db = {}; if (config.use_env_variable) { console.log(process.env[config.use_env_variable]); var sequelize = n
Introduction 久しぶりに投稿させていただきます. 先日,githubをあれこれ調査していたら, 指定したブランチにgithub pagesを公開できるにという記事を発見致しました. 驚きました,ヤックデカルチャーです. もう gh-pagesブランチを作らなくて良いのね... しかも__レポジトリ毎__に作れる!!! Purpose さて,本題です. github にはwiki機能もありますが,github pagesを使えるのであれば, そちらを使ってDocumentを作成する方も多いでしょう. そこで,SinglePageApplicationを利用して簡単にイケてるgithub pagesを作る方法を提案したいと思います. 利用するのは,,, Riot.jsちゃんです! 2016年から2017年にかけて一時期盛り上がってましたね,私はVue.jsに魅了されていましたが.
人類はより高速にCIを回していくべきだと思っている りんご(@mstssk)です。 先日、 npm の v5.7がリリースされ npm ci というサブコマンドが新たに追加されました。 The npm Blog — Introducing npm ci for faster, more reliable... http://blog.npmjs.org/post/171556855892/introducing-npm-ci-for-faster-more-reliable CI/CDを開発プロセスに組み込んでいる場合により整合性があり高速なエクスペリエンスを提供する、と公式ブログでは紹介しています。 npm ci は何をするのか npm ci を実行すると常に package-lock.json から依存関係をインストールします。 既に node_modules フォルダの中身があっても
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く