フロントエンド | SiTest (サイテスト) ブログ

メニューボタン閉じるボタン

最新情報を発信する
SiTest ブログ

コピペだけ! Vue.js を最短で動かして入門しよう

Vueアイコン

AngularJS などに並ぶ JavaScript フレームワークの1つに Vue.js があります。
Vue.js はバインディングあり・軽量・低学習コスト・拡張可能な MVVMフレームワークです。

手っ取り早く理解するために、コピペで動く7つのサンプルを用意して、各サンプルに対して説明します。ブラウザとテキストエディタがあれば動きますので、入門のハードルを極力下げました。

なにはともあれ、動くサンプルを見て、最短で Vue.js を動かしてみましょう!

続きを読む >

Nuxt.js を使って手軽にサーバーサイドレンダリングを試してみよう!

モダンな JavaScript フレームワークでは、サーバーサイドレンダリングをサポートしていることが多いですが、そのために別途モジュールをインストールしたり設定したりする必要があります。

「サーバーサイドレンダリングを試してみたい!でもなにか難しそうだから止めておこう」と思ったことはないですか?

なにか簡単にサーバーサイドレンダリングを試す方法はないだろうかと探していたところ、「Nuxt.js」に出会いました。
そこで今回は Nuxt.js を使って、手軽にサーバーサイドレンダリングを試してみたいと思います。

続きを読む >

最低限の CSS のみで Masonry のようなグリッドレイアウトを組む方法

今回は、高さの異なるコンテンツを隙間なく敷き詰めるレイアウトを CSS だけで実現する方法をご紹介します。
Javascript や CSS のライブラリは使わず、ピュア CSS のみで手軽に実装してみました。

続きを読む >

必要なものはこれだけ! Vuepack だけで簡易アプリを作ってみた

みなさん、Vue.js は使っていますか?
Web サイトに一部だけ取り入れることが可能だったり、学習コストが低かったりという点で、JavaScript フレームワークの中では比較的とっつきやすいものだと思います。
とは言いながらも、まだまだ試してみるのに及び腰、または「Vue で何をどこまで実装できるものなのかイメージが湧かない」という方もいらっしゃるかもしれません。

そこで今回は、「Vuepack」という、 Web サイトをご紹介し、実際に Vue のコンポーネントを使った簡単なアプリを作成してみたいと思います。

続きを読む >

「Can I use」で HTML5 や CSS3 の各機能について対応ブラウザを調べよう

「Can I use」で HTML5 や CSS3 の各機能について対応ブラウザを調べよう

こんにちは、プロダクト開発チーム エンジニアの森永です。

最近は本ブログでも紹介した FlexboxCSS Grid Layout のような新しい機能など、サイト作成やアプリ開発などWebを取り巻く HTML5 や CSS3 などの状況は日々変わりつつあります。

しかしながら、ブラウザによっては対応していない HTML5 や CSS3 の機能もいろいろあり、一部のブラウザで見えない、動作しないといった現象も多々あるのが現状です。特に最近では PC用ブラウザでは Internet Explorer 、スマートフォン用ブラウザでは Safari でこのようなケースに遭遇することが多いです。

続きを読む >

リニューアルされたサイト作成サービス Google Sites を試してみる

リニューアルされたサイト作成サービス Google Sites を試してみる

こんにちは、プロダクト開発チーム エンジニアの森永です。

ビジネスユースでサイト制作を行う場合、制作会社で企画、サイトデザインを元にしてコーディングを行っていくというケースが多いかと思います。
その一方で、パーソナルユースを中心に WixJimdoYahoo! ジオシティーズ など無料Webサイト作成サービスやCMSサービスを利用してサイトを作成する方もいらっしゃるかと思います。HTMLの知識などは特に必要とせず、デザインの選択やパーツの配置などをアイコンのクリックやドラッグアンドドロップなどで簡単に行うことができます。

続きを読む >

Firebase を使ってリアルタイムウェブアプリを作ってみる

前回の記事では、Firebase を使って静的なサイトを公開する方法をご紹介しました。
今回は、Firebase の目玉機能の一つである Realtime Database を使って、簡単なチャットアプリを作ってみようと思います。

続きを読む >

Blockly1.0 って何?教育向けビジュアルプログラミングエディタを作ってみよう

Blockly トップ画面

このところ、教育とプログラミングについての話はよくでてきますね。

小学校でプログラミング教育が必修化するニュースは知ってる方も多いと思います。
それに影響をうけ、さまざまなビジュアルプログラミング言語がでてきました。

ビジュアルプログラミング言語とは視覚的なオブジェクトでプログラミングするプログラミング言語です。

Scratch (スクラッチ), MOONBlock (ムーンブロック), VISCUIT (ビスケット)など、聞いたことあるかたも多いと思います。

今回、紹介する Blockly (ブロックリー)もその1つです。

それでは、 Blockly の概要からビジュアルプログラミングエディタを作っているところまで見ていきましょう。

続きを読む >

Vuetify.js を使ってマテリアルデザインに挑戦しよう!

「マテリアルデザイン」という言葉を Google が発表してから既に3年が経過しましたが、みなさんは実際にマテリアルデザインを使ったことはありますか?

今ではかなり浸透しており、メジャーな JavaScript のフレームワークには、マテリアルデザインをベースにした CSS フレームワークが登場しています。(React.js はフレームワークというよりライブラリですが)
 ・ Angular : Angular Material
 ・ React.js : Material-UI
 ・ Vue.js : Vuetify.js

マテリアルデザインのルールに則れば、直感的で使いやすい UI が作れる!
そこで今回は、 Vue.js の CSS フレームワークのひとつ Vuetify.js を使って、ゼロからマテリアルデザインを適用していきたいと思います。

続きを読む >

環境構築不要!最小構成で理解する Riot 超入門編

Riotアイキャッチ画像

コンポーネント指向フレームワークである Riot を最近良く耳にします。

Riot は、比較的容易なフレームワークです。
でも、ちょっと試したいだけで環境構築するのは手間ですよね。

この記事では、簡単に試せるように、
テキストエディタとブラウザさえあれば動作する構成にしました。

Riot をスムーズに理解するために、最小構成のサンプルの HTML を作成し、
そこに徐々に肉付けして、 Riot の様々な機能について説明します。

それでは、 Riot を見ていきましょう!
続きを読む >

1 2 3 4

03-6441-3336

いますぐ無料で
お試しください。

SiTestの革新的な機能を、
1か月間無料でお試しいただけます。

お名前【必須】
メールアドレス【必須】
電話番号【必須】

利用規約はこちら