はてなブックマーク

現場で役立つ、スクロールバーの必須知識 前編 スクロールバーの表示を考慮する ウェブサイトを作るうえで、至るところに現れるのがスクロールバーです。そのスクロールバーついて実装時に配慮しなければいけないことを前後編で解説します。前編はスクロールバーの表示方法がページに与える影響をコントロールする方法です。 はじめに 筆者がこれまでに得た知識・経験の中でも、とても地味ですが大事なスクロールバーに関して、実装上で配慮しなければならないポイントを前後編で紹介します。 前編はスクロールバーの表示の有無と、表示によって変化する表示域にどのように対応するのか、その実装方法を解説します。 スクロールバーは常に表示する スクロールバーの表示のされ方はOSによっても異なります。macOSの場合は環境設定の一般にある「スクロールバーの設定」で変更でき、デフォルトは「マウスまたはトラックパッドに基づいて自動的に表

これから始める、Next.js 第1回 Next.jsとは Next.jsの特徴を簡単なデモを使って確認してみます。Reactをベースとし、用途に合わせSSRやSSGを組み合わせた柔軟なサイト書き出し機能を試してみましょう。 はじめに Next.jsは、Reactをベースとしたフレームワークです。アメリカに籍を置くVercel社によって管理されているOSSプロジェクトでもあります。 この記事の執筆時点では10.0.5が最新バージョンとなっています。 Vercel社は、Webサイトのデプロイ・ホスティングサービスとしての「Vercel」も会社と同じ名前で運営しており、Next.jsとVercelを合わせて利用することで簡単にハイパフォーマンスなWebサイトが作れるということを掲げています。 Vercel社は2016年にZEITという名前でスタートして、ホスティングサービスのnowを運営してい

スタイル自由でアクセシブルなHeadless UI 第1回 Headless UIの特徴と利用準備 自由に好きな方法でスタイルを当てることができ、なおかつアクセシブルなUIライブラリである、Headless UIを紹介します。まずはその特徴をつかんでみましょう。 はじめに この連載ではHeadless UIについて紹介します。 Headless UI – Unstyled, fully accessible UI components Headless UIというのは、OSSのUIライブラリです。CodeGridでも過去に紹介したTailwind CSSを開発しているTailwind Labsが中心となって開発しています。 Tailwind CSS Tailwind Labs Headless UIのトップページを見ると、Menu、Listbox、Switch、Disclosure、Dia

Node.jsのバージョンアップによる新機能 第6回 Node.js v16/v17 前編 2021年10月26日に、Node.js v16のLTSがリリースされました。v16で注目したい機能について、解説します。

Vue 3から始める、Vue.js 第1回 Vue 3はどう変わったか 2020年9月にバージョンアップしたVue 3を複数回にわたって取り上げます。第1回目はVue 3の概要を紹介します。 はじめに 本シリーズでは2020年9月にリリースされたVue 3をベースに、Vue.jsの基本的な使い方を解説します。内容としてはVue 3に特化したものではなく、Vue 3以前からある機能も網羅して、はじめてVue.jsに触れる場合でも理解できるように解説していきます。 第1回目はVue 3の概要やVue 2との違いを解説しますので、これからVue.jsに触れる人には若干難しい概念も含まれるかもしれません。これからシリーズを読み進めてもらうと、だんたんクリアになってくると思いますので、今は、あまり気にせず読んでください。 初出記事より改定 本記事は2020年12月に公開されましたが、その後のVueの

きちんとわかる、npm install 第1回 PCにコマンドをインストールする 普段何気なく使っているNode.jsのパッケージツール「npm」。パッケージのインストールに使うnpm installの使い方と動作を解説します。まずはグローバルインストールからです。 はじめに 最近のフロントエンドでは、当たり前のように使っているNode.jsのnpmコマンド。その中でもnpm installはとりあえず、パッケージ（ライブラリ）をインストールのため、最初に実行するものという認識だけで、なんとなく使っている人も多いのではないでしょうか。 このシリーズでは、npm installにどのようなオプションがあり、どのような動作をするのかを中心に解説します。きちんと仕組みを知っておくことで、生成されたpackage-lock.jsonをどう扱えば良いのか、困った時にはどうすれば良いのかわかるようにな

もちろんそのパッケージに含まれるすべての機能を利用する場合の数値であり、実際の利用時にはもう少し小さいはずですが、それでもその差は歴然です。 そのほかの違いですが、パッケージとしてのpreactは、reactとreact-domが備えるすべてのAPIをそっくりそのまま実装しているわけではありません。ここは少し冒頭のコピーが誤解を招くところかもしれません。 まとめるとPreactは「ブラウザ独自のAPIを利用しつつ、必要最小限のAPIを選びぬいた分だけ軽い、ブラウザ専用のReact」というわけです。 preact/compatという互換レイヤー PreactはAPIを厳選しているため、Reactをターゲットにして作られた周辺ライブラリは、Preactを利用したプロジェクトでそのまま使えないのも事実です。 また、Reactで作られた既存のアプリケーションをPreactで置き換えたいと思っても、

