HookとRedux ToolkitでReact Reduxに入門する | Hypertext Candy
この記事では、React アプリケーションに Redux を組み合わせる方法を紹介します。 タイトルの通り、React の機能である Hook と Redux の組み込みを簡単にしてくれるライブラリ Redux Toolkit を活用した比較的新しめの方法なので、他の解説記事とは少し異なる記述になるかもしれません。 これから React や Redux を勉強する方は戸惑うかもしれませんが、導入方法がいくつかあるというだけで、どちらも間違いではないので、参考の一つとして読んでください。 Redux とは 状態管理 Redux とは、JavaScript製の状態管理ライブラリです。 「状態」とは、アプリケーションで扱う動的なデータという理解でよいでしょう。たとえばユーザー名とか、いいねの数が「状態」です。状態は時系列とともに変化します。 状態管理ライブラリが解決する問題は、コンポーネントをま
モダン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
SPA開発におけるWeb API設計入門（エンドポイント編） | Hypertext Candy
この記事では、シングルページアプリケーション開発での Web API 設計について書いていきます。 ここで言う「エンドポイント」とは、HTTP メソッドと URL の組み合わせです。また、本記事で扱うのは、いわゆる REST API と呼ばれるタイプの Web API です。最近は GraphQL が台頭してきていますが、まだ現場では REST タイプの API を扱うことがほとんどでしょう。 API 設計は大きく2つの側面があります。エンドポイント定義と、リクエストおよびレスポンスメッセージの JSON 定義です。本記事では、特にエンドポイント定義の設計について取りあげます。なぜなら、どちらかというと、エンドポイント定義のほうが、これから SPA 開発にチャレンジする方にとって、難しさがあるように感じるからです。 Web API とは 何を API にするのか まず、そもそも何を API
Vue + Vue Router + Vuex + Laravelで写真共有アプリを作ろう (9) 写真投稿API | Hypertext Candy
この章では写真投稿のための Web API を実装します。 AWS S3 写真は AWS S3 にアップロードして保管します。 ここで S3 のバケットと開発用の IAM ユーザーを作成しておきましょう。 S3 バケット 「バケットを作成する」をクリックするとウィザードが開きます。 リージョンは「アジアパシフィック（東京）」を選択すればよいでしょう。 「アクセス許可の設定」では、4つのチェックボックスを外してください。 ここにチェックが付いていると写真の公開ができません。 IAM ユーザー サービスから IAM を選択し、さらに「ユーザー」を選択します。 「ユーザーを追加」をクリックすると作成フォームに移動します。 Laravel アプリケーションから S3 にアクセスするユーザーを作成するので「AWS アクセスの種類を選択」では「プログラムによるアクセス」にチェックを付けます。 「アクセ
Webデザイン100トレース | Hypertext Candy
こんにちわ！最近はフロント開発も担当させていただいてます、Yamamotoです。 今回はエンジニアがデザインを学ぶべく、100のWebサイトのデザイントレースをして、学んだことをまとめてみました。 エンジニアまたは未経験だけど、Webデザインにも興味があるという方の、何かのきっかけになれば幸いです。 目次 なぜ Webデザインを学ぼうと思ったのか デザイントレースについて 100トレースして学んだこと なぜWebデザインを学ぼうと思ったのか ざっくりですが、実務を行いながら以下のように思うことがありました。 細部のデザイン指示がなく、開発の手が止まってしまう どう実装するか目線の発想・提案しか浮かばない 綺麗なコードだけではなく、視野を広げてより良いものを作りたい などなど... デザイナーとエンジニアの業務は差別化されてはいますが、互いに近接し交わる部分も多くあります。そんな中で、業務効
HerokuでLaravelアプリを動かすときの注意点5つ | Hypertext Candy
Laravel で書いた Web アプリを Heroku で運用してみて気づいた注意点を書きます。 PHPバージョン Heroku で使用する PHP のバージョンは composer.json の require で指定します。 上の記述ですと、PHP は 7.1 系に固定されます。変更を Heroku に反映させるためには一度 composer update コマンドを実行し composer.lock ファイルを生成してからデプロイしましょう。 Laravel プロジェクトを作成すると PHP バージョンの設定は "php": ">=7.0.0"（Laravel 5.5の場合）等と記述されており、常に最新版が使用されるように書かれています。この設定のままですと、Heroku で新たな PHP バージョンがリリースされた後にデプロイすると自動的にアプリケーションで使用する PHP バー
若手が辞める理由には2つのスイッチがあるという仮説とその対策について | Hypertext Candy
私が勤める IT 企業では以前から毎年新卒メンバーをエンジニア職で採用しています。感覚的には離職率は高くないと思いますが、やはり入社から1〜3年前後で数名は辞めてしまいます。 エンジニアは比較的流動性が高いのでしょうし、各人の人生の選択ですから離職自体が悪いことだとは思いません。ただそうは言ってもやはり少し残念に感じるケースもあるので、若手が辞めてしまう理由にはどのようなパターンがあるのかを自分の体験も絡めて考えてみました。 記事の内容は IT 企業、特にいわゆる SIer を想定しています。他の業態や業種でも当てはまる箇所があるかもしれませんが、少なくとも私自身が SIer にいて考えたことを書いています。 また、賃金の問題、ハラスメントを含めた人間関係、ブラック的な長時間労働については考察していません。今いる会社では、若手メンバーでこれらの原因で辞めたというケースは（幸いなことに）少な
Vue.jsコンポーネント入門 (1) 環境設定 | Hypertext Candy
Nodeはインストールされているものとします。 npmについても利用したことがある前提で説明を進めます。 また、記事中ではES2015以降のJavaScriptを利用します。 まだあまり馴染みのない方には以下の参考書籍がオススメです。 速習ECMAScript6: 次世代の標準JavaScriptを今すぐマスター！ 速習シリーズ 改訂新版JavaScript本格入門 ~モダンスタイルによる基礎から現場での応用まで Webpack で環境設定 はじめに SFA を利用した開発を行うためには、Webpack などのモジュールバンドルや Babel によるトランスパイルが必要です。後ほど紹介しますが .vue という独自拡張子・独自構成のファイルを使用するため、最終的には実行可能な JavaScript ファイルにビルドする必要があります。 本格的なバンドラーの設定作業は複雑なので、本来であれば
MacでLaravel開発するならローカルの環境構築はValetもオススメ | Hypertext Candy
この記事では、Laravel Valet を紹介します。Valet はローカル PC で動作する簡易 Web サーバーと考えていただくと良いでしょう。Nginx や Dnsmasq などのソフトウェアを組み合わせたライブラリです。サポートする OS は Mac のみです。 ちなみに、この記事で紹介する Valet のバージョンは 2.1.1 です。 Homestead と Valet Laravel の開発環境構築といえば Homestead がスタンダードですが、Homestead が仮想マシン上に開発環境を構築するのに対し、Valet は基本的にローカルマシン内に構築されたアプリケーションを内部的に app-name.test というドメインで見られるようにする機能しかありません。 Valet のメリットとしては… 仮想マシンを起動するよりずっと軽量で高速。 hosts ファイルや H
Vue + Vue Router + Vuex + Laravelで写真共有アプリを作ろう (2) アプリケーションの設計 | Hypertext Candy
この章では、アプリケーション全体の設計を考えます。 まず SPA の特徴について見ていったあとに、データベースと URL を設計しましょう。 SPA のアーキテクチャ 通信パターンの特徴 シングルページアプリケーション（Single Page Application）とシングルページではない「普通の」Web アプリケーション（シングルページと対比してマルチページアプリケーションと呼ぶことにします）はブラウザ - サーバ間の通信パターンに大きな違いがあります。 まず、マルチページアプリケーションの通信は以下のようなパターンになります。 ブラウザの画面要求（GET）またはデータ送信（POST）に対してサーバは HTML を返却し、ブラウザはその HTML を描画して画面を構築します。マルチページアプリケーションの通信パターンはこのワンセットの繰り返しです。 これに対してシングルページアプリケー
Vue + Vue Router + Vuex + Laravelで写真共有アプリを作ろう (1) イントロダクション | Hypertext Candy
はじめに 対象者 JavaScript / Vue.js / PHP / Laravel の入門レベルの方、入門書を読んだあとに「何か作ってみたい」という方が、それぞれの知識を組み合わせて本格的なアプリケーションを開発できるようになることを目指しています。 上記のいずれかの知識がまったくない状態だとこのチュートリアルの内容は少し難しいかもしれません。チャレンジするのもいいですが、参考文献に挙げた市販の入門書か、関連記事のチュートリアルを先に読んでおくと理解しやすいと思います。 学べること Vue.js と Laravel を組み合わせて SPA を構築する方法 SPA におけるクッキー認証と CSRF 対策 Vue Router を使用した画面遷移 Vuex を使用した状態管理 Vue でのタブやローディング UI の表現 SPA におけるエラー処理 扱わないこと デザインと CSS コー
Hypertext Candy | Vue.js入門 (5) イベントとmethods
イベントとmethods Vue.jsでのイベントハンドリングは普通にHTMLにJavaScriptを書くのとほとんど同じなので、わかりやすいかと思います。 イベントの登録には以下のように v-on 属性を用います。 v-on:イベント名="***" という形式で記述します。属性の値の部分はJavaScriptの式もしくはメソッド名です。 v-on: の部分は @ で置き換えることができます。v-on:click="***" であれば、@click="***" とも書けるわけです。@ は糖衣構文であって、2通りの書き方に機能的な違いは全くありません。私は @ の方が短く視認性にも優れると感じるので @ を使います。 @ 属性の値にはメソッド名も取れると書きましたが、単なる関数ではいけません。以下のように、Vueインスタンスの生成時にコンストラクタに渡す設定オブジェクトの methods プ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Vue.js中級編！？「スコープ付きスロット」を理解しよう | Hypertext Candy
Laravelエンジニアが考えたWordPressテーマ開発環境 | Hypertext Candy