Gituhb pageを利用したRiot.js のSPA型Webページ骨子（案） - Qiita
Introduction 久しぶりに投稿させていただきます． 先日，githubをあれこれ調査していたら， 指定したブランチにgithub pagesを公開できるにという記事を発見致しました． 驚きました，ヤックデカルチャーです． もう gh-pagesブランチを作らなくて良いのね... しかも__レポジトリ毎__に作れる！!! Purpose さて，本題です． github にはwiki機能もありますが，github pagesを使えるのであれば， そちらを使ってDocumentを作成する方も多いでしょう． そこで，SinglePageApplicationを利用して簡単にイケてるgithub pagesを作る方法を提案したいと思います． 利用するのは，，， Riot.jsちゃんです！ 2016年から2017年にかけて一時期盛り上がってましたね，私はVue.jsに魅了されていましたが．
npm ciを使おう あるいはより速く - Qiita
人類はより高速に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 フォルダの中身があっても
javascript で作成したCSVファイルをエクセルで表示可能にする - Qiita
■パターン1 Win / Mac共に文字化け ■パターン2 Winでは私の環境では文字化け発生しなかったが、ググってみるとバージョンによってはUTF-8だと文字化けするという声が多いので、ちょっと不明。 Macで文字化け。Macに対応させるにはUTF-16が必須。 ■パターン3 Macでの文字化けは解消されるものの、エクセルで表示させるとカンマの存在も虚しく、1セルにすべて表示されてしまう。 ↓こんな感じ ■パターン4 拡張子をxlsにすると、winで無慈悲な警告メッセージが再び表示されてしまう。 ■パターン5 何のエラーも表示されなかったベストパターン。（拡張子詐称なのを除けば） ##私なりの結論 Macユーザーを無視出来るなら、UTF-16/BOM有りにするだけでもOK TAB区切りなのにcsv拡張子にするのが気持ち悪い＆許容できないなら、Macユーザには自力でセル表示してもらうように
[Visual Studio Code][TypeScript][Windows] VSCodeでTypeScriptの開発環境を整える - Qiita
個人的に使用する機会があったので環境構築方法をまとめ。 Windows向けの記事になります。（たぶんLinuxとかでもある程度は一緒かと思います） ※普段は組み込みLinux向けにC/C++を使ってる人間なので、メンテされてない可能性がありますのでご注意ください 検証環境（2017/02/25） Windows 10 Visual Studio Code 1.9.1 Node.js v6.10.0 LTS TypeScript v2.2.1 1. Visual Studio Code（以下VSCode）の環境整備 1.1. VSCodeのインストール 前提としてVSCodeをインストールします。 Visual Studio Code - Code Editing. Redefined 1.2. Node.js のインストール Node.jsを公式ページからインストールします。 Node.j
![[Visual Studio Code][TypeScript][Windows] VSCodeでTypeScriptの開発環境を整える - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/0a334bb8edd0cb3defb3056ea721f53eba4c2885/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-412672c5f0600ab9a64263b751f1bc81.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9JTVCVmlzdWFsJTIwU3R1ZGlvJTIwQ29kZSU1RCU1QlR5cGVTY3JpcHQlNUQlNUJXaW5kb3dzJTVEJTIwVlNDb2RlJUUzJTgxJUE3VHlwZVNjcmlwdCVFMyU4MSVBRSVFOSU5NiU4QiVFNyU5OSVCQSVFNyU5MiVCMCVFNSVBMiU4MyVFMyU4MiU5MiVFNiU5NSVCNCVFMyU4MSU4OCVFMyU4MiU4QiZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZ0eHQtY29sb3I9JTIzMjEyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTU2JnM9N2JhZGRlOTBjMjA1YmYwMjc1YTFhYjViNjYyNGEzMmI%26mark-x%3D142%26mark-y%3D57%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9NzcwJnR4dD0lNDBrb2FyYS1sb2NhbCZ0eHQtY29sb3I9JTIzMjEyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTM2JnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnM9ZTk3NjkxMjcwNTQxZDY0ZTg5MGQzMWYxNzdhMmRjMmI%26blend-x%3D142%26blend-y%3D436%26blend-mode%3Dnormal%26txt64%3DaW4g44Oq44OD44Kv44K944OV44OI5qCq5byP5Lya56S-%26txt-width%3D770%26txt-clip%3Dend%252Cellipsis%26txt-color%3D%2523212121%26txt-font%3DHiragino%2520Sans%2520W6%26txt-size%3D36%26txt-x%3D156%26txt-y%3D536%26s%3D8fa63a53919268c60f4f3b49ffafd1ba)
ベジェ曲線を描画してVue.jsの素晴らしさを体感する - Qiita
ハイパーテキストをマークアップするのがHTMLなら、グラフィックをマークアップするのがSVGです。簡単なコードであれば形をイメージできるうえに、JavaScriptから手軽に操作できます。 WebGLを含むCanvasは、できる事の幅でいえばSVGよりもはるかに上ですし、ベジェ曲線も用意されていますが、線を引くだけなら大げさな気がします。あとレスポンシブ対応が地味にめんどくさい。サクサク動くゲームとか、ゴリゴリ動くリッチなサイトをCanvasで作れる人はすごくすごいと思います。 そんなこんなで、今回はSVGを使います。 Vue.jsとSVG SVGの実体はXMLなので、HTMLのようにVue.jsから操作できます。ベジェ曲線に必要な座標を変数として定義しておいて、それをリアルタイムで変更できるようにすれば、いい感じのベジェ曲線がVue.jsとSVGで実現できそうです。高まります。 実装 プ
Vue.js + Firebase を使って爆速でユーザ認証を実装する - Qiita
最初に この記事はVue.js アドベントカレンダー#4 25日目の記事です。 この一ヶ月でVue.jsについてのナレッジが100記事増えたことになります。やったね！！ 2018/8/2 追記 現在では vue-cli の3.x.xがリリースされており、スキャフォールドからVueプロジェクト作成の工程が若干異なりますのでご留意ください。 この記事でやること バックエンドをFirebaseに丸投げしたユーザ登録 → サインイン → サインアウト までのチュートリアルです。 認証の実装は面倒 フロントエンドの技術を使ってちょっとしたアプリケーションを作った時、認証やユーザ管理を実装するのはそれなりに面倒かと思います。フレームワークの選定、DBは何使う?など決めなければならないこと、覚えなくてはならないことがたくさんありますね。 そこでBaaSを使います。 BaaSって？ Backend as
Angular2のDIを知る - Qiita
どうも、@laco0416です。本アドベントカレンダーでは3回目の投稿です。 Angular2のDIを知る 今回の目標は「Angular2のDIを知る」ということで、まずは基本的なところからおさらいしていきます。 Angular2のDIの使い方 まずは一番単純なDIの使い方を解説します。そもそもDIとは…という話になると複雑になるので省きますが、Angular2においては「 Providerから提供されているインスタンスを特定の変数にInject（注入）する仕組み 」のことを指します。 Provider と Inject の2つの関係は重要なので頭に入れておきましょう。 Injectされる側 今回はFooServiceというクラスのインスタンスがDIで注入されるようにします。以下のコードではsay()メソッドを持つFooServiceクラスをexportしています。
2018年は、reduxとeslintとflowとwebpackを捨ててみようと思う - Qiita
2017年版と2018年版でwebアプリケーション作成時のreactの（マイ）ベストプラクティクスを以下のリポジトリに、まとめてみたので記事にしてみました。 react-best-practices https://github.com/wheatandcat/react-best-practices/tree/master ちなみにタイトルは、その過程で2018年版に削除したpackageです（理由は後述） github サンプルコードの内容は、ログイン/ログアウト + fetchした内容を画面に表示するだけです （ただのサンプルなので、実装はハリボテです） 2017年版 https://github.com/wheatandcat/react-best-practices/tree/master/2017years 2018年版 https://github.com/wheatandc
TypeScript 2.7.1 変更点 - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? こんにちはソウゾウ社な@vvakameです。 今回はちょっと遅くなってしまいました…。 TypeScript 2.7.1がアナウンスされました。 What's new in TypeScriptも更新されているようです。 破壊的変更もあるよ！ 変更点まとめ クラスのフィールドの初期化チェックをより厳密に行う Stricter class property checks --strictPropertyInitialization が追加 --strict に含まれる ? 無しの場合コンストラクタ内で初期化しないとダメ 変数末尾に ! を
Google Cloud Functions で Go を使おう！ - Qiita
注意 今 Google Cloud Functions (GCF) はまだベータで、まだアメリカしか使えなくて、まだNodeJSしか使えませんから、将来にいつかこの方法を使えないかもしれませんが、やってみよう！ はじめに 普通に、前に AWS Lambda や GCF みたいな Function as a Service (FaaS) と言うサービスでは Go を使えませんでした。でも、今月 AWS Lambda がアプデイトされて、今 Go を使えますが AWS があまりすきじゃないんだから GCF で Go を使う方法をしらべました。そして、このプロジェクトを見つかりました。 それは日本語で「グーグル・クラウド・ファンクションの非公式の Go のネイティブのランタイム」です。 この方法について この方法は初めてのリクエストで NodeJS のプロセスを完全に入れ替えて Go のプロセス
Angular 4 でマテリアルデザインを使う - Qiita
Angular 4 で、マテリアルデザインを適用してアプリを作ろうと思ったんだけど、無茶苦茶にハマったので、ちゃんと動く手順をメモしておく。 ハマった方法 私は、Angular の初心者なので、何から始めたらいいのかわからず、本に書いてある通り、quick-start のリポジトリを元に、material design の npm を追加しました。すると、バージョン問題が発生するので、ちゃんとバージョンを合わせたり、ライブラリのバージョンが違うので、ディレクトリが違うため、systems.config.js にライブラリを追記したりと、色々やりましたが、ライブラリ取得時の404エラーは治ることなく、数時間格闘しましたが無理なので、寝ました。 うまくいく方法 しかし、問題は、「quick-start」を元にしているからであって、複雑なことを減らすとうまくいくようです。（特に初心者はいきなり
webpack+babel環境でフロントエンドもES6開発 - Qiita
概要 昨今、JavaScriptコミュニティ界隈で騒がれているES6（ES2015）。クラスの導入など便利な機能が追加されてNode.jsでは既に導入されているというのに、フロントエンド環境（ブラウザ）上で利用できるようになるにはまだまだ先になりそうです。 そこで、フロントエンド環境でもES6を先取って開発する為の環境構築方法を記載します。 webpack + babel環境インストール ES6からブラウザが利用できるJavaScript(ES5)にコンパイル＝変換を行う為の環境を構築します。 今回はwebpackという依存性を解決するツールとBabelというJavaScriptコンパイラを利用します。 本記事はライブラリ管理ツールであるnpmを用いる為、Node.js環境を既に構築してある前提です。Node.js環境のインストール方法はこちら。 参考：nodebrew を用いた Node
TypeScriptを使ってReactのチュートリアルを進めると捗るかなと思った(実際捗る) - Qiita
この記事を書いたのは2016年のことでした。それから２年。 いつの間にか日本語チュートリアルが消えたし、結構未だにいいねを押してくださるので更新することにしました。(2018/2/2) reactの本家ドキュメントが日本語化されたため更新します。 (2019/4/11) はじめに タイトルみたいなことを考えていました。 実際補完が効くのはかなり有効でしたが、チュートリアル通りにいかない点が多々出ました。 結局色んな所を見るはめになりました でも総合してTypeScriptに向いているフレームワークだと思ったので詰まったところと解決方法を纏めてみることにしました TypeScript自体も学習コストが凄く低くて(ES2015 + 型)素敵だったのでいいと思いました。 追加で使うツール類 なし 今なら以下で試せます。 stackblitz オンライン版VisualStudioCode的な(コー
Flowtype と TypeScript で両方動きそうなコードを書く - Qiita
最初に知るべきこととして、Flow も TS も型システムのセマンティクスがよく似ている。 Redux & Typescript typed Actions with less keystrokes の 記事のかなり魔術的なコード、実は flow でも ts でもそのまま動いたりする。 自分は両方頻繁に使うので(flow寄りだが)、どういうコードを書くと手戻りが少ないか、考えながらコードを書いてるか書き出してみる。 お断り flowtype と typescript の、特に typescript 的なベストプラクティスに反する可能性がある。 完全にコンパチにするのは不可能だが、極力似たイディオムを使う。 どれも「極力頑張る」という感じで原則禁止というわけではない。大事なのは相互にコードを持ち出す時のポータビリティ。最悪なのは型がないという状態。 あと自分は TypeScript の非標準
Grunt止めて、mincer止めて、Brunchに乗り換えた - Qiita
web開発にはフロントエンドのビルドツールが必要。 coffeeスクリプトや、scssなどのメタ言語を使いたいならもちろんビルドをしてjsやcssに変換しないといけないし、もし仮にそれを使わなかったとしても、jsやcssの圧縮をするべきなので、ビルドをするソリューションあるべき。 (どっちみちビルドという工程をやることになるなら、メタ言語というものは使った方が良い。とおもう) grunt、mincer、brunch を使ってみて、結局brunchにしたので比較したことをメモしておく。 Grunt http://gruntjs.com/ gruntは、けっこう名前をよく聞くビルドツール。 処理そのものはプラグインとして組み込んでおき、色々な処理たちをパイプライン的に順番に並べる設定ファイルを書く。 ファイル変更の監視や、開発webサーバをgruntタスクとして立ち上げることもできるので、ru
Riot 3.7と4つの値 - Qiita
Riot 3.7にアップデートしたところ、今まで動いていたコードがうまく動かなくなってしまいました。 falsyな値 JavaScriptには、falsyな値（条件式に入れるとfalseとして処理される値）が7つあります1。 false null undefined 0 -0 ''（空文字列） NaN Riot 3.7では、このうち数値でない4つ（false、null、undefined、''（空文字列））の挙動が3.6以前と違ってきます。 実際にやってみた まずはこちらのPlunkrを御覧ください。ラジオボタンを生成して、onchangeでvalueをalertするようにしてあるだけですが、false、null、undefined、''の4つは、「on」という妙な値を表示します2。これは、Riotで値のないvalue属性を削除してしまっているからということです（Issue）。そして、va
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
値が整数かチェックする - Qiita
TypeScript 2.8 の Conditional Types について - Qiita
bower経由でインストールしたbootstrapをbrunchを用いて使えるようにする - Qiita
簡単！ JavaScriptで自動UIテスト (NodeJS, Selenium Webdriver, WebdriverIO, mocha, gulp) - Qiita