styled-componentsの基礎知識 第1回 styled-componentsの前提知識 このシリーズではCSS in JS用のライブラリであるstyled-componentsについて解説します。第1回目はCSS in JSの予備知識と、styled-componentsの使いどころや、基本機能について解説します。 はじめに styled-componentsは、ReactコンポーネントにCSSのスタイルをどのように当てるかという課題をきっかけに作られたCSS in JSのライブラリです。 CSS in JSは読んで字のごとく、JavaScriptの中にCSSの記述を取り込んでしまう手法のことで、styled-componentsのほかにもglamorous、Emotion、Linariaなどのライブラリが存在します。 次の図はstyled-components、glamoro

フロントエンドに関わる人々のためのオンラインメディア 月額880円ですべての記事が読み放題 初回登録の方は30日間無料 今すぐお試し購読を始める CodeGridとは？ フロントエンドのスキルアップを支援するオンラインメディアです。 毎週新しい記事で情報収集 月に4回3記事で月間合計12記事が配信。 もちろん過去に配信された記事も読み放題。 プロによる 質の高い情報 現役のWebエンジニアが執筆。 専任の編集が理解しやすい文章に。 あなたのペースで読める 仕事や勉強で集中するときはPCから、通勤中のすきま時間はスマホから。 基礎からトレンドまで 幅広く 幅広い記事があるのであなたの知りたい情報もきっと見つかる。 他のサービスとの違い CodeGridは無料のコンテンツや動画学習サイトとは大きく違います。 ユーザー投稿型技術情報共有サービスとの比較

Node.jsのバージョンアップによる新機能 第5回 Node.js v14/v15 後編 後編では、新しくリリースされたNode.js v15について、どのような進化をしているか紹介します。これらの進化を通して、これからのNode.jsがどこに向かっていくのかも考えます。

Node.jsのバージョンアップによる新機能 第4回 Node.js v14/v15 前編 2020年10月28日（日本時間）にNode.js v14のLTSがリリースされました。本稿では、v14がリリースされてからLTSに至るまでにあった、注目したい機能追加を中心に解説します。

関数の仮引数とvarは関数スコープだけを生成し、letとconstは関数スコープとブロックスコープの両方を生成します。 ここまでは、各スコープの概要について簡単に紹介しました。次節からは、それぞれのスコープの仕様に基づき、スコープについて知っておきたい基礎的なことをまとめていきます。 グローバルスコープとwindowオブジェクト グローバル変数を宣言するというのは、実際にはグローバルオブジェクト（ブラウザの場合はwindowオブジェクト）のプロパティを追加することになります。 そのため、グローバル変数は、windowオブジェクトのプロパティとしてアクセスできます。 var scope = 'global'; // windowオブジェクトのプロパティとして追加される console.log(window.scope); // -> global なお、letやconstをトップレベルで宣言

ES modules基礎知識 第1回 仕様の概要とその周辺課題 ES2015仕様において策定されたES modulesは、JSファイルから別のJSファイルを読み込む仕組みです。まずはこの仕様がどのようなものなのかを知り、さらにその背景と課題について考えてみます。 ES modulesとは ES modulesは、ES2015仕様において策定された、JavaScriptファイルから別のJavaScriptファイルを読み込む仕組みです。 Node.jsでは、ほかのJSファイルの読み込みはCommonJSの仕様に沿った方法ですでに実現していましたが、ES modulesは標準としてNode.jsとブラウザ両方に対応したモジュールシステムの仕様と位置づけられます。 これまでそのようなものがなかったブラウザと、別の方法でやってきてしまったNode.jsの間で互換性をとるため、両者における従来の作業工

ブラウザからメディアデバイスを操る 前編 getUserMedia()の基本 getUserMedia()は、カメラやマイクなどメディアデバイスにアクセスできるAPIです。今回はもっともシンプルなデモで、引数の概要をおさえ、このAPIの使い方を掴んでみましょう。 はじめに 今回の記事では、Media Capture and Streamsという仕様の中から、getUserMedia()というAPIを紹介します。 Media Capture and Streamsは大まかにいうと、ローカルデバイス上のカメラやマイクにアクセスするためのJavaScript APIがまとまっている仕様です。今回の記事ではMedia Capureの部分を、次回の記事ではStreamsの部分に焦点をあてて解説していきます。 仕様書：Media Capture and Streams この仕様に含まれるgetUser

しっかり学ぶ、a要素 第1回 a要素の書き方とCSS Webの特徴的な操作のひとつに、ハイパーリンクがあります。この記事ではハイパーリンクを実現するa要素について紹介します。まずはその記述の特徴を見てみましょう。 ハイパーリンクを記すa要素 このシリーズでは、HTMLのa要素について詳しく紹介します。 The a element — HTML Standard 詳細に入る前に、いまいちどa要素の目的についておさらいしましょう。 a要素はリンク、より厳密にいえばハイパーリンクを記述するための要素です。ハイパーリンクは、現在のHTMLの仕様書では次のように定義されています。 These are links to other resources that are generally exposed to the user by the user agent so that the user ca

