新しいNext.jsの入門 ─ App DirectoryによるWeb開発をハンズオンで理解しよう｜ハイクラス転職・求人情報サイト AMBI（アンビ）
使用するライブラリ このアプリで、Next.js以外に使用するライブラリは以下の4つです。インストール方法等は必要な箇所で説明します。 Prisma TypeScriptのORマッパーです。アプリでのノートの保存等に使用します。 ▶ Prisma | Next-generation ORM for Node.js & TypeScript Tailwind CSS CSSフレームワークです。アプリのUIデザインに使用します。 ▶ Tailwind CSS - Rapidly build modern websites without ever leaving your HTML. Zod バリデーションライブラリです。APIレスポンスの型定義とバリデーションに使用します。 ▶ Zod | Documentation SWR データフェッチ用のライブラリです。ノート一覧のクライアントサイドで
Web パフォーマンスのための HTML 最適化 | メルカリエンジニアリング
Merpay Advent Calendar 2019 の2日目は @1000ch (id:hc0001) がお送りします。この記事は2019年11月16日に福岡で開催された Frontend Conference Fukuoka 2019 のセッション、HTML Optimization for Web Performance の書き起こし記事です。 docs.google.com なぜ HTML の最適化が重要なのか 先日公開された Chromium Blog: Moving towards a faster web をご覧になられたでしょうか。Google は Web ページのパフォーマンスの重要性を様々な形で啓蒙してきましたが、この記事では Chrome のもとになっている Chromium に、Web ページのパフォーマンスをブラウザ UI として表示する機能を追加し、ユーザーが
Webフロントエンド開発(2021)の見取り図をつくりたい
本業はiOS開発なのですが、6月頃から個人開発でWebフロントを触っています。 Webフロントに入門するときに、開発の前提知識・専門用語が多すぎて、脳が処理しきれない状態になりました。 これでも数年前のより混沌としてた時期よりは安定してきているように思うんですが、それでもやはりカオス感は否めませんでした。 Webフロントエンド開発の見取り図があればいいのにと思ったので、自分でちょっとつくってみようと思いました。 個別の技術要素の情報は豊富にある（ありすぎると言ってもいいかもしれません）んですが、全体像がよくわからないので、 たとえば「TypeScriptで開発した方がいいのか？」とか、「Babelとかwebpackってインストールしなきゃいけないの？」とか、 そういう素朴な疑問が学習進めて行っても、なかなか解消できなかったので、いい感じのざっくり感でまとめられたらと思います。 この記事で全
非エンジニアがWeb開発で知ってると便利過ぎる無料サービスを厳選してみた！ - paiza times
どうも、まさとらん（@0310lan）です！ 今回は、Web開発などで役に立つ厳選した無料サービスをご紹介します！ 特にWeb開発に慣れていない初心者や非エンジニアの方でも、手軽に特定の機能を提供するページを構築できるサービスを厳選してみました。 また、複数人でのレビュー、サイトの分析、学習リソースなども合わせて掲載しているので、ご興味ある方はぜひ参考にしてください！ ■独自ロードマップを公開してユーザーと共有する！ 【 Roadmap Show 】 Webアプリやサービス自体のアップデートや予定している機能追加などの情報を、プロダクトロードマップとして手軽に一般公開できる便利なサービスです。 サービス側が何をやっていて、どのような改善をしているのかをユーザー側からも分かりやすくなります。 基本的な使い方も簡単で、いくつかのカテゴリ別にタスクカードを追加していくだけです。 これから予定して
ngrokが便利すぎる - Qiita
はじめに 先日利用したngrokというサービスが便利過ぎたので紹介します。 ngrokとは 簡単にいうと、ローカルPC上で稼働しているネットワーク（TCP）サービスを外部公開できるサービスです。例えば、ローカルPCのWebサーバを外部公開することができます。 ngrokの導入 ngrokにユーザ登録 ngrok公式サイトからユーザ登録します。Githubアカウント、Googleアカウントでも登録できるのでお好みで登録します。 ngrokコマンドをインストール ngrokのサービスを利用するには、公開されているngrokコマンドを使用します。ダウンロードサイトからOSに合ったファイルを取得します。ツールはzip圧縮されているだけなので、ファイルをダウンロードしたら任意の場所に解凍します。 ngrokコマンドをインストール ツールのインストールが完了したら、アカウント登録後に表示される「Wel
なんとなく CORS がわかる...はもう終わりにする。 - Qiita
Access to XMLHttpRequest at 'http://localhost:8081' from origin 'http://localhost:8080' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: It does not have HTTP ok status. Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8080' is ther
開発しやすい環境の作り方~Web系~ - Qiita
はじめに 何か記述等にミスやこうした方がいいとのことがあればコメントで教えてくださると幸いです。 目的 開発を円滑するために行ったら良いと思われることについての紹介 概要 タスクランナーのGulpを用いて開発の効率化を図る。 内容は、SassやPugで書いた内容を変換し、ファイルの内容が変更された場合は自動的にブラウザのリロードを行う流れを作成する。 Windows 8.1 npm 2.15.1 node 4.4.3 gulp 3.9.1 環境構築 フォルダ構成 まず初めに、フォルダ構成を作成します。今回の場合私はポートフォリオサイト作ろうと思っていたので以下のようにしました。 今回はこのフォルダ構成で説明していきます。 root/ ├ js/ | └ index.js ├ css/ | └ style.css ├ img/ | └ hoge.png ├ sass/ | └ style.s
レガシーおじさん、SPAを始めてみた。そして限界を知る
はじめに 最近、Webの記事を見てるとReactだVue.jsばかりが上がっていてJSPやERBの話をしてる人は誰もいません。jQueryの記事ももちろん見ない。 つまり、Webだけ見る限りではほとんどの人がSPAを使ってるように見えます。 私はWeb界隈には居るもののどちらかというとバックエンド寄り、もっというとそもそもWebとか関係ない領域を見る事が多いので、ちょっとキャッチアップを兼ねていくつかの個人プロダクトにVue.jsを採用してみました。 jQueryくらいで頭が止まってたので。サーバサイドもマイクロサービスでAPI化が進んでるのでフロントもそれに合った技術を選ばないとですしね。 というわけで、今回はその中で得た知見というか、従来型のサーバサイドでのWeb開発をしていた人の視点でVue.jsをキャッチアップする流れで書いていきたいと思います。 まあ最終的な結論は正直「これすごく
2020年の11の必見のフロントエンドトレンド - Qiita
こちらの記事は、Jonathan Saring 氏により2019年12月に公開された『 11 Must-Know FrontEnd Trends for 2020 』の和訳です。 本記事は原著者から許可を得た上で記事を公開しています。 ランチ中のフロントエンドトークでスマートに見られる方法！ チームのランチトークでスマートに見られることは、最新のフロントエンドのトレンドを常に把握しておくための大きな理由であることは言うまでもない。 それは、あなたがより良い開発者になり、より良い技術とより良い製品を作るのに役にたつかもしれない。 たぶんね。 だから、いくつかの興味深い方向を示すことで、この名誉あるクエストを君が簡単に達成できるように少し時間をもらいたい。 すべてのコンセプトについて1から10まで説明するのではなく、そのコンセプトとそれがどのように有用であるか紹介しよう。最後にはさらなるリソー
牧歌的 Cookie の終焉 | blog.jxck.io
Intro Cookie は、ブラウザに一度保存すれば、次からその値を自動的に送ってくるという、非常に都合の良い仕様から始まった。 State Less が基本だった Web にセッションの概念をもたらし、今ではこれが無ければ実現できないユースケースの方が多い。 冷静に考えればふざけてるとして思えないヘッダ名からもわかるように、当初はこのヘッダがこんなに重宝され、 Web のあり方を変えるかもしれないくらい重要な議論を巻き起こすことになるとは、最初の実装者も思ってなかっただろう。 そんな Cookie が今どう使われ、 3rd Party Cookie (3rdPC) の何が問題になっているのかを踏まえ、これからどうなっていくのかについて考える。 Cookie のユースケース Web にある API の中でも Cookie はいくつかの点で特異な挙動をする 一度保存すれば、次から自動で送る
TCP/IPをわかりやすく - 通信プロトコルの基礎知識を図解で学ぼう｜ハイクラス転職・求人情報サイト AMBI（アンビ）
TCP/IPをわかりやすく - 通信プロトコルの基礎知識を図解で学ぼう 現在のインターネットを支える技術であるTCP/IPについて、基礎となるプロトコル群と、TCPの基本機能を丸田一輝さん、 中山悠さんに解説していただきました。 今からおよそ50年前、パケット交換方式による世界初のコンピュータネットワークであるARPANETが構築されました。それ以来、TCP/IP（Transmission Control Protocol / Internet Protocol）は通信を実現する基盤技術として使われ続けています。今ではパソコンに限らず、スマートフォンやゲーム機、センサー、最近では自動車など、無線通信機能を持ったさまざまな端末も含めコンピュータネットワークは構成されています。 その中でも「通信の信頼性を確保する」役割を担っているTCPは、その性質上、多くの機能を備えています。加えて、時代とと
HTML標準めぐりブラウザー業界団体とW3Cが合意--主導権は業界側に
Apple、Google、Microsoft、Mozillaのブラウザーベンダー大手4社が構成する業界団体が、ワールドワイドウェブ（WWW）の標準化団体であるWorld Wide Web Consortium（W3C）と合意し、主導権争いに勝利した。これは事実上、業界団体側がサポートしなければ、W3Cがウェブ標準を規定できないことを証明するものだ。 業界団体のWeb Hypertext Application Technology Working Group（WHATWG）は2004年に結成された。団体結成は、W3Cが現代的なHTML標準を開発するペースが遅かったことと、XMLに似た構造を持つXHTMLにHTMLを移行させるW3Cの計画を受けての動きだった。ブラウザーベンダー側は当時、XHTMLに賛成していなかった。 当時Apple、Mozilla、Operaが構成メンバーだったWHATW
SPAにおける状態管理:関数型のアプローチも取り入れるフロントエンド系アーキテクチャの変遷 - エンジニアHub｜Webエンジニアのキャリアを考える！
こんにちは、小林（@koba04）です。 本記事では、シングルページアプリケーション（以下、SPA）における状態管理について解説します。 GmailやTwitterは、SPAとして構築されている代表的なWebアプリケーションであり、スムーズなページ遷移をSPAによって実現しています。またElectronやPWA（Progressive Web Apps）の登場により、複雑なアプリケーションをWebの技術を使って構築する場面も増えてきました。 これらの複雑なアプリケーションにおいては、既存のページ単位での状態管理の考え方では対応が難しくなります。 そこで今回は、具体的なフレームワークも取り上げながら、Webフロントエンドにおける状態管理のアプローチについて紹介します。 フロントエンドでの状態管理の複雑化 ページの単位を超えた状態の保持 モデルとビューによる処理の分割 イベントの管理が複雑にな
Web のコンセプト
※ 他にも HEAD とか OPTIONS とか TRACE とか LINK とか UNLINK とかあるみたい POST と PUT と PATCH の違い POST はクライアント側で resource の親 resource を指定して更新を行う(サーバ側で resource 名が割り振られる): 行うごとに結果としての resource の状態は変化する PUT はクライアント側で resource を指定して更新を行う: 何度行っても結果としての resource の状態は同じになる PATCH はクライアント側で resource を指定して部分的な更新を行う( PUT に似てる) REST の発展系としての HATEOAS の考え方 REST は resource の位置と resource に対するメソッドの適用ですべての情報との関わり合いを定義していた。 しかしこれだと、
【サンプルあり】リセット・ノーマライズ・サニタイズCSSの違いと使い方
みなさん、こんにちわ！ ジャングルオーシャンのラファエロです！！ HTMLのタグには「デフォルトCSS」と呼ばれる、ブラウザに組み込まれたCSSがはじめから適応されているのをご存知でしょうか？ 例えば、見出しをh1タグでマークアップするとfont-sizeでサイズ指定した訳じゃないのに大きなフォントサイズで表示されますよね？ またliタグにはlist-styleを指定した訳じゃないのに文頭に「・」が付いていたり、pタグにmarginを指定した訳じゃないのにmarginが付いていたり… これがデフォルトCSSなんですが、結局のところ自分で書いたCSSで上書いてしまうので邪魔なんですよね(^^;) さらに面倒くさいのが、ブラウザごとに差異があること… ブラウザごとに見え方の違うWebサイト作るわけにはいかないですよね。 ということで、今回はデフォルトCSSの影響を受けずにコーディングするために
DNSの仕組み | Yakst
DNSの仕組みと一般的な使い方について、DNSに関する作業をする時によく使うコマンドや、具体的な例を交えてまとめた入門的記事。 私はよくドメイン名に関する問題に遭遇します。どうしてウェブサイトが動かないんだ？ どうしてこんなくだらないのが上手くいかないんだ、何やってもダメだ。ただ動かしたいだけなのに！ 質問をしてくる人はたいてい、DNSが何かを知らず、基本的な部分がどのように動くのかの理解にも乏しいです。より一般的には、みんなDNSが強くて複雑なものだと思っているのです。この記事では、その恐怖を和らげようと努力してみようと思います。一度基本的なコンセプトを理解してしまえば、DNSは簡単です。 DNSとは まず大事なことから始めましょう。DNSは、Domain Name Systemの略です。基本的には、これはグローバルに分散されたキーバリューストアだと言えます。世界中のサーバーは、あなたが
OmniDB
OmniDB 04 / 25 / 2016 An Open Source Web Tool For Database Management You read it right! We are happy to announce that the OmniDB Team decided to go Open Source, licensing the tool under GPL! This is a big step for us and we hope to provide our friends with a great solution, designed and developed to remove obstacles. We will keep improving the tool and do our best to continue providing new featur
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Webフロントエンド基礎研修 ~歴史から学ぶ、現場のスタンダードな開発~
Vim.Wasm
テキスト音楽「サクラ」
