サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
Nintendo Direct
www.hypertextcandy.com
<!-- Font Awesome Free 5.0.13 by @fontawesome - https://fontawesome.com --><!-- License - https://fontawesome.com/license (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) -->
この記事では、CSS を学び始めの方を対象に、よくあるフォーム部品のコーディング方法を紹介します。 以下のシリーズ記事のフォーム編です。 CSSコーディングレシピ集(レイアウト編) CSSコーディングレシピ集(コンポーネント編) 入力欄のカスタマイズ テキスト入力欄、テキストエリア、セレクトボックスのカスタマイズ例です。 See the Pen Form by Masahiro Harada (@MasahiroHarada) on CodePen. .form-control というクラスに、角の丸さやパディングなど、フォーム部品共通のスタイルを持たせています。 ポイントは、input と select の高さを揃えるために、height に calc(1.5rem + 1rem + 2px) を指定している点でしょうか。 calc の計算の内訳は… 1.5rem = 文字サイズ 1re
この連載記事では、フロントエンドに Vue.js + Vue Router + Vuex とサーバーサイドに Laravel を使用したシングルページ Web アプリケーションの開発方法を紹介します。実際に写真共有アプリを開発する手順を通して SPA 開発のエッセンスを学ぶことができます。 今回のチュートリアルで扱うツールなどのバージョンは以下の通りです。 Node npm Vue.js Vue Router Vuex PHP Laravel
この記事では、CSS を学び始めの方を対象に、よくあるコンポーネント(部品)のコーディング方法を紹介します。 以下のシリーズ記事のコンポーネント編です。 CSSコーディングレシピ集(レイアウト編) CSSコーディングレシピ集(フォーム編) ボタン まずはコンポーネントの基本(?)、ボタンです。 See the Pen Buttons by Masahiro Harada (@MasahiroHarada) on CodePen. 特に難しいことはしていませんが、ここでのポイントは2つあります。「display の明示」と「マルチクラス」です。 ボタンコンポーネントは、display を inline-block と明示します。なぜなら、<a> 要素も <button> 要素と同じように、ボタンとして見せる必要がある場合が多いためです。 <button> 要素はブラウザデフォルトの disp
本記事では、JavaScript 初心者の方向けに、ブラウザにおける JavaScript 開発の基礎について書いていきます。 最近は React や Vue.js などのフレームワークがスタンダードになって、「生の」JavaScript を扱うことは少なくなっているかもしれません。しかし、フレームワークの裏側で動く仕組みは当然同じです。技術トレンドが移り変わっても対応できる「基礎知識」を身につける、一助になれば幸いです。 少なくとも、HTML / CSS と、JavaScript の文法知識を前提としています。 フロントエンド、つまりブラウザを実行環境とする JavaScript を扱います。Node.js などのサーバサイドの話題は含みません。 入力値の取得と更新 この記事ではフォームの扱いについて学びます。まずは、いろいろな入力欄の値を取得したり、更新する方法を紹介します。 ちなみに
この連載記事は、これから React を学びたい JavaScript 開発者のための入門コンテンツです。対象とする React のバージョンは執筆時点で最新の v16.13 です。 Reactとは何か JSX 属性と状態 フォームとイベントハンドリング ToDoアプリを作ってみよう 副作用 カスタムフック Reactプロジェクトを始める方法 前章まででは、まず React そのものにフォーカスするため、CDN から React を読み込んだり、もしくは CodePen を用いたりなど、簡易的なデモ環境で作業しました。 本章で create-react-app を使って本格的な React アプリケーションを構築する方法を学び、この連載を終わります。 開発環境とは コードを書き始める前に、開発環境を準備しましょう。 開発を進めるために必要な、ソースコード以外のソフトウェアやミドルウェア、ツ
オブジェクト指向とは、一言で言うと、「データとデータに対する演算をひとまとめにするプログラミング手法」だと思います。 JavaScript も、オブジェクト指向の機能を備えています。ただし、Java や Python などの他言語で採用されるクラスベースの仕組みではなく、「プロトタイプオブジェクト」をベースとした独特な仕組みなため、少しとっつきにくいかもしれません。 しかし、プロトタイプベースの仕組みは、理解すれば(やはり JavaScript らしく)かなり単純です。そして、オブジェクト指向のプログラミングスタイルは、再利用可能な UI コンポーネントを表現するのに役に立ちます。 この記事では、そんな JavaScript のオブジェクト指向とその活用法を紹介します。前半はざっくり文法的な説明をして、後半でコンポーネントの実装例を載せています。最後に、ES2015 で導入されたクラス記法
本記事では、JavaScript 初心者の方向けに、ブラウザにおける JavaScript 開発の基礎について書いていきます。 最近は React や Vue.js などのフレームワークがスタンダードになって、「生の」JavaScript を扱うことは少なくなっているかもしれません。しかし、フレームワークの裏側で動く仕組みは当然同じです。技術トレンドが移り変わっても対応できる「基礎知識」を身につける、一助になれば幸いです。 少なくとも、HTML / CSS と、JavaScript の文法知識を前提としています。 フロントエンド、つまりブラウザを実行環境とする JavaScript を扱います。Node.js などのサーバサイドの話題は含みません。 JavaScript におけるイベント イベントは、DOM 操作に並んで、とても重要な話題です。 ブラウザにおける JavaScript 開発
本記事では、JavaScript 初心者の方向けに、ブラウザにおける JavaScript 開発の基礎について書いていきます。 最近は React や Vue.js などのフレームワークがスタンダードになって、「生の」JavaScript を扱うことは少なくなっているかもしれません。しかし、フレームワークの裏側で動く仕組みは当然同じです。技術トレンドが移り変わっても対応できる「基礎知識」を身につける、一助になれば幸いです。 少なくとも、HTML / CSS と、JavaScript の文法知識を前提としています。 フロントエンド、つまりブラウザを実行環境とする JavaScript を扱います。Node.js などのサーバサイドの話題は含みません。 そもそもDOMって? JavaScript の主な目的は、Web ページの表示を変化させることです。 フレームワークや非同期処理など、他にもい
Laravelでは各テーブルのプライマリーキーがAUTO_INCREMENT、つまり自動連番であることを前提にModelクラスがデフォルト設定されていますが、この設定は簡単にカスタマイズすることができます。 UUIDのメリット はじめに、自動連番ではなくUUIDをプライマリーキーとして使う理由について簡単にコメントします。 自動連番の代わりにUUIDを使うと、複数のデータベースで分散してデータを持つ場合やデータを移行する場合にもプライマリーキーの重複を避けられます。 また、多くの場合URLの一部にIDを使用しますが、私が担当した案件でクライアント様から「IDの予測がつきにくくしてほしい」という要望を受けたこともありますし(/users/123 があるなら122番ユーザーもいるとバレる)、別の案件では新規サービス開発時に「投稿IDが3とかだったらまだ使われてない感が出て格好悪い」と言われたこ
この記事では、以下のような年月日が分かれたタイプの入力欄の実装例を紹介します。 誕生日などでこのような入力フォームを見かけると思いますが……まぁ最近はあまり見なくなったでしょうか?カレンダー形式で選択できるタイプの JavaScript のライブラリがいろいろ出ていますのでそちらを使った方が便利ですし、HTML5 の <input type="date" /> を使ってもいいでしょう。 ただ今でもデザイン上の要請から年月日が分かれたタイプの入力フォームを実装することはあると思います。というか実際あったので、改めて実装方法をまとめます。 フロントエンドは特にフレームワークは使いません。サーバーサイドは Laravel フレームワークのバージョン 5.7 を使用しています。 フロントエンド まずはフロントエンドです。ここでのポイントは、不正な日付を選択させないようにするということですね。つまり
2月5日に Vue の新バージョン 2.6 がリリースされました。この記事では、バージョン 2.6 で追加された新たなシンタックスと新機能をピックアップして紹介します。 新しいスロット構文 v-slot まずは slot の新しいシンタックスです。v-slot ディレクティブが追加されました。 ver. 2.5 までは slot の名前を指定する際に以下のように記述していました。 2.5 <card> <h3 slot="title">レッサーパンダ</h3> <p slot="content"> レッサーパンダ(Ailurus fulgens)は、哺乳綱食肉目レッサーパンダ科レッサーパンダ属に分類される食肉類。本種のみでレッサーパンダ属を構成する。 </p> </card>
セットアップ まずはデータベースの接続設定を config/database.php に追加します。 database の項目に :memory: を指定するのがポイントですね。 これによりデータの保存先がメモリ上になるようです。 config/database.php return [ /* 中略 */ 'connections' => [ 'sqlite_testing' => [ 'driver' => 'sqlite', 'database' => ':memory:', 'prefix' => '', ], /* 中略 */ ], /* 中略 */ ]; phpunit.xml <?xml version="1.0" encoding="UTF-8"?> <phpunit> <!-- 中略 --> <php> <env name="APP_ENV" value="testing"
この連載記事は、これから React を学びたい JavaScript 開発者のための入門コンテンツです。対象とする React のバージョンは執筆時点で最新の v16.13 です。 Reactとは何か JSX 属性と状態 フォームとイベントハンドリング ToDoアプリを作ってみよう 副作用 カスタムフック Reactプロジェクトを始める方法 理解を助けることを意図としているため、網羅的、リファレンス的な解説はしていません。ドキュメントを併読すると、さらに理解が深まると思います。 本章では、状態と並んで重要な React の概念である「副作用」について学びます。 副作用とは 「副作用(side effect)」とは、UI の構築、つまり「JSX を返却する処理、および、そのための状態やイベントハンドラの定義」以外の処理です。 副作用の実例としては、API との非同期通信や、主に React
この記事では、Spring Boot アプリに Create React App を組み合わせて SPA の基盤を作成する方法を紹介します。 SPA としての配信するには、フロントエンドとサーバーサイドを完全に分けて、Nginx などでプロキシする方法もありますが、今回紹介するのは、よりインフラの設定が少なくて済む、React を Spring Boot から配信する方法です。 Create React App 導入 Spring Boot まずは普通に、Spring Initializr で Spring Boot アプリが作成されていることを前提とします。
この記事では Laravel におけるマイグレーションのしくみについて説明します。マイグレーションファイルの書き方やマイグレーションコマンドのパラメータなど各論はドキュメント(日本語)に書かれている通りですので、いかにマイグレーションが実現されているかを紹介したいと思います。 マイグレーションとは? DB マイグレーションとは、テーブル定義を管理する仕組みのことです。 アプリケーションを開発するにあたって、テーブル定義はしばしば変更されるものです。初期フェーズの開発中においてさえテーブルやカラムの追加は発生しますし、リリースした後もアプリケーションの成長(=機能追加、仕様変更)に合わせてテーブル定義も当然変化します。 そこで、変遷するテーブル定義を管理する必要が出てきます。DB マイグレーションツールはどのような SQL をどの順番で実行したかを管理します。実行される SQL 文はアプリケ
この記事では、いくつかの簡単なサンプルを通して、関数型の React コンポーネントにおいて、レンダリングと副作用 Hook(useEffect)がいつ実行されるのかを検証してみます。 関数型コンポーネントのレンダリング 先に検証から得られたルールを要約すると、以下の通りです。 内部状態またはプロパティが変更されると、コンポーネントの関数が再実行される。 関数の結果が前回の呼び出し時と同じであれば、レンダリングは発生しない。 レンダリングが完了すると、useEffect が実行される。 3番目に関して、レンダリング完了後に必ず useEffect が呼ばれるのか、一回だけ呼ばれるのか、特定の内部状態をチェックして変化があったときのみ呼ばれるのか、その挙動は useEffect の第二引数に依存します。 これらのルールを理解すれば、ほとんどのケースでレンダリングと副作用 Hook の挙動を予
この記事では、シングルページアプリケーション開発での Web API 設計について書いていきます。 ここで言う「エンドポイント」とは、HTTP メソッドと URL の組み合わせです。また、本記事で扱うのは、いわゆる REST API と呼ばれるタイプの Web API です。最近は GraphQL が台頭してきていますが、まだ現場では REST タイプの API を扱うことがほとんどでしょう。 API 設計は大きく2つの側面があります。エンドポイント定義と、リクエストおよびレスポンスメッセージの JSON 定義です。本記事では、特にエンドポイント定義の設計について取りあげます。なぜなら、どちらかというと、エンドポイント定義のほうが、これから SPA 開発にチャレンジする方にとって、難しさがあるように感じるからです。 Web API とは 何を API にするのか まず、そもそも何を API
この記事では、React コミュニティにおけるルーティングライブラリのデファクトスタンダード React Router の基本的な機能を紹介します。 以前の記事『Vue.jsエンジニアのためのReact入門』と同様に、主に Vue Router をひととおり学習した方向けに、React Router ならどうやるのか?という視点でまとめます。 とはいえ前記事よりはゆるい比較なので、Vue Router 知らない方でも React Router の入門として読めると思います。 ルーティングライブラリとは Vue Router 知っている皆さんには説明不要かもしれませんが、おさらいです。 Vue Router も React Router も、「ルーティングライブラリ」と呼ばれます。 ルーティングライブラリは、SPA(Single Page Application)には欠かせない存在で、紙芝居
次のページ
このページを最初にブックマークしてみませんか?
『Hypertext Candy』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く