GitHubPagesでVueで作ったアプリを公開する
とりあえずVue+Vuetifyで簡単なアプリを作ったので、GitHubPagesで公開してみた。作ったのはこんなしょーもないものです。
https://direboar.github.io/githubpage-test/dist/#/
その辺の話はもうちょっとちゃんとしたの作ったらまとめるとして、以下はその過程で調べたことのメモ。
- vue-cliでwebアプリケーションを作って、GitHubPagesで無料で爆速でリリースした話
https://qiita.com/tiwu_official/items/43dc554ec43dd951812a
npm buildする際、CSSのパス解決ができずにはまったのだけど、この情報のおかげで助かった…。webpack周りとか、ちゃんとやるならキャッチアップしていかないと自己解決できないぞ‥‥？
https://qiita.com/ptiringo/items/cab724f3096acc5728cf
これは環境依存？のバグで動かず…。どうしようかなぁ…。
あとローカルで作って動いていた、JSONリクエスト結果を画面表示するアプリがgithub pagesに上げたら動かなくなった…。Access-Control-Allow-Origin:* ヘッダは返ってきていたから、なんだろうと思って調べていたらこういうことですか…。これだとちょっと使えないので、httpでリクエストできるホスティングサービス探すのかな…。
https://stackoverflow.com/questions/37066639/https-and-http-cors
eslint:recommended
どうもnmp run devするときとかにlintが色々エラーを出して面倒だなと思っていたのだけど、eslintrc.jsに「extends: 'eslint:recommended',」と設定するといい感じになるっぽい。詳細は以下。
https://www.tam-tam.co.jp/tipsnote/javascript/post11934.html
ただ、別のとこで見たvue-eslint-parserを設定するとlintがチェックをしなくなるようなんだよなぁ・・・とりあえず上記は設定せずに進めてみよう…。
Vuejs+VSCode+ChromeDebuggerでブレークポイントを張るサンプル
ちょっとはまっていたが、結局以下を参考にしたら解決したのでメモ書きまで。寝ないと…。
https://github.com/Microsoft/vscode-recipes/tree/master/vuejs-cli
Vue.jsと最近のJS開発へのキャッチアップメモ
そうだ、JavaScriptをやってみよう！という発作が数年に一回くらい発生するのです。
立ち読みした雑誌で何となくよさげだった、Vue.jsを試してみようかと思い、とりあえず門戸をくぐってみたところ、なんか最近のJS開発ってだいぶぶっ飛んだ進化してるんですね。ビルドが前提の開発とか、想像もしてなかった…。まぁ、まともな言語になってきたってことなんすかね…。
とりあえずこのページは、私がキャッチアップした内容の雑多なリンク集です。エコシステムまわりは正直、キーワードのメモに過ぎない…。多すぎ。
開発環境
Atom,Brakets,Visual Studio Codeを試した結果、Visual Studio Codeがよさげという結論。
- Visual Studio Code上でイマドキのJavaScript開発環境を構築する
- Visual Studio Code で Vue の開発環境を整える JSLintの定義とかは、ここパクったらだいたいよくなった。
Vue.js関連
- 公式 コンポーネントまでは、「基本的な使い方」のサンプルコードを写経した。
- Vue.js入門 ―最速で作るシンプルなWebアプリケーション Vue-RouterやVue-Cli周りを参考にした。
- Vue.js #1 Advent Calendar 2017 そろそろコンポーネントやスタイル使ってなんか作りたいので参考に。。ボリューム多いな…
エコシステム関連
たくさんあって覚えきれないのでリスト化するよ！
パッケージ管理
- npm ：node.jsで使用されるパッケージ管理ツール。
- bower ：ブラウザで動く昔ながらの Javascript のためのパッケージ管理ツールです。だそうな・・
参考：
モジュールバンドラ関連
仕様関連。
- CommonJS ：モジュール化に関するJavaScriptの仕様。
- AMD ：CommonJSとは別のモジュール化の仕様らしい。
- ES Modules ：ES2015で定められたモジュール化の仕様。export/default。
モジュールシステム関連。
- Browserify ：CommonJSのモジュール仕様に沿って書いたJavaScriptを、ブラウザ上で動かせるようにしたモジュールシステム。モジュール解決・コンパイルするイメージ。
- RequireJS ：AMDのモジュール仕様に従ったモジュールシステム。
- Webpack ：CommonJSとAMDの両方に対応下モジュールシステム。なんかBrowserifyより高機能らしい。
参考：
- webpack で始めるイマドキのフロントエンド開発
- JavaScriptのモジュール管理(CommonJSとかAMDとかBrowserifyとかwebpack)
- webpack 入門 （v3系 対応） 難しそう
- ES2015のモジュール管理これが一番まとまってる気がする
タスクランナー
ビルドタスクの自動化ツールっぽい。ビルドスクリプトだと思えばいいのかな？
- Grunt ：定番らしい。
- Gulp ：後発でこっちのが早かったり、記法がシンプルだったりするらしい。
参考：
トランスパイラとJSの仕様
仕様関連
- EcmaScript ：JavaScriptの仕様からブラウザ周りを取っ払ったもの。
- ES2015 ：最新のECMAScript仕様。クラスとかモジュールとかが追加されて普通の言語っぽくなった。
ツール
- Babel ：ES2015仕様が変わりすぎてブラウザでサポートされないので、ECMAScript5に変換するツール。
参考：
神
- vue-cli ：vueでES2015スタイルの開発を行うためのプロジェクト・テンプレートを生成してくれる。WebpackやBabelの設定などを勝手にやってくれるので超助かる。初心者でもとりあえずモダンな開発を体験できる。
参考：
その他参考
Vue.JSがフロントエンド開発未経験者にとってはホント神で、チュートリアル写経ではあるけどとりあえず簡単なSPAが作れて、モダンなJS開発を体験できるのが助かる。逆に、ビルド時に裏で何が動いているのかさっぱりではあるけど…まぁおいおい理解していけばいいかな。（タスクランナーとか何が動いてるのか全然わかってない）
とりあえずなんか動くアプリを作りたいので、よくあるTODOアプリ代わりにD&Dイニシアチブ管理アプリとか作ってみるつもり。Vue.JS主体でキャッチアップしていくけど、まだまだいろいろあるんだよな。。。
後そもそもデザインの知識や、CSSの知識がないんだが、ElementUIあたり使えばうまくいくだろうか…。
SpringBoot覚書
BackBone.js本を買って写経をしようかと思いましてん。
- 作者: James Sugrue
- 出版社/メーカー: 翔泳社
- 発売日: 2014/09/05
- メディア: Kindle版
- この商品を含むブログを見る
で、その際サンプルとしてtwitterのクライアントを作るみたいなのがあり、これはモチベーション上がりそうだとやろうとしたのですが、現在のtwitter apiはOAuthが必須なので残念ながらクライアントサイドからJavaScriptで実施できない。ということで、面倒だけどサーバーサイド作成が必須…。BackBone本にはNode.jsでサーバーを作成する例があったが、いや業務でNode.jsやる機会もなかなかなかろうと…。ということで、良い機会なのでSpringBootを試してみた。
以下、参考書。
はじめてのSpring Boot―「Spring Framework」で簡単Javaアプリ開発 (I・O BOOKS)
- 作者: 槇俊明
- 出版社/メーカー: 工学社
- 発売日: 2014/11/01
- メディア: 単行本
- この商品を含むブログ (8件) を見る
んでもって、やったら結構ハマったので、ハマリポイントの覚書。
１）data.sql,schema.sql
/src/main/resources/にDDL、DMLをおいておくと起動時に勝手に実行してくれる。ただし、デフォルトではJPAによるスキーマ自動生成が有効になっているので、再度drop/createされてしまう。上記を避けるためには、application.propertiesに以下の設定が必要。
２）thymeleaf
普段JSPばっかなので結構ハマる。目的がthymeleafではなかったので斜め読みしたのがいかんかったか…。で、thymeleafはデフォルトではXHTML前提で動作するのだけど、正直面倒なので、nekoHtmlを使う方が楽かもしれない。ついでに開発中は、キャッシュはオフる。
spring.thymeleaf.mode=LEGACYHTML5
spring.thymeleaf.cache=false
３）ワンタイム・トークン（CRSFチェック）
SpringBootでは、ワンタイム・トークンチェックをデフォルトで行う設定になっている。（Spring的には、CsrfRequestDataValueProcessorというのを設定すると有効になるらしい。）で、thymeleafを使用した場合、どうも挙動を見る限り、<form>タグのactionを@{/path}で置換する設定にしないと、トークンが自動的には埋め込まれないようにみえる。まぁ、普通は設定するからいいんだけど、実装ミスった時とかに原因がわからず、割とハマった。
４）ベーシック認証
基本だけど、SpringSecurityを設定すると、デフォルトではベーシック認証が行われる。以下の設定で解除できる。
security.basic.enabled=false
５）twitterのoauth認証
色々記載があってわからんかったが、結局認証先の接続情報を永続化する必要がなければ以下の対応が一番簡単ぽい。ということで、今回はひとまずそうした。
http://qiita.com/tsuyogoro/items/6225913d50a36bfe735e
ぶっちゃけ最近までStruts1系どっぷりだったので、難民的にはSpringは正直広大だなぁ…と思いましてん。
その他、昨日〜今日の作業で良さそうなサイトをメモしておしまい。
JavaScriptにおける継承（のシミュレーション）と、属性のカプセル化
JavaScript初心者のお勉強中。
色々あさった結果、以下のページで紹介されていたNode.jsのinherits関数を使用するパターンが良さそうという結論に落ちつつあります。この場合に属性のカプセル化ってどうやるんだろうと思い、ファクトリーメソッドパターンを持ちだしてみたものの、超イマイチ…。
http://qiita.com/LightSpeedC/items/d307d809ecf2710bd957
//ファクトリーオブジェクト。
var KlassFactory = function(){
// ベースクラス
var Klass = function(attr){
this.attr = attr;
}
Klass.prototype.getAttr = function(){
return this.attr;
}// サブクラス
var Sub = function(attr,subattr){
Klass(this,attr);
this.subattr = subattr;
}//継承処理。簡易ロジックとして実装。実際は、Node.jsのinheritを実行する。
Sub.prototype = Object.create(Klass.prototype, {
constructor : {
value : Sub,
enumerable : false,
writable : true,
configurable : true
}
});//ファクトリーオブジェクトを返却。
//ここでクロージャを使うことで、ベースクラス・サブクラス自体を隠蔽する。
return {
createKlass : function(attr){
//属性値はファクトリーメソッド内でクロージャとして生成する。
var klass = new Klass(attr);
//属性値を参照するためには、klassにバインドする必要がある。
//（createKlassの戻り値のオブジェクトには、attrを定義していないため。）
return {getAttr : klass.getAttr.bind(klass)};
},createSub : function(attr,subattr){
var sub = new Sub(attr,subattr);
return {getAttr : sub.getAttr.bind(sub)};
}
}
}();
そもそもコンストラクタ関数が外部に公開されないので、instanceofなどが使えないし、新たにサブクラスを定義する場合、KlassFactoryに手を入れたりする必要があるしで、超イマイチ。素直に、情報隠蔽は諦めたほうがいいのかな。
JavaScrpitお勉強用リンク集
私用の備忘録。ふやして整理していくつもりです。出遅れを取り戻さなければ…。勉強する予定のものをリストアップしていますが、jQueryやbackbone.jsはまだ手を付けてないので空欄。…まぁjQueryは業務で軽く触れてるし、ぶっちゃけ難しくないので、ガッツリやらんでもいいかなぁという気がするような、しないような。
JS基本の基本
underscore.js入門
JSCover(カバレッジツール。簡易WEBサーバとしても使える）
Sinon.js（モック・フレームワーク）
jQuery
-
- 未定。
backbone.js
- Backbone.js 使い方メモ
- 日本語リファレンス（ふるい）
- 試して学ぶBackbone.js
- Backbone.js公式
- Backbone.jsでクライアントMVCに挑戦！
- Backbone.js導入のハマりポイントとテンプレートを使わない使い方
- Backbone.jsの設計
- bootstrap validatorのサンプル（わかりやすそう。stickit使うのは前提。）
ECMAScript6
jQueryのdocument.ready時のスコープの話
後、購入した本はこれだが、、、
JavaScript本格入門 〜モダンスタイルによる基礎からAjax・ｊQueryまで
http://www.amazon.co.jp/dp/4774144665/ref=wl_it_dp_o_pC_S_ttl?_encoding=UTF8&colid=3VQ86NTG8LHHI&coliid=I2OCLS0I2D5T6H
JavaScript: The Good Parts ―「良いパーツ」によるベストプラクティス
http://www.amazon.co.jp/gp/product/4873113911?colid=3VQ86NTG8LHHI&coliid=IHHSVMTB805FR&ref_=wl_it_dp_o_pC_S_ttl
前者の本は読み流しやすいが、結構浅いのであまり深追い（＝写経）せんほうがいいかなぁという気持ちも。クラスの定義のやり方とか古いっぽいし。早めに後者や、「パーフェクトJavaScript」の写経にシフトしたほうが良いかもしれん。同僚には、今からやるならECMAScript6にしとけよ！って言われたけど、まぁ、まだ早いよなぁ…。
