Webページ用UIフレームワーク「Svelte」とは？ プレーンで軽量なJavaScript生成を体験しよう！
「Svelte」はWebページ用UIフレームワークで、コンパイル時にプレーンなJavaScriptを生成するといった特徴があります。本連載ではSvelteの活用方法を順を追って説明していきます。初回となる今回は、Svelteの概要と特徴を説明するとともに、実際にプロジェクトを作成して実行させ、Svelteを体験します。 はじめに WebページのUIを構築するためのライブラリやフレームワークは、ReactやVue.js、Angularといったさまざまなものが存在します。本記事で取り上げるSvelteも、そのようなフレームワークの1つです。 図1 Svelteの公式ページ 他のライブラリやフレームワークでは、それ自体のコードがブラウザーに読み込まれて実行されるのに対して、Svelteでは、Svelte自身のコードを含まないプレーンなJavaScriptをコンパイルで生成するため、実行ファイルサ
Visual Studio CodeへのJavaScriptデバッガ統合でブラウザでのデバッグが容易に
Visual Studio CodeにJavaScriptデバッガが組み込まれたことで、従来Visual Studio CodeでのJavaScriptデバッグで用いられていた、ChromeデバッガまたはMicrosoft Edgeデバッガ拡張機能が不要になる。 さらに、Google ChromeまたはMicrosoft Edgeでプロジェクトをデバッグするには、「F5」キーを押すか、メニューバーのデバッグアイコンをアクティブにして「Run and Debug」を選んでセッションを始められるほか、「Debug: Open Link」コマンドを実行することで、拡張機能をインストールすることなく、Google Chrome、Microsoft Edge、またはNode.jsでのデバッグを選べる。 なお、ブラウザ開発ツールのコンソールと同じように、エディタのデバッグコンソールからブラウザのドキュ
Web開発の選択肢の1つ、Node.jsはいかが？『入門Node.jsプログラミング』で始めよう
RailsやDjango、LaravelなどWeb開発のフレームワークはいくつかありますが、JavaScriptだけで実装が可能なNode.jsも選択肢の1つ。Node.jsに関心がある方、初めてWeb開発をやってみようという方に、翔泳社から9月25日に発売した『入門Node.jsプログラミング』がいかがでしょうか。今回は、本書を使ってどのように学んでいけばいいのか、抜粋して紹介します。 本記事は『入門Node.jsプログラミング』の「LESSON 0 Node.jsとJavaScriptエンジンの準備」から抜粋したものです。掲載に当たり、一部を編集しています。 本書で学ぶこと 本書の目標は、Node.jsというプラットフォームで、JavaScript言語を使って、Webアプリケーションを構築する方法を学ぶことです。本書は、前章までに学んだ概念や開発スキルに基づいて進行します。 順番にレッ
いまさら聞けない？ GitHubの概要から新機能まで一挙に紹介【デブサミ2018 夏】
GitHubは開発プラットフォームであり、プログラムを共有し、ソフトウェアの共同開発をしやすくするためのプラットフォームだ。誰かがソースコードを書いたら、「プルリクエスト（Pull Request）」でレビューを要請し、本体にマージするのが基本的な流れ。共同開発の生産性を高める仕組みとして定着している。GitHubエンタープライズサポートエンジニアの鈴木順子氏が解説する。 講演資料：意外と知らない？！GitHubの新機能を紹介します GitHub エンタープライズ サポート エンジニア 鈴木順子氏 GitHubは企業向けソリューションもある まずはGitHubの基本機能からおさらいしよう。「開発プラットフォーム」ということでソースコードを保存し、バージョン管理ができる。特徴的なのは「プルリクエスト（Pull Request）」。新しくコードを書いた人が、仲間にレビューを要請する。ソースコー
CSSはメンテナブルこそ正義！ カオスになって破綻しないための『はじめてのCSS設計』
フロントエンドエンジニアだけでなくバックエンドエンジニア、Webデザイナーも触れるようになってきたCSSですが、その自由度の高さゆえにコードが肥大化して手をつけられなくなることもありえます。翔泳社では、そんなカオスを避け、整然とした保守・運用を実現するための『はじめてのCSS設計』を3月13日に刊行します。 『はじめてのCSS設計 フロントエンドエンジニアが教えるメンテナブルなCSS設計手法』は、CSSのコーディングで発生しがちな問題を事前に回避するための設計手法が学べる解説書です。 CSSは自由度が高く手軽に書くことができるため、つい思いつきで上書きや編集・修正を繰り返してしまうことがあるのではないでしょうか。その結果、思いもしないところでレイアウトが崩れたり、ファイルが肥大化してどこを編集すればいいのかわからなくなったりすることがあります。 本書はそんなカオスを避けるために、基本から実
Webアプリで起きるクライアントサイドの性能劣化パターンとその改善チューニング
本連載は、パフォーマンスを主な対象としてシステム開発・運用の改善や設計を行うNTTデータのコンサルタントチーム「まかせいのう」のメンバーが、業務での体験やそこから得た知見を共有する『週刊まかせいのう』の記事を編集し転載するものです。今回は、クライアントサイド（Webブラウザ）の処理性能を劣化させるパターンと、それを改善し性能を向上させるチューニング方法を紹介します。 遅延原因がクライアント側にある場合の2つのパターン いわゆる「性能が出ない」「画面がもっさりして処理が遅い」という性能問題が発生した場合、必ずどこかに遅延を発生させているコンポーネント、いわゆる「ボトルネック」が存在します。それはWebサーバであったり、DBサーバであったり、はたまたネットワークやストレージであったりします。 一般的に、こうした遅延箇所の多くはサーバサイドに集中しています。サーバサイドでは、多くのユーザリクエス
HTTPリクエスト数削減テクニック2： CSS Sprite編
はじめに こんにちは、クラスメソッド株式会社の野中です。 HTTPリクエスト削減テクニックの紹介に入り、前回の『リクエスト数削減テクニック1：インラインイメージ編』では、インラインイメージについて紹介しました。本記事では「CSS Sprite」の基本的な知識と使い方、使いどころについて解説します。すでに定番のテクニックとなっていますが、何となく使っていることが多いと思います。初学者の方にも理解していただけるよう詳しく解説します。 対象者 対象者は主にコーダー、フロントエンドエンジニアです。 デザインとコーディングを合わせて担当するWebデザイナーも対象です。 コーダー・フロントエンドエンジニア Webデザイナー Webディレクター Web担当者 CSS Spriteとは Webサイトではアイコンやナビゲーションなどに多くの画像が使われ、サイトによっては20個30個とたくさんのアイコンが使わ
HTML5で進化したフォーム機能 ここが違う！サンプルで見るHTML5（5）
はじめに この連載では、今日のウェブ業界の流行語となっている「HTML5」をとりあげ、全6回に分けて、これまでの技術とどのような違いがあるのか、具体的にサンプルのコードを示しながら解説していきます。 過去の連載も読む 第1回：HTML5が注目を浴びる理由とは？ 第2回：HTML4から変化したHTML5のマークアップ 第3回：HTML5で再定義された要素と属性 第4回：HTML5で実現できるマルチメディア系機能 新たに導入されたフォームコントロール これまでウェブにおける入力フォームコントロールは、非常に限られたものしかありませんでした。皆さんがよくご存じのテキスト（パスワード）入力フィールド、ラジオボタン、チェックボックス、セレクトメニュー、テキストエリア、ファイル選択です。お問い合わせフォームであれば、ほとんどのシーンで十分といえるでしょうが、ウェブアプリケーションにおいては、不足してい
今からでも遅くない これから始めるScala（前編）
なぜ、いまScalaなのか？ TwitterがScalaを利用しているのは有名ですが、他にも位置情報を利用したfoursquareはScalaで構築されたLiftというWebフレームワークを利用していますし、GTDツールとして有名なRemember The MilkもScalaの利用を検討しているようです。 Scalaは、Java Virtual Machine（以下JVM）上で動くオブジェクト指向＋関数型言語です。簡潔で柔軟な記述が可能であり、マルチコアを意識したライブラリがあり、JVMでのスケールメリットを享受できることが、これらの企業で採用に踏み切った理由であると考えられます。 Scalaは、非常にバランスの取れたプログラミング言語です。本連載では、Scalaの基本的な文法を解説しながら、オブジェクト指向と関数型言語を組み合わせたプログラミングスタイルについて、解説したいと思います。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
「Vue.js」でWebページを作成できるフレームワーク「Nuxt.js」最初の一歩
HTML／CSSコーディング時間を激減させる「Creative Cloud Extract」と、その真価を引きだすための10のポイント