基礎から学ぶ Vue.js
どんな本？ 機能ごとに解説している Vue.js 入門書です。これからはじめる方にも、すでに Vue.js をお使いの方にも、楽しんでいただける内容になっています。 しっかり学習できる！ Vue.js は直感的に使える機能が多く、雰囲気で使ってしまいがちです。どんなメリット＆デメリットがあるかも解説しているため、しっかりと学習できます。 「Vue.js が楽しい！」ウェブフロントエンド界隈でこの言葉を耳にすることが増えました。 フロントエンドを取り巻く技術の進化によって、フロントエンドの役割は増え、フレームワークもより身近なものになっています。 この本では「Vue.js ってなに？」「フレームワークってなに？」という基礎概念と導入からプロダクトに役立つ情報までを体系的に解説しています。 これから JavaScript のフレームワークを始める方にはもちろん、すでに Vue.js をお使いの
結局FluxやらReduxやらって何なのか個人的なまとめ - Qiita
FluxやReduxがまた分からなくなったので、個人的なまとめをしました。 「これ間違ってるぜ！」ってのがあればコメント等でご指摘していただけると嬉しいです。 また何か気付きがあればちょこちょこ更新入れることもあります。 Fluxって？ Facebookが提唱しているアーキテクチャで、JavaScriptのデータの流れを分かりやすく整理するために使われます。 JavaScriptはイベントドリブンなため、様々なデータの流れがあり複雑化しやすくなっています。 そのためFluxではその流れを一方向にまとめよう！といったことをやっています。 Dispatcherを通して状態を変化させていく様子はデザインパターンのオブザーバーパターンと同じような形ですね。 基本的には以下の様な流れです。 またユーザーの行動によってViewから新たにActionを発行し、Dispatcherへと伝搬させることも出来
Fluxとはなんなのか - Qiita
今までReduxでのアプリケーションの開発やシンプルなFluxのコードの素振りはしてきました。 なんとなくアーキテクチャについての考え方や仕組みをコード上では確認できました。 がしかし!!もっと根本からどういった思想で何が美味しいのかを調べたいと思いました。そんな思いをまとめた記事になります。 MV*の何がだめだったのか MVCやMVVMなどいろんな概念があります。 MVCとMVVMの違いは図のような感じです。 MVC MVVM 一方方向なのか双方向かの違いだけですが、個人的には仲間だと思っているのでここではMVVMを中心に見ていきます。 ViewModelではViewから受け取ったデータをModelが受け取れる形に加工してModelに送ります。 それまでjQueryとAjaxを利用して作成されてきたアプリケーションはModel(ロジック)層とView層に分離させる必要がありました。 Vi
Vue.js + vuexによるToDoアプリケーションの実装
<?php public function index() { return response(Item::query()->where('checked', false)->get()); } これで、未完了(checkd=false)のアイテムだけを取得できるようになりました。tests/Feature/ItemTest.php にも機能テストを追加しておきましょう。 <?php public function testIndexReturnsOnlyUncheckedItems() { $item = Item::query()->find(1); $item->checked = 1; $item->save(); $response = $this->get('/api/items'); $response->assertStatus(200); $this->assertCou
Vuex とは何か？ | Vuex
注意 これは、Vue 3 で動作する Vuex 4 のためのドキュメントです。Vue 2 で動作する Vuex 3 のドキュメントをお探しの方は、こちらをご覧ください。 Vuex は Vue.js アプリケーションのための 状態管理パターン + ライブラリです。 これは予測可能な方法によってのみ状態の変異を行うというルールを保証し、アプリケーション内の全てのコンポーネントのための集中型のストアとして機能します。 "状態管理パターン"とはなんですか？ #単純な Vue で作られたカウンターアプリをみてみましょう: const Counter = { // state data () { return { count: 0 } }, // view template: ` <div>{{ count }}</div> `, // actions methods: { increment ()
Vuex でショッピングカートを実装できる無料コース「Vuex for Everyone」を受講した - kakakakakku blog
Vue School の無料コース「Vuex for Everyone」を受講した．Vue.js 初心者でも受講できるレベルになっているし，今まで Vue.js を書いたことはあるけど，Vuex はまだ使ったことがないという人にもオススメできる．進め方にもよるけど，写経するとしても2,3時間あれば終わる． Vuex for Everyone 今回受講した「Vuex for Everyone」の題材は「shopping-cart」で，ステップバイステップに実装を進めていく．動作確認をしながら，機能を追加したり，リファクタリングをしたりする． vueschool.io 動画を見るとわかるけど，とにかく実装スピードが早いので，写経する場合は何度も戻して見直す必要がある．ただ困ったときは Vue School の GitHub にセッションごとにコミットされているので，それを活用すればオッケー．
九大箱崎キャンパス火災 元院生の男性 放火し自殺か 身元判明、福岡東署｜【西日本新聞】
福岡市東区箱崎６丁目の九州大箱崎キャンパスで７日朝に研究室を焼いた火災で、福岡東署は１５日、焼け跡から見つかった遺体は研究室に出入りしていた同区の職業不詳の男性（４６）と発表した。署によると、死因はやけどによる火傷死。男性が放火、自殺したとみて調べている。 署は、現住建造物放火か、非現住建造物放火の疑いで、男性を容疑者死亡のまま書類送検することも視野に入れている。 男性は九大法学部の卒業生。署によると、研究室の内側からテープで目張りがされた上、遺体の近くに灯油用のポリタンクやライターがあった。自宅からは、９月上旬にポリタンクを購入した際のレシートも見つかったという。 九大によると、男性は大学院に進学し、２０１０年の退学後も研究室を使用。大学院は、９月末に同市西区の伊都キャンパスへ移転を完了する予定で、男性に再三退去を求めていた。 ◇ ◇ ■困窮、研究の場も無く 「経済破綻に直面」
小2の男の子が、がん患者のために髪を伸ばし続けて立派な髪を提供…かっこよすぎるし、支援の方法を知るきっかけにも
ジンジェオ/Jin Jeong @_JinJeong_ 「いつか誰かのために」小児がんの子供達へ 石田丞くん(7)自ら伸ばし続けた髪を寄付。 色んな形の手助けがあるのだと勉強になった。 動画で見たけど、しっかり手入れされた美しい髪を持つ少年だった。 手入れ大変だったんだろうな。 youtu.be/_4SpUz6p-sw 2018-09-14 04:57:49 あきと（半熟） @Akit_ter たまたま見てたニュースで、7歳の男の子が3年間伸ばした髪を切る瞬間をやってた 病気の子のカツラのためだってさ…短髪の人は分からないかもしれないけど、長いと手入れどころか普段の洗髪だけだってものすごい大変なのに、もうなんて言ったらいいか…(涙腺ゆるい) pic.twitter.com/M1vIvJu4TH 2018-09-08 17:32:32
Windows 10 に posh-git をインストールする - しばやん雑記
これまでは GitHub for Windows に付いてきた posh-git を使ってきたのですが、GitHub for Desktop になってからは使えなくなってしまったので手動でインストールしました。検索したら git clone するものばかりだったので、自分用メモとして残します。 最新のインストール方法は posh-git の README に書いてあるので、これの通り実行します。 PowerShell Gallery からインストール出来るようになったのは非常に楽ですね。 Git for Windows は当然ながら必要なので、それはあらかじめ入れておく必要はあります。 自分の環境では既に Docker を入れていたからなのか、特に NuGet のインストールを要求されることなく、Install-Module だけで問題なくインストールすることが出来ました。 Install
Git - Book
The entire Pro Git book, written by Scott Chacon and Ben Straub and published by Apress, is available here. All content is licensed under the Creative Commons Attribution Non Commercial Share Alike 3.0 license. Print versions of the book are available on Amazon.com. The version found here has been updated with corrections and additions from hundreds of contributors. If you see an error or have a s
Git - 環境変数
1. 使い始める 1.1 バージョン管理に関して 1.2 Git略史 1.3 Gitの基本 1.4 コマンドライン 1.5 Gitのインストール 1.6 最初のGitの構成 1.7 ヘルプを見る 1.8 まとめ 2. Git の基本 2.1 Git リポジトリの取得 2.2 変更内容のリポジトリへの記録 2.3 コミット履歴の閲覧 2.4 作業のやり直し 2.5 リモートでの作業 2.6 タグ 2.7 Git エイリアス 2.8 まとめ 3. Git のブランチ機能 3.1 ブランチとは 3.2 ブランチとマージの基本 3.3 ブランチの管理 3.4 ブランチでの作業の流れ 3.5 リモートブランチ 3.6 リベース 3.7 まとめ 4. Gitサーバー 4.1 プロトコル 4.2 サーバー用の Git の取得 4.3 SSH 公開鍵の作成 4.4 サーバーのセットアップ 4.5 Git
無料でタスク管理ツール「Trello」をアジャイル開発用のツールにできる「Corrello」を使ってみた
タスク管理ツールの「Trello」は1つのタスクを1枚のカードとすることで「ToDoリスト」のような使い方ができます。しかし、アジャイル開発のような現場では、「ToDoリスト」としての使い方だけでなく、短い期間で滞りなくタスクを実施するために、作業の大きさをストーリーポイントと呼ばれる数値で表したり、複数のタスクが1人に集中しないようにWIPの上限を決めることがあります。「Corrello」を使うと、Trelloをアジャイル開発用に拡張でき、「ストーリーポイント」や「WIP」を設定できるようになるとのこと。実際に使って試してみました。 Agile tools powerup for Trello by Corrello https://getcorrello.com/AgileTools カードを整理する感覚でToDoリストやメモ帳、複数人でのタスク管理までこなせてしまう「Trello」の
「近代化Redmine」ことOpenProjectでスクラム開発のプロジェクト管理 - Qiita
「Redmineの代替になるようなツールないかな…」と思って試していた「OpenProject」が良い感じだったので、使い方等を簡単にまとめてみました。ご参考になれば幸いです。 OpenProjectとは 「MS ProjectのOSSクローンでしょ？」って思った方もいると思いますが1、あれとはまったく別のツールです。誤解を恐れず言うなら「近代化改修されたRedmine」2という感じのプロダクトで、百聞は一見になんとやら、こちらを御覧ください。 詳しくは、こちらの公式動画がよくまとまっています。 https://vimeo.com/163426858 こんな人におすすめ 今までRedmine + Backlogプラグインで頑張ってた人 スクラム開発用に「かんばん」と「バックログ」が欲しい プロジェクト管理用に「ガントチャート」も欲しい でも、Redmineにプラグインを入れる苦行は回避した
長く使えるプロジェクト管理ツール厳選レポート2017
こんにちは。デザイナーのいしかわです。プロジェクト管理ツールマニアです。 理想的なプロジェクトマネジメントに向けて、これまでにプロジェクト・タスク・情報共有・進捗管理などに関するツールを30以上試してきました。その中から特におすすめしたい厳選ツールを7つ紹介したいと思います。 プロジェクト管理ツールを乗り換えるのは大変なので、できるだけ長く使い続けられるものを見つけたい！という気持ちで本気で評価しましたが、あくまでも自分で使ってみた感想になるので、人によっては合う合わないがあると思います。プロジェクト管理ツールの選定の参考になれば嬉しいです。 ※本エントリー更新時点での情報になりますので、機能や価格などの情報は異なる可能性があります。 ※2016/2/21 Asanaを追加しました ※2016/9/4 各ツールの最新情報をチェックし内容を更新しました ※2017/1/13 各ツールの最新
webpackでejsを使い、共通要素をインクルードして効率的にやりたいよね。
数ページのサイトとはいえテンプレ化はしたい、includeを使うと共通要素を外部ファイル化できて効率いいよね。サンプルとしてファイルは以下におてます。 https://github.com/shigekitakeguchi/yarn-webpack-ejs ちょっとした、例えばブランドサイトとかキャンペーンサイト、小規模な企業や組織、お店のサイトというと構成によっては1ページってこともあるけど数ページから20ページくらいの規模になると思う。 いやいやもっとあるよってことになるかもしれないけど今回紹介しようと思うやり方は数ページから20ページくらいの規模のものが便利なんじゃないかな。 それ以上のサイトになるともうちょっと本格的な静的サイトジェネレーターとかを検討したほうが良いと思う。 数ページとはいえヘッダーやフッター、あとmeta要素やナビゲーション、細かいところでいうとGoogle An
this - JavaScript | MDN
JavaScript チュートリアル 初級編 JavaScript の基礎 JavaScript の第一歩 JavaScript の構成要素 JavaScript オブジェクト入門 JavaScript ガイド 入門編 文法とデータ型 制御フローとエラー処理 ループとイテレーター 関数 式と演算子 数と日付 テキスト処理 正規表現 インデックス付きコレクション キー付きコレクション オブジェクトを利用する Using classes プロミスの使用 JavaScript 型付き配列 イテレーターとジェネレーター メタプログラミング JavaScript モジュール 中級編 クライアントサイド JavaScript フレームワーク クライアントサイド Web API Language overview JavaScript のデータ構造 等値比較と同一性 プロパティの列挙可能性と所有権 クロ
イマドキのJavaScriptの書き方2018
PySpa統合思念体です。これからJavaScriptを覚えるなら、「この書き方はもう覚えなくていい」（よりよい代替がある）というものを集めてみました。 ES6以降の難しさは、旧来の書き方にプラスが増えただけではなく、大量の「旧来の書き方は間違いを誘発しやすいから非推奨」というものを作り出した点にあります。5年前、10年前の本やウェブがあまり役に立たちません。なお、書き方が複数あるものは、好き嫌いは当然あると思いますが、あえて過激に1つに絞っているところもあります。なお、これはこれから新規に学ぶ人が、過去のドキュメントやコードを見た時に古い情報を選別するためのまとめです。残念ながら、今時の書き方のみで構成された書籍などが存在しないからです。 たぶん明示的に書いていても読み飛ばす人はいると思いますが、すでに書いている人向けではありません。これから書くコードをこのスタイルにしていくのは別にいい
jQueryのパフォーマンスを下げるアンチパターンに関する超意訳 - Qiita
以下のスライドを意訳したものです。Compress周りについては触れていません。「いやいや、最新の書き方だともっと良い書き方があるんだよ！」という方のコメントをお待ちしております！ http://www.slideshare.net/paul.irish/perfcompression クエリをキャッシュする // 悪い例 var id = $("#content").data("id"); var itemId = $("#content").data("item-id"); // 良い例 var content = $("#content") var id = content.data("id"); var itemId = content.data("item-id"); // 悪い例 $.each(reallyLongArray, function(count, item) { v
Backbone.js
Backbone's only hard dependency is Underscore.js ( >= 1.8.3). For RESTful persistence and DOM manipulation with Backbone.View, include jQuery ( >= 1.11.0). (Mimics of the Underscore and jQuery APIs, such as Lodash and Zepto, will also tend to work, with varying degrees of compatibility.) Getting Started When working on a web application that involves a lot of JavaScript, one of the first things yo
Handlebars
Semantic templates Handlebars provides the power necessary to let you build semantic templates effectively with no frustration. Mustache-compatible Handlebars is largely compatible with Mustache templates. In most cases it is possible to swap out Mustache with Handlebars and continue using your current templates. Fast execution Handlebars compiles templates into JavaScript functions. This makes th
スタイルガイドジェネレーターの「Fractal」がかなり良さそう
ずっと自分好みのスタイルガイドジェネレーターを探していたんですが、ようやく見つけました！「Fractal 」というツールで、かなり良さそうなのでご紹介します。 初級編、中級編の2回に分けて、初級編ではインストールと初級設定からウェブUIの起動までを、中級編ではコンポーネントのより細かい設定などについてご紹介します。公式ドキュメントは初めてだとわかりづらいところもあったので、その辺を補う形でまとめてみたいと思います。 ※先日、スタイルガイドとパターンライブラリの違いについてまとめましたが、スタイルガイドやパターンライブラリを自動生成するツールは「スタイルガイドジェネレーター」というのが一般的なようです。「パターンライブラリジェネレーター」とは呼ばないみたいですね。 では早速、「Fractalのはじめの一歩」的な感じで行ってみましょう！ Fractalとは まずは、ざっくりとFractalをご
スタイルガイドとパターンライブラリの違い
最近、パターンライブラリの作成ツールを探していて「Fractal」というツールを試しています。で、ふと「スタイルガイドとパターンライブラリの違いってなんだっけ？」という疑問が湧いたので、ちょっと整理してみました。ちなみに、どっちがいいかを書いているわけではないです。 特にウェブ向けのものではスタイルガイドもパターンライブラリもほぼ同じ意味で使われていることが多い気がしますが、あえてスタイルガイドとパターンライブラリを違ったものとして定義するとどうなるか、まとめてみます。 スタイルガイド 企業や組織のブランドイメージを統一するためにまとめられたガイドライン ロゴの使い方、配色パターン、タイポグラフィなどのビジュアルデザインを定義する より総括的なものだと文章のトーン&マナーなどのコミュニケーションデザインを定義する場合もある UIパターンやコンポーネントのデザイン一覧（パターンライブラリ）を
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Windows 10 RS4(1803) でサポートされた Linux コマンド
SSH-AGENT (1)
九州大学で7日に起きた火災 死亡した容疑者男性が明かしていた内心 - ライブドアニュース
GitHub - juno/bem-methodology-ja: Japanese Translations of BEM-Methodology (BEMの日本語訳) http://bem.info/method/
https://www.freia.jp/taka/blog/windows-native-ssh-client/index.html
Nostromo | Digital Product Management
Online Agile Project Management Software | Zoho Sprints
Burndown Chart
Which is the best tool so far for Agile Project Management?
Hygger: Project Management Software & Tools for Companies
Doing sprints with Asana using custom field estimates 🔥📉 - Screenful Blog
Taiga.io
JavaScript テンプレートエンジン vs DOM 直接操作
Fractal