タグ検索の該当結果が少ないため、タイトル検索結果を表示しています。
モダンJavaScript概論 − Node, npm, ECMAScript, Babel, Webpack | Hypertext Candy
2020.04.30 モダンJavaScript概論 − Node, npm, ECMAScript, Babel, Webpack この記事では、モダンな JavaScript を書くための前提として知っておくべき、いくつかのキーワードを紹介します。想定読者は、初心者 〜 jQuery なら書けるレベルの開発者です。これから React や Vue.js を学びたい方、または Web 開発の世界に飛び込む新人さんなどの学習の助けになれば、と思います。 「モダン」な JavaScript ここで言う「モダン」とはどういう意味でしょうか？ 「モダン JavaScript」という表現は数年前から目にしますが、大抵 ES2015（JavaScript の 2015 年バージョン）以降の JavaScript を指しているようです。確かに、const / let やアロー関数などの文法的な改善、A
この記事では、シングルページアプリケーション開発での Web API 設計について書いていきます。 ここで言う「エンドポイント」とは、HTTP メソッドと URL の組み合わせです。また、本記事で扱うのは、いわゆる REST API と呼ばれるタイプの Web API です。最近は GraphQL が台頭してきていますが、まだ現場では REST タイプの API を扱うことがほとんどでしょう。 API 設計は大きく2つの側面があります。エンドポイント定義と、リクエストおよびレスポンスメッセージの JSON 定義です。本記事では、特にエンドポイント定義の設計について取りあげます。なぜなら、どちらかというと、エンドポイント定義のほうが、これから SPA 開発にチャレンジする方にとって、難しさがあるように感じるからです。 Web API とは 何を API にするのか まず、そもそも何を API
HookとRedux ToolkitでReact Reduxに入門する | Hypertext Candy
この記事では、React アプリケーションに Redux を組み合わせる方法を紹介します。 タイトルの通り、React の機能である Hook と Redux の組み込みを簡単にしてくれるライブラリ Redux Toolkit を活用した比較的新しめの方法なので、他の解説記事とは少し異なる記述になるかもしれません。 これから React や Redux を勉強する方は戸惑うかもしれませんが、導入方法がいくつかあるというだけで、どちらも間違いではないので、参考の一つとして読んでください。 Redux とは 状態管理 Redux とは、JavaScript製の状態管理ライブラリです。 「状態」とは、アプリケーションで扱う動的なデータという理解でよいでしょう。たとえばユーザー名とか、いいねの数が「状態」です。状態は時系列とともに変化します。 状態管理ライブラリが解決する問題は、コンポーネントをま
この記事では、JavaScript のカスタムイベントについて紹介します。 タイトルに「中級編！？」とありますが、文法自体は全然むずかしくないです。ただ、入門書などではあまり触れられていないようです。 イベント自体がとても JavaScript らしい機能ですし、カスタムイベントは覚えておくとここぞというときにプログラムの表現の幅は広がるので、チェックして損はありません。 イベントとは イベントは基本的に HTML 要素から発行されます。一番馴染みのあるイベントは「クリック」でしょう。 const buttonElem = document.querySelector('.button'); buttonElem.addEventListener('click', function(event) { // 第一引数はイベントに関する情報が詰まったオブジェクト // たとえばevent.ta
本記事では、JavaScript 初心者の方向けに、ブラウザにおける JavaScript 開発の基礎について書いていきます。 最近は React や Vue.js などのフレームワークがスタンダードになって、「生の」JavaScript を扱うことは少なくなっているかもしれません。しかし、フレームワークの裏側で動く仕組みは当然同じです。技術トレンドが移り変わっても対応できる「基礎知識」を身につける、一助になれば幸いです。 少なくとも、HTML / CSS と、JavaScript の文法知識を前提としています。 フロントエンド、つまりブラウザを実行環境とする JavaScript を扱います。Node.js などのサーバサイドの話題は含みません。 そもそもDOMって？ JavaScript の主な目的は、Web ページの表示を変化させることです。 フレームワークや非同期処理など、他にもい
オブジェクト指向JavaScriptによるフロントエンドコンポーネント開発 | Hypertext Candy
オブジェクト指向とは、一言で言うと、「データとデータに対する演算をひとまとめにするプログラミング手法」だと思います。 JavaScript も、オブジェクト指向の機能を備えています。ただし、Java や Python などの他言語で採用されるクラスベースの仕組みではなく、「プロトタイプオブジェクト」をベースとした独特な仕組みなため、少しとっつきにくいかもしれません。 しかし、プロトタイプベースの仕組みは、理解すれば（やはり JavaScript らしく）かなり単純です。そして、オブジェクト指向のプログラミングスタイルは、再利用可能な UI コンポーネントを表現するのに役に立ちます。 この記事では、そんな JavaScript のオブジェクト指向とその活用法を紹介します。前半はざっくり文法的な説明をして、後半でコンポーネントの実装例を載せています。最後に、ES2015 で導入されたクラス記法
React入門チュートリアル (5) ToDoアプリを作ってみよう | Hypertext Candy
この連載記事は、これから React を学びたい JavaScript 開発者のための入門コンテンツです。対象とする React のバージョンは執筆時点で最新の v16.13 です。連載記事は以下の通り。 Reactとは何か JSX 属性と状態 フォームとイベントハンドリング ToDoアプリを作ってみよう 副作用 カスタムフック Reactプロジェクトを始める方法 本章はここまでのおさらいです。ToDo アプリのサンプルを一緒に作っていきましょう。 作るもの See the Pen React Todo Demo by Masahiro Harada (@MasahiroHarada) on CodePen. テキスト入力欄にタスクを書き込んでエンターキーを押すと下のリストに追加されます。 完了したタスクは、チェックボックスを ON にします。視覚効果として、完了済みのタスクは文字を薄くし
このプロジェクトは、2023-10-12に募集を開始し、521人の支援により1,495,649円の資金を集め、2023-11-05に募集を終了しました ●自己紹介改めまして、SAPPORO POSSEと申します。札幌を拠点に「個人サイト」として活動しております。 音楽やカルチャー関連の記事をたまに公開し、ネット上で突如界隈をざわつかせることに定評があります。 昨年、札幌のイベントで90ページほどからなるZINEを販売し、完売しました。 その後、札幌の独立系書店、および東京のタワレコ数店舗で販売しましたが、そちらも即完売となりました。 少部数の頒布ではありましたが、当該号は高く評価され、『教科書には載らないニッポンのインターネットの歴史教科書』『日本のZINEについて知ってることすべて』（野中モモとの共著）などで知られる「ばるぼら」氏からは、「2022年のベスト本」との評価を、『新蒸気波要点
皆さん、コードエディタは何を使っているでしょうか？ 私はフロントエンド開発では Visual Studio Code を使っています。 Sublime Text や Atom など（Brackets なんてのもありましたね）のエディタのなかで、後発の Visual Studio Code が最近はデファクトスタンダードになりつつある感じがします。 様々な「拡張機能」をインストールして自分好みにパワーアップできることが Visual Studio Code の魅力の一つです。 この記事では、個人的に気に入って使っている拡張機能を紹介します。 Auto Rename Tag 片方のタグを編集すると、対応するタグの名前も自動的に編集してくれる拡張機能。 WebStorm などの JetBrains 社製品にはデフォルトで備わっていましたが、VSCode にも欲しかった機能です。 Better C
関数型Reactコンポーネントでレンダリングと副作用Hookが実行されるタイミング | Hypertext Candy
この記事では、いくつかの簡単なサンプルを通して、関数型の React コンポーネントにおいて、レンダリングと副作用 Hook（useEffect）がいつ実行されるのかを検証してみます。 関数型コンポーネントのレンダリング 先に検証から得られたルールを要約すると、以下の通りです。 内部状態またはプロパティが変更されると、コンポーネントの関数が再実行される。 関数の結果が前回の呼び出し時と同じであれば、レンダリングは発生しない。 レンダリングが完了すると、useEffect が実行される。 3番目に関して、レンダリング完了後に必ず useEffect が呼ばれるのか、一回だけ呼ばれるのか、特定の内部状態をチェックして変化があったときのみ呼ばれるのか、その挙動は useEffect の第二引数に依存します。 これらのルールを理解すれば、ほとんどのケースでレンダリングと副作用 Hook の挙動を予
この連載記事は、React を学びたい JavaScript 開発者のための入門コンテンツです。対象とする React のバージョンは執筆時点で最新の v16.13 系です。連載記事は以下の通り。 Reactとは何か JSX 属性と状態 フォームとイベントハンドリング ToDoアプリを作ってみよう 副作用 カスタムフック Reactプロジェクトを始める方法 本章ではまず、React とは何のための、どのような特徴を持ったライブラリなのか、について説明します。実際のコードが出てくるのは次章以降なので、抽象的に感じられる箇所もあると思います。後続の章で React の機能を知ると、よりよく理解できるはずなので、とりあえずそのつもりで読み進めてください。 React とは React は、自称「ユーザインターフェース構築のための JavaScript ライブラリ」です。少し抽象的なので Web
Laravelでは各テーブルのプライマリーキーがAUTO_INCREMENT、つまり自動連番であることを前提にModelクラスがデフォルト設定されていますが、この設定は簡単にカスタマイズすることができます。 UUIDのメリット はじめに、自動連番ではなくUUIDをプライマリーキーとして使う理由について簡単にコメントします。 自動連番の代わりにUUIDを使うと、複数のデータベースで分散してデータを持つ場合やデータを移行する場合にもプライマリーキーの重複を避けられます。 また、多くの場合URLの一部にIDを使用しますが、私が担当した案件でクライアント様から「IDの予測がつきにくくしてほしい」という要望を受けたこともありますし（/users/123 があるなら122番ユーザーもいるとバレる）、別の案件では新規サービス開発時に「投稿IDが3とかだったらまだ使われてない感が出て格好悪い」と言われたこ
Hookにも対応！Vue.jsエンジニアのためのReact Router v5入門 | Hypertext Candy
この記事では、React コミュニティにおけるルーティングライブラリのデファクトスタンダード React Router の基本的な機能を紹介します。 以前の記事『Vue.jsエンジニアのためのReact入門』と同様に、主に Vue Router をひととおり学習した方向けに、React Router ならどうやるのか？という視点でまとめます。 とはいえ前記事よりはゆるい比較なので、Vue Router 知らない方でも React Router の入門として読めると思います。 ルーティングライブラリとは Vue Router 知っている皆さんには説明不要かもしれませんが、おさらいです。 Vue Router も React Router も、「ルーティングライブラリ」と呼ばれます。 ルーティングライブラリは、SPA（Single Page Application）には欠かせない存在で、紙芝居
この記事では、React で SPA を構築する場合に、認証状態によってアクセスできるページを制限する方法を紹介します。 現実的なアプリケーションでは必須の要件かと思いますので、これから SPA 開発にチャレンジする、という方は参考にしてみてください。 サンプルアプリ CodeSandbox 今回作成するサンプルアプリを載せておきます。 CodeSandbox のページからも確認いただけます。 要件 サンプルアプリは以下の要件を満たします。 パス 要件
HTML Tutorials HTML basics Introduction to HTML Introduction to HTML overview Getting started with HTML What's in the head? Metadata in HTML HTML text fundamentals Creating hyperlinks Advanced text formatting Document and website structure Debugging HTML Assessment: Marking up a letter Assessment: Structuring a page of content Multimedia and embedding Multimedia and embedding overview Images in HT
Spring BootアプリにCreate React Appを導入する | Hypertext Candy
この記事では、Spring Boot アプリに Create React App を組み合わせて SPA の基盤を作成する方法を紹介します。 SPA としての配信するには、フロントエンドとサーバーサイドを完全に分けて、Nginx などでプロキシする方法もありますが、今回紹介するのは、よりインフラの設定が少なくて済む、React を Spring Boot から配信する方法です。 Create React App 導入 Spring Boot まずは普通に、Spring Initializr で Spring Boot アプリが作成されていることを前提とします。
Created 2014-02-17 Last Updated 2022-06-08 Available Formats XML HTML Plain text Registry included below HTTP Method Registry HTTP Method Registry Registration Procedure(s) IETF Review Reference [RFC9110, Section 16.1.1] Available Formats CSV Method Name Safe Idempotent Reference
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
SPA開発におけるWeb API設計入門（エンドポイント編） | Hypertext Candy
JavaScript中級編！？カスタムイベントを使おう | Hypertext Candy
![なぜAmazonはPrime Videoに広告をぶち込めるのか | p2ptk[.]org](https://cdn-ak-scissors.b.st-hatena.com/image/square/c61a255acb08f590b71c23cf4cd0b3859a6d0c72/height=288;version=1;width=512/https%3A%2F%2Fp2ptk.org%2Fwp-content%2Fuploads%2F2024%2F10%2Fnico-baum-lfF1nJs_qY-unsplash_e2.jpg)
JavaScript超基礎講座！DOM操作を学ぶ | Hypertext Candy
ZINE『HYPERTEXT #1：カウンターカルチャーと陰謀論』を販売します。
Visual Studio Code拡張機能 14選 | Hypertext Candy
React入門チュートリアル (1) Reactとは何か | Hypertext Candy
LaravelでプライマリーキーをUUIDにする | Hypertext Candy
Reactアプリのルーティングと権限管理 | Hypertext Candy
inputmode - HTML: HyperText Markup Language | MDN
Hypertext Transfer Protocol (HTTP) Method Registry
www.asahi.com
sports.yahoo.co.jp
fuutouya.com
mastered.jp
shonenjumpplus.com
zen-ken.co.jp