Vue.jsが採用しているMVVMパターンとは【目的を重点に解説】
弊社で開催した勉強会"速い"Webアプリケーションの作り方でLTを行いましたので、内容をまとめました。テーマはデザインパターンの一つMVVMパターンです。 MVVMパターン 速いウェブアプリケーションについて調べていくと、MVVMパターンというデザインパターンをよく見ます。 代表的なところだと、Vue.jsがMVVMパターンです。 MVVMパターンって何だろうと調べると、このような図で説明
2019.10.4
JavaScript
【Software Design誌コラボ企画】『“速い”Webアプリケーションの作り方』を開催しました！
弊社テクニカルディレクターの羽山が『Software Design』10月号の特集記事を執筆させていただいたご縁で、 技術評論社様にもご協力いただき開催となったこの企画。 多数の方にご参加いただき、無事開催することができました。 登壇者の皆様、技術評論社の中田さん、 忙しい中参加していただいた皆様、ありがとうございました！ 左から合同会社レッドボックスの小川さん、スパイスファクトリー株式会
2019.10.2
SVGにCSSやJSを組み込んでローディングアニメーションを作成する！
今回のネタは「SVG」です！ 皆さん、SVG使ってますか？？ SVG形式の画像って、拡大しても荒くならないとか、ロゴとかによく使われているとか、そういったイメージを持っている方が多いかもしれません。 良く使われているjpgやpngなどの画像形式との比較を簡単にまとめるとこんな感じになります。 特徴 SVG（ベクター画像） jpgやpng（ラスター画像） 長所
2019.9.30
Alexaのカスタムスキルを作成してみよう
今回は Alexa のカスタムスキルを作成してバイオリズムを読み上げてもらおうと思います。 Alexa においてスキルとは様々な命令（アラーム、音楽再生、ニュース読み上げ等）の事で、 独自にスキルを開発することが可能です。ユーザーが独自に開発したスキルをカスタムスキルと呼びます。 実機が無くても JavaScript の知識があればブラウザ上でとても簡単に開発からテストまでできます。 バイオリ
2019.9.26
Software Design 2019年10月号「“速い” Webアプリケーションの作り方［フロントエンド編］」に寄稿しました
本日発売のSoftware Design 2019年10月号に私の執筆した記事が掲載されました。 進化の激しいフロントエンドの分野で、パフォーマンスに焦点をあてた特集記事「“速い” Webアプリケーションの作り方［フロントエンド編］」の第2章を担当しています。 フロントエンドのきらびやかさからはあえて一歩離れ、DOM/CSSOMの構築やレンダリングブロックの観点から、ブラウザの動作の仕
2019.9.18
Vue.jsプラグイン「v-ajax-form」を作りました
Vue.js流行ってますね。 弊社でもフロントエンドにVue.jsを使ったサービスが、いくつかリリースされています。 Vue.jsが必要になるWebサービスの要件では、 非同期通信処理を行うフォームを実装する場面が多々あると思います。 非同期通信処理をするためだけに、inputタグの一つ一つにVue.jsのインスタンスと同期する設定を施し、 さらに通信のためのコードを書くのは面倒だと感じていま
2019.8.29
javascriptで1ヵ月前を計算するにはmoment.jsで！
moment.js を使用してこれまで手間の掛かっていた、日付の加算・減算・フォーマットの指定などを簡単に扱える事に感動しました！ Moment.jsの公式 最小のコードで理解しやすく一瞬で出来る日付計算 下記に2020/03/31 (閏年)から1か月前を取得するコードをmoment.jsで書きました。 コードがシンプルで一目で何をしたいのかが理解しやすいです！ 従来の方法で、実装すると結構大
2019.7.30
Vue.jsの勉強会開催のお知らせ
2019/7/10(水)にVue.js未経験者・初心者の方を対象としたVue.jsの勉強会を開くことになりました。 JavaScriptは知っているけど、Vue.jsは触ったことがないという方でも安心して参加していただくことができます。 ぜひ下記イベント詳細ページをご覧ください！ https://raccoon-holdings.connpass.com/event/134213/ また、ハンズオ
2019.6.10
VuePressの使い方！記事一覧と前後投稿リンク付きブログの作成方法
今回はVuePressを使って、記事一覧と前後投稿リンク付きのブログサイトを作成してみましょう。 VuePressはVue.jsが使えるなら学習コストが低く、カスタマイズしやすい静的サイトジェネレータです。 サイトの公開にはFirebase Hostingを利用します。 はじめに 静的サイトジェネレータとは サイトの共通部分（ヘッダーやサイドバーなど）を自動的に自分が作成したページと結合し
2018.9.26
Visual Studio CodeでSlackに投稿する拡張機能をDIY
前回、VS Codeの拡張機能を作成する記事を書かせて頂きました。 今回はVS Code拡張機能作成の第二弾で、VS Codeの拡張機能＋SlackのAPIを使ってメッセージ投稿用の拡張機能を作成したいと思います。VS Codeには既にいくつかSlackの拡張機能が存在していますが、SlackのAPIの事も学びたいと考え今回拡張機能をDIYしようと思いました。 ※Slackの詳しい事については下記
2018.7.18
Visual Studio CodeがRSSリーダになる？VS Codeの拡張機能を作れば作業が捗る
プログラムを開発する際に必要となるテキストエディターはSublime Text、Atom、VS Code など、 高性能・高機能を持つものが増えてきました。 今回はその内の1つVS Codeの拡張機能(extension)を使用してRssを取得する機能を作成してみたいと思います。 ※記事中盤あたりにRssの取得の具体的な方法を載せています。 またVS Codeの公式ページ・概要をリンクして置きま
2018.6.8
JSでmarkdownからカスタマイズしたHTMLを生成する
普段仕事をしていて、「めんどくさい」と思ったことはありませんか？ そんなときこそプログラミングの出番です。 「めんどくさい」＝単純作業であることが多く、簡単なコードを書くとサクッと解決できる可能性が高いです。 私はたった今、このブログの執筆がめんどうくさいです。 どのように面倒くさいかというと少々古めのCGMを使っているため、次のような問題が起きています。 問題点 まと
2018.5.16