デザインに活かせるフレームワーク20｜金 成奎
久しぶりのnote投稿です。今回は自分の勉強がてら、UX・情報設計・アジャイル開発など、デザインに関わる様々な局面で知っておくと役立つフレームワークを集めてみました。 有名なものからデザイン以外にも使えそうなものまで幅広く選んでいますので、気になるものがあれば改めて実作業に生かすなり、掘り下げて研究するなり、資料に生かすなりしてもらえると良いのではないかと思います。 （ちなみにここでいう「フレームワーク」とは共通して用いることのできる考え方や思考の型や枠のようなもので、いわゆるCSSフレームワークの類ではありませんので、その点ご了承ください） 1.UXの5段階モデル まずは有名なUXの5段階モデル。アメリカのUXデザイナーであるJesse James Garrett 氏が著書『Elements of User Experience（ウェブ戦略としての「ユーザーエクスペリエンス」）』にて提唱
State of JavaScript 2020：いちばん利用率の高いJSフレームワーク、フロントエンドがReact、バックエンドはExpress、テストにはJest。2万4000人の調査結果
IT技術者のSacha Greif氏とRaphaël Benitte氏が、JavaScriptに興味を持つ世界中のIT技術者約2万4000人にアンケートを取り、結果をまとめたWebサイト「State of JavaScript 2020」が公開されています。 JavaScriptの最新のシンタックスや命令がどれくらい使われているか、フロントエンドやバックエンド、ビルドツールなど分野ごとにさまざまなJavaScript関連の技術はどれくらい興味を持たれているかなど、アンケート結果を基にして、満足度（Satisfaction）、興味（Interest）、利用率（Usage）、認知度（Awareness）などを計算。それぞれについてランキングを作成しています。 それぞれの値は次の式で計算されると説明されています。それぞれの項目にはアンケートの回答数が入ります。 満足度＝またこの技術を使いたい／（
CSSを書くのが劇的に楽になる！ユーティリティファーストのCSSフレームワーク「Tailwind CSS」
日本でも、Tailwind CSSを使用する人が増えてきましたね。 フロントエンドの開発者がTailwind CSSを実際に使い始めたら、CSSを書くのが劇的に楽になった話を紹介します。 How I Stopped to Write CSS by Luca Spezzano 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに Tailwind CSSとは カードコンポーネントで実装の比較 BootstrapとTailwind CSSの比較 Bootstrapがそんなに恋しいですか？ BootstrapとTailwind CSSのどちらを使えばよいか？ CSSにかかる時間はかなり少なくなりました はじめに 私はCSSアーキテクチャにフォーカスしたフロントエンド開発者として、コードを書くために最高の方法を使いたいと思っています
新QiitaでReactをやめてhyperappを採用した背景 - Qiita
12/1 に Qiita のトップページをリニューアルしました。これまで React を使っていましたが、それをやめて hyperapp を採用しました。まわりを見てもあまり採用事例が見当たらないので、この記事では一体なんで今をときめく React ではなく hyperapp を選択したのか、どういうところが魅力的なのかについて プレゼンテーション層を実装するためのツールとして 学習コスト の観点から書きたいと思います。なおこの記事に書かれていることは全て個人の感想であり、はっきりいって個人の日記レベルです。 それと hyperapp の開発者が社内にいるという事情もあるので、そこら辺さっぴいて読んでください。 TL;DR プレゼンテーション層を実装するためのツールとして React は機能過多だし、機能不足 hyperapp は過不足ない 学習コスト 仮想 DOM は学ぶ価値のある知識
中〜大規模なSPAを開発する時に抑えておきたい10のポイント - KAYAC engineers' blog
こんにちは。カヤックのSPAおじさんこと島津です。 今年はReactとVueを使ったSPA開発プロジェクトをいくつか担当してきたので、そこで得た知見の総まとめをしたいと思います。 ※ ここでのSPAとはすべてのViewをJavaScriptで書くWebアプリのことを指します。サーバーサイドMVCを主軸にViewの一部をReactやVueで書くこともありますが、今回はそのケースではありません。 1. フレームワーク 数年前とは事情が変わり、 フレームワークを使わないという選択肢は昨今だともう無いでしょう。丸腰のJSでDOMを弄っていた時代に比べると、かなり安定したフロントエンドの開発ができるようになりました。 人気フレームワークの台頭になっている React + Redux Vue + Vuex をこの1年使ってきましたが、書き方は違えどFluxアーキテクチャ・仮想DOM・コンポーネント志向
Webアプリケーションフレームワーク導入時に考慮すべき22の観点 - Qiita
本記事では、 チームによる持続的に変更可能なWebアプリケーションの開発を目標に、フレームワーク導入時に考慮すべき22の観点を紹介する。 フレームワークによって特徴は異なるが、本番導入にあたって、考慮すべきポイントはあまり変わらないので、極力フレームワーク1に依存しすぎないよう配慮する。また、話をシンプルにするため、REST APIを提供するアプリケーションを題材とする。 前提 ソフトウェアのエントロピー ソフトウェアがエントロピー増大の法則を避けられないことを、体感している開発者は多いだろう2。普通にアプリケーション開発を続けると、開発スピードは鈍化し、品質は低下してバグが増え、開発者からは技術的負債への怨嗟の声が聞かれるようになる。エントロピー増大というフォースは極めて強力で、意思を持って立ち向かわなければ、容易にダークサイドに堕ちてしまう。 関心事の分離 大規模Webアプリケーション
ゼロから学ぶ！ Single Page Applicationの特徴と主なフレームワーク5選
本連載「モダンなフロントエンド開発者になるためのSPA超入門」では、フロントエンド開発のアーキテクチャである「SPA（Single Page Application）」について、開発に必要となる各種フレームワークの特徴や、サンプルアプリ開発を通じたSPA開発の流れ、フレームワークによる作り方の違いなどを紹介します。 サンプルアプリ開発では、SPA開発において人気がある「React」「Angular2」の使用を予定しています。第1回目である今回は、SPAの特徴と取り巻く環境、フレームワークを紹介します。 SPAとは SPAはAdobe FlashやMicrosoft SilverlightといったリッチなUIを提供できるRIA（Rich Internet Application）に代わるフロントエンド開発の技術として、ブラウザの進化やHTML5の登場などによって誕生したアーキテクチャです。H
Vue.js - The Progressive JavaScript Framework | Vue.js
The Progressive JavaScript Framework Web ユーザーインターフェース構築のための、親しみやすく、パフォーマンスと汎用性の高いフレームワーク。 Vue を使う理由 はじめる インストール 親しみやすい 直感的な API とワールドクラスのドキュメントを使用して、標準的な HTML、CSS、JavaScript をもとに構築します。
JavaScriptフレームワーク選定の議論 - Qiita
相談内容 既存の管理ツールを新しく作り直すために新しいJSフレームワーク/言語使いたいのですが、何を選んだらよいでしょうか？ ここで選んだものは今後新しく作る時にも使用していく予定のため、学習コストよりメンテナンスしやすいものを選びたいと考えています。 利用者は社内外で特定の権限を持った人のみであるため、サーバサイドレンダリングはしない予定です。 言語は型があるものを利用したいのですが、TypeScriptとFlowのどちらがよろしいでしょうか？ 時間に余裕があれば、テストフレームワークやビルドツールについてもお聞きしたいです。 現在のページ/チーム jQueryなどで書かれている部分が多いですが、変更を加えることが難しくメンテナンスコストが高いです。 サーバサイドをやってる人が片手間で書くJavaScriptといった状況です。 今回新規で数ページを追加する必要があるため、何を利用すれば良
Rails セキュリティガイド | Rails ガイド
このマニュアルでは、Webアプリケーション全般におけるセキュリティの問題と、Railsでそれらの問題を回避する方法について説明します。 このガイドの内容: 本ガイドで取り上げられている問題に対するあらゆる対策 Railsにおけるセッションの概念、セッションに含めるべき項目、有名なセッション攻撃 Webサイトを開くだけで（CSRFによる）セキュリティ問題が発生するしくみ ファイルの取扱い上の注意、管理インターフェイスを提供する際の注意事項 ユーザーを正しく管理する（ログイン・ログアウトのしくみ、あらゆるレイヤにおける攻撃方法） 最も有名なインジェクション攻撃方法の解説 1 はじめに Webアプリケーションフレームワークは、Webアプリケーションの開発を支援するために作られました。フレームワークの中にはセキュリティを比較的高めやすいものもあります。実際のところ、あるフレームワークは他のよりも安
CSSやJavaScriptの新しい動き、フロントエンドのWeb制作の現状とこれから必要とされるテクニックや考え方
ここ1, 2年で、フロントエンドの制作事情は大きく変化してきました。 スマホの登場によりレスポンシブ対応からモバイルファースト・モバイルオンリーへ、HTMLは構造化され、CSSはモジュール単位で実装され、JavaScriptは多くのプロジェクトでjQueryではなく新しいライブラリやフレームワークが採用されるようになりました。 フロントエンドのWeb制作の現在の状況とこれから必要とされるテクニックや考え方を紹介します。 What is the Future of Front End Web Development? 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 ユーザーの期待値はますます上昇 JavaScriptの新しい動き ページ制作ではなく、全体を構築する ネイティブとWebの境界線はあいまい URLは依然として重要 パフ
CSS書きたくなさすぎ問題2017 - DRYな備忘録
css書きたくない。できればjsも書きたくない。js必要なの嫌。軽くやりたい。という個人の日記です。 参考 Best CSS Frameworks of 2017 | Three29 10 Free Lightweight CSS Frameworks for a Fast Start 2017年にチェックしておきたい、CSSの軽量フレームワークのまとめ | コリス ググれ。 lightweight css framework - Google 検索 Gridだけやりたいやつは除外した。 Bootstrap Materialize mui （追記）UIkit （追記）Semantic UI Pure Bulma Skelton Spectre.css Kube Vuetify Fictoan avalanche Beuter Vanilla Milligram InvisCSS Look
Awesome Python：素晴らしい Python フレームワーク・ライブラリ・ソフトウェア・リソースの数々 - Qiita
元記事: Awesome Python Awesome List in Qiita Awesome Ruby Awesome Java Awesome JavaScript Awesome Node.js Awesome Go Awesome Selenium Awesome Appium 管理パネル 管理インタフェース用ライブラリ ajenti - サーバ用管理パネル. django-grappelli - Django 管理インターフェースのためのジャズスキン. django-jet - 改良された機能を備えた Django 管理インターフェース用の最新のレスポンシブテンプレート. django-suit - Django Admin インターフェースの代替 (非商用の場合のみ無料). django-xadmin - Django 管理者のドロップイン置換. jet-bridge -
2017年に注目しておきたい、JavaScriptのライブラリのまとめ | コリス
数多くあるJavaScriptのライブラリの中で、どれを勉強すればいいか判断することはなかなか難しいものです。いくつかのライブラリは放置され衰退し、またいくつかは急速に成長し、広範囲に採用されることがあります。 jQueryやReactは多くの人が知っているでしょう。 2017年に注目しておきたい、急成長しているJavaScriptのライブラリを紹介します。 D3.js ビッグデータは成長産業で、データ ビジュアライゼーションも同じくらい重要になっています。グラフ作成やマッピングのライブラリはたくさんありますが、D3.jsほど目立つものはほとんどありません。このJavaScriptライブラリはSVGやCanvasの要素と連携して、Web上のグラフ、チャート、動的なビジュアライゼーションをレンダリングします。 D3.jsは完全に無料で、JavaScriptで構築された最も強力なビジュアライゼ
【決定版】デキるWebデザイナーのための「CSSフレームワーク」ベスト10
フレームワークの活用はWebデザインの現場において「当たり前」のものとなってきましたね。制作にかけられる時間・労力は決して無限ではありません。限られた資源（リソース）を効果的に分配するのもプロとして欠かせない姿勢です。今後もこうしたCSSのフレームワークを活用した流れは続くのではないでしょうか。 そこで本稿では制作の現場で使えるWebデザイナーのための「CSSフレームワーク」ベスト10をご紹介します！下記にご紹介するフレームワークをうまく活用して、ぜひ日々の業務の効率化にお役立てください。 そもそもフレームワークとは何か？ フレームワークとは、本来ファイルとフォルダを含むパッケージのことです。CSSフレームワークの場合だと標準化されたHTML、CSS、JSコードを含んだ機能群のことを指します。こうしたフレームワークを使うことで、一からフロントエンド開発を行うよりも飛躍的にWeb制作の生産性
Flexboxベースのレイアウトを実装できるCSSフレームワークまとめ - NxWorld
レイアウト（特にグリッドレイアウト）を作っていく上で、Flexboxを利用して且つ手軽に実装したいというときに便利なCSSフレームワークを紹介します。 Bootstrapのようにレイアウトに限らず様々なコンポーネントまで用意されているものもあれば、Flexboxを使ったグリッドレイアウトの実装のみに特化したシンプルなものまでいろいろありますが、全体的に適用したい箇所にクラスを付与するだけと簡単に利用できるものになります。 Bootstrap いまや定番といえるCSSフレームワークのひとつでご存知の方も多いBootstrapは、バージョン4からFlexboxを用いたグリッドシステムが利用できるようになりました。 使用方法も下記にあるようにこれまでのグリッドシステムを使用するときと同じような感じで使えるので、今までBootstrapを利用してきた人であれば尚更楽に導入できると思います。 また、
マテリアルデザインのサイトを簡単に作るためのフレームワーク８選
マテリアルデザインは、Googleが推奨しているデザインの概念です。GoogleのウェブサイトやAndroid OSは、マテリアルデザインをベースとしています。 最近では、マテリアルデザインを簡単に作ることができるCSS・JavaScriptフレームワークも充実してきており、誰でも簡単にマテリアルデザインを導入することができるようになっています。 そこで今回はいくつかある候補の中から、人気がありなおかつGithubへのコミットも活発にされているマテリアルデザインをベースとしたフレームワークを紹介します。 Materialize Materializeは、マテリアルデザインのCSSフレームワークとして人気のものの１つです。Bootstrapとほぼ同じような命名規則なので、Bootstrapを使ったことがある人であれば、すぐに理解できると思います。 ShowcaseページにはMateriali
Web API フレームワーク LoopBack で遊んでみる - Qiita
LoopBack とは LoopBackは Web API フレームワークです。 最近は、よりリッチなユーザ体験を提供するために、Web アプリケーションをSPA化する流れが強くあるなーと思います。 それと同時に、バックエンドとしての API サーバ構築の需要もすごく高まってきていて、LoopBack はその API の生成がとても簡単にできるフレームワークです。 Node.js 製なので、フロントエンドとバックエンドを JavaScript のみで記述できます。Universal Web App！ Express がベースになっているのですが、大きな特徴として、モデルが生成されると同時に RESTful な API を自動で生成してくれます。 モデルの生成もジェネレータが用意されているので、一行もコードを書かずに API サーバを構築できます。 LoopBack の特徴 公式ドキュメント
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
2017年にチェックしておきたい、CSSの軽量フレームワークのまとめ
DeNA Engineering - DeNAエンジニアのポータルサイト
