フレームワークの記事一覧
Storybook - フロントエンド開発者向けUIコンポーネント学習サイト
フロントエンドで利用できる技術が多様化しており、それらの使い方を効率的に学ぶ手段が欲しくなっているはずです。大事なのはその場で実行したりして確認できることで、それによって敷居が大幅に下がるはずです。今回紹介するStorybookは各種フロントエンドフレームワークに対応した、UIコンポーネントエクスプローラーです。## ...
Pyxel - Pythonでレトロゲームを作ろう
どれだけゲーム機が高度に、高性能化したとしても、レトロゲームの魅力はなくなりません。シンプルなUIだけに開発に取り組みやすく、ゲーム自体も単純なものが多いので誰でもすぐに遊びはじめられます。今回はそんなレトロゲームを開発するSDKとして、Pyxelを紹介します。利用する言語はもちろんPythonです。## Pyxelの...
Fiber - Go言語製のWebフレームワーク
ちょっとしたWebアプリケーションを作る際に、よくExpressを使います。仕組みがシンプルで分かりやすく、静的ファイルやJSONの取り扱いなど拡張性も考えられているのが便利な点です。そんなExpressにインスパイアされて作られたGo言語のWebフレームワークがFiberです。## Fiberの使い方例えばHello...
Wails - GoとWeb技術でデスクトップアプリケーション開発
Electronはnodeを使ってJavaScriptでデスクトップアプリケーションを開発できます。UI部分は致し方ないとしても、デスクトップ側の機能については別な言語を使いたいと言う方もいるのではないでしょうか。もしあなたがGoが好きなのであれば、Wailsを使ってみましょう。GoとWebテクノロジーでデスクトップア...
Kagura - RustだけでWebアプリケーションを開発するフレームワーク
WebAssemblyを開発する際の最も基本的な言語となるのがRustです。WebAssemblyでは元々DOMやネットワーク操作ができませんが、Rustのwasm-bindingによってWebブラウザ側のAPIを実行できるようになりました。その結果、WebAssembly活用の幅が広がったと言えます。Kaguraはそ...
Maizzle - HTMLメールを作るためのフレームワーク
HTMLメールを使うのも当たり前になってきました。しかし、レスポンシブなメールをきちんとメール向けに仕様に合わせて送らないとレイアウトが崩れてしまったりします。それではせっかく目立つHTMLメールを使っているのに勿体ないです。そこで使ってみたいのがMaizzleです。HTMLメールを作るためのフレームワークです。## ...
Site.js - 静的/動的サイトまでこなせるJavaScriptフレームワーク
最近は静的サイトフレームワークが多数出てきています。確かに便利なのですが、拡張していく中でダイナミックな部分が欲しくなることもあるでしょう。そんな時に別途APIサーバを立てるのも面倒です。そこで使ってみたいのがSite.jsです。静的サイト開発から動的サイトまでこなせるJavaScriptフレームワークです。## Si...
Pakyow - デザインファーストなフレームワーク
Webフレームワークというとプログラマ向けのものが殆どです。プログラマにとって使いやすくともデザイナーにとって使いやすいとは限らず、なかなか普及しないケースもあります。そこで注目したいのがPakyowです。デザインファーストなWebフレームワークです。## Pakyowの使い方例えばこんな感じでコンテンツを作ります。と...
natUIve - UIコンポーネントが多数揃ったCSSフレームワーク
WebのUIフレームワークとしてはBootstrap一強が続いています。しかしフレームワークとしての癖もあり、Webデザイナーとしては自分のやりたいデザインが実現しづらいかも知れません。そんな時には他のUIフレームワークに触れてみても良さそうです。今回はnatUIveを紹介します。デザインフレームワークとしてはもちろん...
Vugu - Go言語でVueのようにWebアプリケーション（WASMで）が開発できるフレームワーク
これは来るんじゃないだろうか…。Go1.11でJavaScript APIが実装され、WebAssemblyからDOMやネットワークにアクセスできるようになりました。しかし、そのコードは通常のGoのコードと異なり、JavaScriptと比べても分かりづらいものでした。しかし将来的にうまくラッピングしたライブラリが出るだ...
minstyle.io - ミニマムながら十分なCSSフレームワーク
Webデザインを行う際に、スクラッチではなく何らかのフレームワークをベースにするケースが増えています。そんな時、あまり多機能なものを使うとデザイン全体が引きずられてしまったり、ちょっとしたカスタマイズがうまくいかなかったりします。そこで使ってみたいのがあまり多機能ではなく、ちょっと気の利いたシンプルなCSSフレームワー...
PatternFly - Red Hat製のWeb UIフレームワーク
HTMLは自由度が高い反面、何でも自分でイチから作らなければならないイメージがあります。そのためUI、JavaScriptフレームワークは貴重です。それらを使うことで効率を大幅に高められます。今回紹介するPatternFlyはUIフレームワークで、Red Hat社によって開発されています。## PatternFlyの使...
Maji - ハイブリッドアプリ開発のベストプラクティスを提供
ハイブリッドアプリと言うのはHTML5でUI、ロジックを作成したスマートフォンアプリです。ネイティブとの繋ぎ込みはCordovaなどの技術を使います。かつては遅いと言った問題がありましたが、今はほぼ分からないくらいの速度で実行できます。そんなハイブリッドアプリは画面遷移やUIなどを自分で用意する必要があります。ここが敷...
Stimulus - 素のHTMLを活かしたBasecamp製のJavaScriptフレームワーク
最近のフロントエンドではReact/Angular/VueなどVirualDOMを使ったライブラリが増えています。確かに便利なのですが、それぞれ独自のHTMLタグを使うので学習コストが大きくなります。プログラマは良くとも、デザイナーでは難しいこともあるでしょう。そこで使ってみたいのがStimulusです。既存のHTML...
Marko - eBay製。サーバ/クライアント両方に対応したビューフレームワーク
Reactが導入したVirtualDOMという概念はあっという間に他のフレームワークにも影響を及ぼしていきました。最近では Webコンポーネントにも関連して、小さなパッケージを組み合わせる方法が主流になっています。今回紹介するMarkoもそんなフレームワークの一つです。特に高速な動作がポイントになっています。## Ma...
WhitestormJS - 物理エンジンを備えた3D Webアプリケーションフレームワーク
Web上で3Dを表現するのはコツがいります。THREE.jsのような専用のライブラリもありますので、そうしたものを使うのが良いでしょう。そこに物理演算を追加するとさらに込み入った難しさが出てきます。今回紹介するオープンソース・ソフトウェアはWhitestormJS、物理エンジンを備えた3D Webアプリケーションフレー...
PurpleJS - JVM上で動くサーバサイドJavaScriptフレームワーク
Node.jsはバージョンアップも早く、開発者としては追従するのに苦労します。新しい機能が増える一方、安定と不安定を繰り返す可能性もあり、採用を躊躇してしまう人もいるのではないでしょうか。そんな方々に使ってみて欲しいのがPurpleJSです。JVM上で動くJavaScriptアプリケーションフレームワークです。## P...
basis.js - シングルページアプリケーション用フレームワーク
SPA（シングルページアプリケーション）では一つのページの中ですべてのHTMLを記述したくなりますが、それでは見通しが非常に悪くなります。SPAとはいえ、テンプレートを使って分割したり、機能を明確に分ける方が良いでしょう。そこで使ってみたいのがbasis.jsです。## basis.jsの使い方basis.jsのコード...
React Server - Reactの開発をはじめるのに最適なベースを生成
Reactを触りはじめて思うのが、フレームワークのスタンダードが確立されていないということです。React自体はViewなので、それ以外の部分やアプリケーションサーバをどうすべきかといった部分が抜け落ちています。そうした点で迷っている方はReact Serverを使ってみてはいかがでしょう。React Serverを使...
Weex - アリババ製のモバイルUIフレームワーク
スマートフォン用にWebサイトであったり、ハイブリッドアプリを提供する際には専門のUIフレームワークが欠かせません。デスクトップWebブラウザ向けとは異なるUI/UXが求められるためです。しかしそういった実装は簡単ではありません。そこでUIフレームワークが重宝します。今回はアリババ社が作ったWeexを紹介します。## ...