JSON Server使いこなし 第1回 モックサーバーの起動とリソース処理 APIモックサーバーを起ち上げる必要があるときに利用できる、JSON Serverを解説します。まずはモックサーバーの起動とリソース処理について見てみましょう。 はじめに 新規でフロントエンドの開発を行う際、機能の実装に必要なAPIが完成していないことや、なんらかの制約があってローカル環境からはAPIが使えない、といった状況に遭遇することがあります。そのような状況で作業を進める場合、APIモックサーバーが必要になるかと思います。こういったときに役立つのが、今回紹介するNode.jsベースのライブラリ、JSON Serverです。 JSON Serverの公式ページを見ると、冒頭に次のような記述があります。 Get a full fake REST API with zero coding in less than

glTF入門 第1回 glTFの仕様とその出力方法 glTFは、WebGLやOpenGLをはじめとする、3Dランタイム向けのファイル形式です。まずはその仕様を学び、用意されたサンプルをglTFに出力する手順を見てみましょう。 はじめに glTF（ジーエルティーエフ：GL Transmission Formatの略）は、WebGLやOpenGLをはじめとする、3Dランタイム向けのファイル形式です。glTF 2.0が2017年に仕様として定められています。 glTFは、インターネットでの配信が前提とされた仕様です。まだ新しいですが、WebGLに興味があるフロントエンドエンジニアであればぜひ知っておきたいファイル形式です。本稿では、Webページ、WebアプリケーションでのglTFの利用方法を解説します。 なお、WebGLやthree.jsについての詳細は、CodeGridの次のシリーズ*を参考に

Web API入門 第1回 APIの概要とデータの取得 サービスのデータやプログラムを外部から利用できるWeb APIの使い方を解説していきます。まずはWeb APIの役割を理解し、データを取得してみましょう。 Web APIとは？ API（Application Programming Interface）とは、サービスのデータを外部のアプリケーションやプログラムから扱うための機能を提供するインターフェースです。中でも、HTTP通信によってやりとりを行うAPIをWeb APIといいます。 Twitter APIを利用して独自のTwitterクライアントを作ったり、Amazon APIを利用して自分のサイトに最新の商品情報を掲載したりできるのは、TwitterやAmazonが、自社のデータを扱うための処理を抽象化したプログラム（API）を外部に向けて公開しているためです。 このように、公開

ピクセルグリッドが訪ねる、開発の現場 第13回 ソニックガーデン 前編 「納品のない定額制受託開発」という独自のコンセプトで開発事業を展開するソニックガーデンを訪ねました。その独特な考え方のもと、どのような関係を顧客と築こうとしているのか、またその方法は？ じっくりとうかがいました。 はじめに ピクセルグリッドが魅力を感じる会社を訪問し、経営や現場の様子をお聞きするインタビューシリーズ。今回は「納品のない受託開発」をコンセプトにサービスを提供する、株式会社ソニックガーデンを訪ねました。 インタビューに同席したメンバーは、次のとおりです。 倉貫 義人 氏（株式会社ソニックガーデン 代表取締役社長） 西見 公宏 氏（株式会社ソニックガーデン 取締役／プログラマー） 中村 享介（株式会社ピクセルグリッド 代表取締役、フロントエンド・エンジニア） 高津戸 壮（株式会社ピクセルグリッド フロントエン

async/await入門 第1回 async/awaitとは ES2017としてリリースされる予定になっているasync/awaitは非同期処理を同期的処理のように書くことができる新しい記法です。第1回目はanync/awaitの働きの概要を解説します。 はじめに async/awaitはJavaScriptで非同期処理を扱う新しい方法です。これまでは、非同期処理を書くためにコールバック関数を使った方法とPromiseを使った方法がありました。 それぞれ、いつ完了するか不明な非同期処理の結果をハンドリングするための関数を別途定義していましたが、async/awaitを使うと、まるで単なる同期的な処理を書いているように非同期処理を表現することができます。 次のコードはasync/awaitを使った一例です。対応ブラウザであれば、これをそのままコピーして開発者ツールのコンソールに貼り付けて実

Jestで始める！ ユニットテスト 第1回 環境の準備とテストの実行 JavaScriptのユニットテストのためのツール、Jestの特徴や基本的な使い方を解説します。「そろそろテストを書く習慣を付けたい」、そう思う人のための始めの一歩です。 Jestとは Jestは、Facebook社がOSSとして開発を進めている、JavaScriptのユニットテストのためのツールです。 Jest · 🃏 Delightful JavaScript Testing 日本語のドキュメント Jestは日本語のドキュメントもあります。日本語で基本的な部分を知るのに役立ちますが、情報が追いついていない場合もありますので、最新情報は英語ドキュメントを参照するようにしてください。 公式ページで「Zero configuration testing platform」と謳っているように、あれこれ設定をすることなく、他