とある大規模開発プロジェクトの中で WebView 用のフロントエンドシステム開発を立ち上げて2ヶ月経ちました。Android, iOS専任のエンジニアがいないため、外部協力者の指導のもと、モバイルアプリの画面を WebView で作るためです。 ある程度その営みについて見えてきたものがあるので記事にまとめることにしました。 プロジェクト参加人数は30名以上 プロジェクト自体は4ヶ月前から動いてる このプロジェクトへのフロントエンドチームの参加は1月から 現在 WebView とモバイル・バックエンドなどの結合試験をはじめている 背景 去年12月いまの会社にテックリードとして入社し、前述とは別のプロジェクトでフロントエンドチーム立ち上げを行っていました。同タイミングで、いまの会社に誘ってくれた飲み仲間もテックリード・チームリーダーとして入社しています。フロントエンドチームはこの2名がプロパ
Moment.jsは、新規開発停止、メンテナンスモードに移行 Moment.jsは、新規機能の開発停止、メンテナンスモード(セキュリティ修正とMoment Timezoneのデータ更新は行う)に移行することが発表されています。これから新規開発するプロジェクトでは、別のライブラリを使うことが推奨されています。 僕の新規開発のプロジェクトでも当初はMoment.jsを使っていましたが、リリース前にこの発表が出たので、別のライブラリに変更することにしました。 Moment.jsのドキュメントページに、推奨ライブラリが4つ掲載されていたので、その中から選ぶことにしました。 Luxon Day.js date-fns js-Joda 簡単に結論が出るケース Day.jsを使うべき人 Moment.jsからの移行 Moment.jsを使い慣れている人 Day.jsはMoment.jsと同じAPI体系を
この記事は、Next.js Advent Calendar 2020 の6日目。 突然だが、2021年 は Fullstack Next.js 元年になる。 その理由として自分は以下のものがあると思っている。 ベストプラクティスとしての TypeScript のデファクト化 Next.js の Dynamic Routes による動的パス、 getStaticProps/getServerSideProps による使い勝手の向上 Vercel によるISRの発明 prisma の成熟 Vercel / Serverless / Cloudflare Workers / Cloudrun 等による Node.js サーバーの運用コスト減 参考: Frontend Study #1: 基調講演 - Frontend 領域を再定義する Blog - Next.js 9.3 | Next.js R
Fastify 速いですね Express が hapi より遅いのは意外でした Koa は本体だけだと Express 以上に何もしないので その分速めです よくみると驚きなのが http.Server より Fastify が速いというところ http.Server はフレームワークを使わない Node.js 自体の API です Koa や hapi はこれを中で使っています これより速いということは Fastify は http.Server は使わずに net などを使って ソケット通信部分を直接操作しているのでしょうか？ http.Server を使ってない？Fastify のソースコードを見た限りでは 特に設定をしなければ http.createServer でサーバを作成しています つまり http.Server を使っています https://github.com/fas
概要 JavaScript/TypeScriptを書く中で、自分自身の気づき、他の方から頂いたアドバイスをメモとして残してきました。 その中で、使用頻度が高そうで、知っていれば誰でも簡単に実践できる物を抜粋して記事にしました。 ですので、主にJavaScript/TypeScriptの使用歴が浅い(プログラミングの歴が浅い)方向けに少しでも参考になれば幸いと考えています。 (※JS/TSに限った事では無いものも含まれます。また、こちらに記載した記法が必ずしも優れていると言うわけではありません。本記事はあくまでも、JS・TSを利用した際にこんな記法もあるよという紹介が主要点です。) 早期returnを利用する 条件を満たす場合に直ぐに return することで、コードのネストを減らし、コードの見通しを良くするテクニックです。 簡単な例としまして下記のコードが、
前提 Node.jsのプロトタイプ汚染について書いているのですが、プロトタイプの説明（prototype と __proto__ の関係とか）を定期的に見直さないと綺麗サッパリ忘れる程度にはNode.js触っていないので、何かおかしいところあればご指摘お願いします。 概要 Node.jsではここ数年プロトタイプ汚染攻撃が流行っています。概要は以下を見れば分かると思います。 jovi0608.hatenablog.com そもそもプロトタイプって何？という人は以下の記事が分かりやすいです。自分はお守りのように定期的に読んでます。 qiita.com 外部から送られてきたJSONなどをパースして変換し、そのオブジェクトをmergeやcloneする際に __proto__ を上書きすることで Object.prototype を汚染するというものです。このオブジェクトが書き換えられると、新しく作
スマートキャンプのデザイナー/エンジニアのhaguriです。 弊社では8月1日、インサイドセールスに特化したCRM Biscuet（ビスケット） という新サービスをリリースしました。 biscuet.jp Biscuetでは Vue.js + Atomic Design でコンポーネント設計をしています。今回はその構成と考え方・Biscuetチームでの運用について紹介していきます。 Atomic Design について templatesとpagesについて Biscuetでのルール atoms molecules organisms pages ディレクトリ構成 App.vue components/ plugins/biscuet-materials/ さいごに Atomic Design について Atomic Design とは、コンポーネント単位で設計していくデザイン・開発手法で
はじめに Reactを中心としたフロントエンド開発において、以下のような構成を見かけることが多いと思います。 UIライブラリとしてReact 型のある言語としてTypeScript スタイル定義としてstyled-components コンポーネントの開発環境としてStorybook LinterとしてESLint FormatterとしてPrettier この記事では、各種ライブラリについて紹介したのち、それらを使う場合の環境構築についてハンズオン形式で説明します。 ※ アプリケーションを開発する際に必要になる設定が抜けていたので、追記しました。 各種ライブラリの紹介 まず、各ライブラリがどのようなものなのかを簡単に紹介します。 ライブラリの使い方などは公式ドキュメントなどを参照するようにしてください。 React ドキュメント ReactはUI(ボタンやフォームなど)コンポーネントを作
ウェブのフロントエンド開発に役立つライブラリとして、VueとReact、Angularがよく取り上げられます。これらのライブラリは、SPA（シングルページアプリケーション）の開発に役立つ多くの機能を持っています。 フレームワークを選定するには、「人気だから使う」という短絡的な理由で選択をするのは望ましくありません。設計思想や機能の種類、学習コストなどの観点で、プロダクト・プロジェクトチームへの適性を検討するのがセオリーです。幸いにも、それぞれを比較した記事がウェブに数多くあり、選定のヒントを簡単に得ることができます。 一方、機能面の比較ばかりが取り上げられ、性能面で紹介されている記事が少ないように見受けられます。記事『サービスにおいて速さこそが神である｜深津 貴之』でも紹介されているように、昨今のウェブはスピードが求められる時代でもあり、ライブラリの性能評価の記事があってもよいのではないで
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? はじめに さいきんのWebはSPA技術を中心としたフロントエンドが賑わっていますね💪 従来サーバーサイドを扱っていた人もフロントを触る機会が増えていたり、これからプログラミングを学んでいく人も、フロントエンド領域に興味を持っているのではと思います。 そこで、フロントエンドの経験が浅い方や初学者向けに、おすすめのドキュメントや勉強すべき領域をまとめました。 とりあえず動けば良い段階から一歩進んで、フロントエンドエンジニアとして、良いアプリケーションを作るために必要な知識を浅く広く紹介します。 ※補足 新米と表記しましたが、実際には新卒や
どうもですよ、はやちですよ٩( ᐛ )و 今回は、Canvasの操作を高速に描画できるPixi.jsを触ってみました。 導入から実装まで、ご紹介したいと思います( ˇωˇ)☝ 導入方法 npmはこちらからインストールしてお使いください！ npm install pixi.js 実装方法 image画像を操作する 画像を使用してCanvasに描画とアニメーションさせる方法をご紹介します( ˘ω˘)☝ はじめに表示するCanvasを用意します。 Canvasはサイズと背景色も設定できます( ˇωˇ)☝ let app = new PIXI.Application(800, 600, {backgroundColor : 0xDAE8F4}); document.body.appendChild(app.view); いつも使っている画像を用意します( ˇωˇ)☝ let hayachi = P
Ryan Dahl は Node.js の original author ですが、彼の作ったプロダクト deno に関するトークが jsconf.eu 2018 でありました。 Node.js にずっと関わってきた僕が見て非常に興奮するような話だったので、しばらくぶりにブログに書き起こすことにしました。 背景 Ryan Dahl は2009年に Node.js の話を初めて公の場に公開しました。その時の「公の場」というのが「jsconf.eu 2009」です。 www.youtube.com Video: Node.js by Ryan Dahl - JSConf.eu - 2009 この発表から Node.js が広まり、今やサーバのみならず、IoTデバイス、デスクトップアプリなど、様々なところで動作しています。 で、今回はその発表から9年の歳月が経過し、Node.jsに対しての設計不
Create graphics with a hand-drawn, sketchy, appearance Rough.js is a small (<9kB gzipped) graphics library that lets you draw in a sketchy, hand-drawn-like, style. The library defines primitives to draw lines, curves, arcs, polygons, circles, and ellipses. It also supports drawing SVG paths. Rough.js works with both Canvas and SVG. Install Install from npm: npm install --save roughjs And use it in
Private content!This content has been marked as private by the uploader.
元記事の著者より：この記事は主に北米文化で私が見たことを反映しています。 誰かに職業をきかれたら、私は「フロントエンド開発者です」と答えます（答えは相手によって変わることもあります）。10年か20年前は、自分の仕事に必然的に伴うものが何なのかは、かなり明瞭でした。インタラクション用にHTMLやCSSを書き、JavaScriptも多少は書いていました。駆け出しの頃、PHPやMySQLの作業に職務の大半を費やしていたとはいえ、フロントエンド開発者として見られる方が好きです（これに関しては、後に詳しく説明します）。この状況は、2010年の初頭に変わり始めました。JavaScriptが、重要で、非常に大きな存在になってきたのです。昨年の初め頃から、たくさんのフロントエンド開発者に会うようになり、あることに気付きました。フロントエンド開発者は、もはや、私が以前から知っているフロントエンド開発者ではな
Transcript KTʹؔ͢ΔใऩूΛ୶ʑͱ͢ 8F�"SF�+BWB4DSJQUFST�!��UI !NLJ@TLU Ҫ࡙ਓ NVLBJ�TBLJUP 5XJUUFS w ݴޠɺϑϨʔϜϫʔΫͷ ެࣜΛϑΥϩʔɻ w Α͘ใΛᄁ͘ਓΛϑΥϩʔ ͯ͠ɺϦετʹ·ͱΊΔɻ w ࣗᄁ͘ʂ 2JJUB w ਓؾͷߘΛݟ͓͚ͯ ͦΕͳΓʹใ௫ΊΔɻ w ϑΥϩʔ͓ͯ͘͠ͱ ϑΟʔυʹϑΥϩʔͨ͠ਓͷ ετοΫͨ͠ߘ͕ྲྀΕΔɻ 2BMFJEPTQBDF w 2JJUBΛಠࣗΞϧΰϦζϜͰ ධՁͨ͠αΠτ w 2JJUBͱ߹Θͤͯ͏͜ͱͰ ΑΓྑ͍ใΛ௫ΊΔɻ ͯͳϒοΫϚʔΫ w ςΫϊϩδʔΧςΰϦʔΛ ݟ͓͚ͯྑ͍ɻ w ͨ·ʹ৽ணΛݟΔͱ ྑ͍ใ͋Δɻ 4MBDL w ༷ʑͳίϛϡχςΟʔͷ 4MBDLνʔϜ͕͋Δɻ w ࣭͢ΔͱͰ͖Δ
大づかみなお話です 結論: 課題を知ったらなんでもいいから手を出してみよう！ （細かいところは犠牲にしてます。React でもステートフルコンポーネントつくれるよねとか）
実務でよく使うhtml,css,jsの小技をつらつらと紹介します。 ※2/11のスクーの授業中で使った資料です。 https://schoo.jp/class/1776 【オシャレCSS編】 1. transformを使って要素を変形させるワザ 2. transitionを使い、CSSだけで簡単なアニメーションを行うワザ 3. keyframesを使ってCSSだけで複雑なアニメーションを行うワザ 4. 矢印アイコンをcssだけで表現するワザ 5. アイコンをアニメーションさせるワザ 6. CSSプロパティ”filter”で画像を加工するワザ 【地味だけど使えるワザ編】 7. 今どきの、要素を上下中央寄せにするワザ 8.「flexbox」で要素を自由自在に整列させるワザ 9. Windowsでwebfontをちょっとマシに見せるワザ 10. ア
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
