Developers Summit 2023 10-A-4 「フロントエンド開発のためのセキュリティ入門」の発表資料です。 https://event.shoeisha.jp/devsumi/20230209/session/4176/ 「HTTPS化」「CORS」「XSS」「脆弱なライブラリのチェック」について説明しています。
以下のツイートを読んで気持ちが昂ったので。 みんな、もうSNSでいがみ合うのはやめよう。 平和に好きなJWTの話でもしようよ。 JWTの格納場所はlocalStorageとCookieのどっちが好き?— 徳丸 浩 (@ockeghem) 2022年2月11日 というのも、JWTをセッションに使うときに保存先含めて一時期悩んでいたので、その時の自分の解。 ただ、考えるたびに変化しているので、変わるのかもしれない。 要約 タイトル。 あとは優秀な方々が既に色々考えておられるのでそちらを読むとよいでしょう。 SPAセキュリティ入門~PHP Conference Japan 2021 JWT カテゴリーの記事一覧 - r-weblife どうしてリスクアセスメントせずに JWT をセッションに使っちゃうわけ? - co3k.org JWT形式を採用したChatWorkのアクセストークンについて -
今回も誰も興味ないシリーズなので今まで書いてこなかったのですが、Semantic Versioningに関して幻想を抱いている人がいる可能性があり、そういう方にどうしても現実を知っておいて欲しかったので書きました。3行要約(と可能なら余談)だけでも読んでいただけると幸いです。 3行要約 Semantic Versioning 2.0.0にはバージョン"比較"の定義はあるが、バージョン"制約"(>= 2.1.3みたいなやつ)の定義がない その結果、同じsemver準拠ライブラリでも制約の解釈が異なり結果が真逆になる というかそもそもsemver使ってるエコシステムが少なすぎる 背景 セキュリティアドバイザリでは特定のバージョンが脆弱であることを示すためにバージョン制約が使われることが多いです。例えば >=1.2.0 <1.2.6みたいなやつです。この場合、1.2.5は脆弱だが1.2.6は修正
2015 年 4 月 12 日に Chainer の最初のコードをコミットしてから,およそ 4 年半と少しが経ちました.はじめのはじめは軽い気持ちで書きはじめたコードでしたが,今では一線級の研究を立派に支えるまでになりました.深層学習フレームワークの世界も当時とは様変わりして(当時は TensorFlow も PyTorch もなかったわけですから,本当に変わりました),思えば遠くにきたものです. 今日,PFN は社内の研究開発に用いる主なフレームワークを PyTorch に移行すると発表しました.会社にとってももちろんですが,業務としてはこの 4 年半,Chainer 一筋でやってきた自分にとっては特に,大きな転換点です. まず率直な感想として,Chainer の開発は本当に楽しかったです.書きはじめた頃は,深層学習フレームワーク競争の真っ只中で,Theano の上に乗っかるフレームワー
Vue.jsは初学者にもとても手厚いサポートを提供してくれるフレームワークです。 たとえば、以下のコードで「リセット」ボタンを押すと「propsのcountは子コンポーネントから変更すべきではない」とわかりやすくエラーを表示してくれます。 <template> <div class="CountViewComponent"> カウント={{count}} <button @click="reset">リセット</button> </div> </template> <script> export default { props: { // 表示するカウント値 count: { type: Number, default: 3 } }, methods: { // カウントをリセットします reset() { this.count = 0 } } } </script> それでも時として、
ウェブ上でJavaScriptを実行してバグが発生した場合、ブラウザに内蔵されている開発者ツールを使ってデバッグすることがよくあります。そうしたブラウザでのデバッグにおいて役立つテクニックをNetflixでフロントエンドの開発に携わっているアラン・ノルバウアーさんがまとめています。 67 Weird Debugging Tricks Your Browser Doesn't Want You to Know | Alan Norbauer https://alan.norbauer.com/articles/browser-debugging-tricks ◆高度な条件付きブレークポイント 開発者ツールの「ソース」タブにはデバッガーが用意されており、JavaScriptの任意の行にブレークポイントを設定することで実行を一時停止して変数やコールスタックの中身を確認できます。ブレークポイントを
✨無料公開中✨ 業務ができる中級者になるためのJavaScript入門の第2弾となります。何度学んでも今一つ理解できないDOMに関して、できるだけわかりやすく説明しています。 業務ができる中級者になるためのJavaScript入門(文法編) https://zenn.dev/books/568dd4d86562a1/edit ✨開発環境に役立ててください✨ 👾 やっぱりwebpackがわからない(エピソード1) https://zenn.dev/antez/articles/58307946cf4f3e 👾 やっぱりwebpackがわからない(エピソード2) https://zenn.dev/antez/articles/638382faa06bd7 👾 そもそもnpmからわからない https://zenn.dev/antez/articles/a9d9d12178b7b2 ✨Wo
Intro 前回の記事で、奇遇にも本サイトの AMP 対応を落とすことになった。しかし、そうでなくても AMP をどこかでやめることは考えていたため、きっかけの一つが SXG 対応になったのは、順当な流れだと筆者は感じている。 これは AMP がなぜ始まり、なぜトーンダウンしつつあるのか、そしてこれからどうなっていくのか、という流れをまとめるいい機会でもある。 その過程で生み出され、本サイトでも検証を続けてきた Performance Timing API, Core Web Vitals, Signed HTTP Exchange 、そして今構想されている Bento AMP などを踏まえ、一連の流れを覚えている範囲で記録としてまとめておく。 ソースは筆者の主観であり、眺めてきた体感を mozaic.fm の Monthly Web などで話してきたものがベースなので、信頼性や正確性は期
対象読者と目的 非同期処理の実装方法は知っているが、仕組みを詳しく知らないのでベストプラクティスがわからないときがある 実行順序の保証がよくわからないので自信をもってデプロイできない変更がある より詳しい仕組みを理解することでより計画的な実装をできるようになりたい という動機で書かれた記事です。同様の課題を抱える人を対象読者として想定しています。 目次 実行モデルとタスクキュー Promise async/await AbortSignal, Event, Async Context WHATWG Streams / Node.js Streams (執筆中) 未定 入門記事へのリンク プロミスの使用 - JavaScript | MDN Promise, async/await (現代の JavaScript チュートリアル) JSの初心者にPromiseとasync/awaitの使い方
こんにちは。くるしばです。 元々コンサルタントの仕事をしていましたが、独学でプログラミングを学習し、Webサービスを作って起業しました。 その後個人で開発したサービスを売却したり、また別のIT系の会社を創業、経営したりしています。 去年の8月から下記のTwitterにてプログラミング学習に関して発信し始め、ありがたいことに13000人以上の方々にフォローして頂きました。 プログラミング初心者に絶対覚えてほしい、ググる時の効率が10倍上がるコツ pic.twitter.com/hK1ZhNavwh — くるしば | 読めば10倍効率が上がるプログラミング学習の教科書 (@shiba_program) September 13, 2022
Contents (Click to expand) ↕️ Design Mode Pretty Print Command Pallet and Super Search Snippets Live Expressions Tracking Changes Console Shorthand Find Unused Code Rendering Panel Network Paint Times Network Timings Inspect Network Requests Performance Identifying Memory Leaks Raw Memory Inspection Test bfcache Full Refresh Lighthouse Page Size Breakdown Record User Flows Advanced User Flow Opera
ということが、意外と知られていないように思うので、書いておく。 みんな大好き「いらすとや」さんのフリー素材ですが、最近本当に色々なところで見かけるようになってきました。かわいいしフリーだし、プレゼンテーションのスライドなんかで本当によく見かけますよね。 で、タイトルの件です。 「ご利用について」のページを読んでみると、以下の記載があります。 ご利用規定 当サイトで配布している素材は規約の範囲内であれば、個人、法人、商用、非商用問わず無料でご利用頂けます。「よくあるご質問」に詳しく記載しておりますのでご利用の前に一度ご確認ください。 ご利用について | いらすとや 以下の場合、有償にて対応させていただきます。メニューの「お問合せ」からご連絡下さい。 素材を21点以上使った商用デザイン 素材の高解像度データの作成(高解像度イラストのサンプル) ご利用について | いらすとや 個人、法人、商用、
日頃の忙しい業務を少しでも楽にしたい、効率化したいと考えている人にぴったりな、Web制作で使える最新オンラインツールをまとめてご紹介します。 コピペで利用できるお手軽CSSツールやSVGツール、コード知識不要のノーコードツール、色に困ったときに便利な配色ツールなど、クリエイティブな案件で活用したい新しいツールを揃えています。 カテゴリごとに整理しているので、制作フローに新しく追加してみてはいかがでしょう。 コンテンツ目次 1. Web制作便利ツール 2. 配色ツール 3. デザインコレクション 4. プロトタイプ、アイコンツール 5. コラボ、リモートワークツール 6. 面白、クリエイティブツール Web制作の効率、生産性アップ!話題の最新オンラインツールまとめ Web制作便利ツール クリックで一発コピペできる、120種類以上のCSSボタンを集めたライブラリ。3Dやグラデーション、レトロな
Chromeに実装された疑似クラス「:has()」がjQueryの「:has()」に悪影響、一定の条件下でWebサイトが壊れる可能性 最近リリースされたSafariとChromeで、CSSのSelectors Level 4(現時点でドラフト)仕様にある疑似クラス「:has()」が相次いで実装されました。 疑似クラス「:has()」は、カッコ内に要素を書くと、その要素を持つ親要素にのみ指定したスタイルを設定できる、という便利な機能を提供してくれます。 ところがこの「:has()」のChromeにおける実装は、jQueryで似たような機能(カッコ内の要素を持つ親要素を選択する)を提供する「:has()」に悪影響を及ぼし、このjQueryの「:has()」を使っているWebサイトでは、Chromeを利用した場合に一定の条件下でWebサイトが壊れるなどの問題を引き起こすことが分かりました(同じエ
webpack is 何? webpack とは、一言で言うと JavaScript 向けのモジュールバンドラーです。 複数の JavaScript モジュールを一つ(またはいくつか)のファイルへバンドル(=bundle: 束にする、包む)してくれます。 複数の JS モジュールを(場合によっては CSS や画像などのアセット類も)一つにまとめる すでに新規開発の終了も伝えられる webpack ですが、「STATE OF JS 2022」ではいまだに利用率 No.1 の地位にあります。 webpack 後継のモジュールバンドラーとしては、すでに Turbopack の開発開始がアナウンスされています。しかし、これがプロダクションレベルに達するまでは webpack がおそらく使い続けられることになるでしょう。 使うメリットは何? モジュールを 1 つ(もしくは少数)にまとめることでブラウ
みなさんはPicture-in-Picture(PiP)という機能を使ったことがありますか。PiPは動画コンテンツなどを浮遊する小窓に表示する機能です。小窓はウィンドウの外側を自由に移動できます。 デスクトップが賑やかになりがちなPCでもPiPは大活躍なのですが、特にスマートフォンにおいては数少ない「ウィンドウ」機能になります。Androidはもちろん、iOS14も対応したことで話題になりました。 これによってスマホ一台あれば、ソシャゲの公式生放送を見ながらソシャゲのイベントを周回する地獄のような行為が可能になりました。 利用者という視点から見ると非常に便利なのですが、開発者から見ると動画しか表示できないのはなかなか使い所が難しくなります。そこで、この機能を使って好きな情報を表示できないか実験してみました。 PiP機能の対応環境 Chrome 70 Firefox 71(制限付き) mac
本記事で紹介している賃貸物件検索サービス Comfy は 2021/07/30 13:48 をもって閉鎖いたしました。使用していた物件データに関して、データの掲載元より利用許諾を得られなかったためです。本記事で紹介しているサービスが閲覧いただくことができなくなってしまい、大変申し訳ございません。本記事は、サービスに関する一部の内容を削除した上で、使用技術等に関する内容についてはいったんそのまま残しておきますが、近いうちに記事自体を削除するかもしれません。 ※ 2021/07/30 19:00 頃追記 こちらを見に来ていただいた方に、サービスが動いていた頃の動画を下記ツイートにアップロードしています。 サービスを直接お試しいただけない状態で申し訳ございませんが、少しでもサービスの雰囲気が伝われば幸いです。 下記、元の記事の内容です 個人開発で 賃貸物件検索サービス Comfy (上記サービス
こちらの記事は、Jonathan Saring 氏により2019年12月に公開された『 11 Must-Know FrontEnd Trends for 2020 』の和訳です。 本記事は原著者から許可を得た上で記事を公開しています。 ランチ中のフロントエンドトークでスマートに見られる方法! チームのランチトークでスマートに見られることは、最新のフロントエンドのトレンドを常に把握しておくための大きな理由であることは言うまでもない。 それは、あなたがより良い開発者になり、より良い技術とより良い製品を作るのに役にたつかもしれない。 たぶんね。 だから、いくつかの興味深い方向を示すことで、この名誉あるクエストを君が簡単に達成できるように少し時間をもらいたい。 すべてのコンセプトについて1から10まで説明するのではなく、そのコンセプトとそれがどのように有用であるか紹介しよう。最後にはさらなるリソー
免責事項 社内向けに展開するように雑にまとめました Next.jsの知見が深くない人がリードしてPoCを立ち上げなきゃいけなくなったが、社内的にはNext.jsを推奨しているみたいな場面を想定しています なので自信ないところも多いですが割と断言するように心がけて書いています PoCの立ち上げ想定なので、jest/Storybookなど内部品質面についてあまり深く書くことを避けています ほぼ自分の知識だけで書いており私見も多いですし、そもそも自分自身がトップクラスの知識や視座を有しているわけでもないので、まずは以下の話を理解はした上で、踏襲するかどうかは別途他記事やGitHub、公式ドキュメントなどを漁って判断することを推奨 App RouterかPages Routerか 2023年末現在まだApp Routerは技術記事が足りてきている印象ではないため、社内でノウハウを積極的に貯めていく
相続税を節税しようとは思わなかった。天から降ってきたようなお金だからだ。ただ、とにかく期限内に正確に申告しなければ、自分の身が危うくなる。そこで父の死去直後から、相続税について猛勉強を始めた。そして、なすべき仕事を片っ端からこなしていった。 不幸中の幸いと言おうか、東日本大震災と福島第一原子力発電所の事故によって、日本中に自粛ムードが漂っていた。講演会やイベントなどの予定は、軒並みキャンセルになった。 「この10年間でこんなにスケジュール表が空いていることはない」というほど暇だったおかげで、奇しくも相続対策に全力を傾注できた。もし父が亡くなったのが2011年でなければ、とてもあの膨大な作業を一人でこなすことは不可能だったと思う。 以下、私が取り組んでいった膨大な作業を、覚えている限り、ご紹介しよう。 「お父さんをおんぶして2階まで来て下さい」 まず最初に、某銀行の高田馬場支店にある父の貸金
Infinite Mac is a project by Mihai Parparita to make classic Mac and NeXT emulation easily accessible. It uses WebAssembly ports of Mini vMac, Basilisk II, SheepShaver, DingusPPC, and Previous to allow a broad set of System Software/Mac OS versions to run on the web. Shortcuts to the most popular versions are available: system6.app, system7.app, kanjitalk7.app, macos8.app, and macos9.app. FAQ How
「Python」と「Google Colaboratory」で株価データ分析に挑戦:「Python」×「株価データ」で学ぶデータ分析のいろは(1) 日々変動する株価データを題材にPythonにおけるデータ分析のいろはを学んでいく本連載。第1回はPythonを実行する環境とデータの前準備について。 はじめに 連載第1回は「Google Colaboratory」でサンプルプログラムを実行するための環境を用意する方法や利用するPythonのライブラリを説明します。「Google Chrome」と「Googleアカウント」を用意して読み進めてください。 なお、連載の趣旨がデータ分析であるため、Pythonの言語仕様や文法の詳細を割愛する場合があることをご了承ください。 Google Colaboratoryの準備 Google Colaboratoryとは、Googleが提供するブラウザ上でPy
はじめに Pythonの環境構築は僕にとって、戦争でした。 如何せんツールが多すぎます。 インターネットで調べるとざっと挙げるだけで 元から入っているpython3 元から入っているpython3 + venv pyenv pyenv + pyenv-virtualenv pyenv + venv anaconda docker + python docker + anaconda ... 以上のような組み合わせが山程出てきます。 よく最近のゲームのキャラメイキングの 「組み合わせは無限大!」を思い出します。 この記事では、それぞれの環境構築の概念をイラスト画像でまとめようと思います。 環境構築のコマンド自体は取り扱わないためご注意下さい。 追記 2019/11/07 本記事はPython初心者による「概念のみ」に関する説明のため、ベストな環境構築や、すべて正確かつ詳細な内容は含んでないで
やっぱりwebpackがわからない(エピソード2)、そもそもnpmからわからないを公開しました。 webpackがわからない 最近はViteが注目されだして、実際にとても良いビルドツールです。Vue.jsのEvan Youさんが開発しただけのことはありますね。ネーミングもイカしてます。しかし、だからといって、では開発環境にViteを採用しようと簡単にはできないのが、業務の辛い所です。新しい技術を採用して、「わしが全責任を引き受けるぜよ」というThe 男気!な人はなかなかいません。 したがって、当分はwebpackを使い続けることになるのですが、これが未だによくわからないという人が意外と多いです。フロントエンドプログラミングの初心者に近い人などは、この段階でつまずくことにより、すっかり自信をなくしてしまうこともあります。 ですが一先ず安心してください。webpackを含むこれらフロントエンド
はじめに モダンフロント開発に必須の知識であるES2015〜以降の記法と、実務でよく使用される高階関数について、自分の中で改めて復習、整理しておきたいと思います。 それぞれの項目に★~★★★の重要度も記述しています。 ★★★ => 必ず覚えておくべき ★★ => 覚えておくべきだが、使う場面が限られる ★ => 知識としては知っておいた方が良い 現在フロントエンドエンジニアの方やフロントエンジニアになりたての方、フロントエンドエンジニアを目指して勉強中の方に読んでいただけたら幸いです。 ES(ECMAScript)とは? JavaScriptの標準仕様。 現在ブラウザで使われているJavaScriptは、ECMAScriptの仕様に則って開発されています。 JavaScriptは他の言語のようにversionなどが存在せず、「ECMAScriptのversion~~に対応しているJavaS
なぜ書いたか 筆者もWebサイト制作をそこそこ長くやってきておりいまは業務でVueを書いたりちょっとReactを書いたりSvelteを書いたりしていますが、2年前くらいまではReactやES6の構文すら書いたことがありませんでした。 WordPressでのサイト制作が多く、機能が少ないサイト制作会社ではjQueryで充分なことも多く、恥ずかしながら業務時間外での学習や外部の情報を追うこともしていなかったため、開発系の技術スタックに慣れるのにかなり時間がかかりました。 まずはよく使うコードを見て解説しながら答えの一つを示し、よく出てくるコードをざっくり理解して書けるようにすることで、実務でReactを取り入れる取っ掛かりになればいいなぁという思いでこの記事を書いています。 続編は多分今月中に書きます。 こちらは基礎編です。 対象者 普段jQueryでWebサイトを制作している 生のJSはあん
AWSはオープンソースとして開発されているコードエディタVisual Studio Codeの拡張機能として、これまでプレビュー公開されていた「AWS Toolkit for Visual Studio Code」が正式版になったことを発表しました。 AWS Toolkit for Visual Studio Codeと、AWS Command Line Interface(AWS CLI)やDockerなどを組み合わせることで、サーバレスコンピューティング環境であるAWS Lambdaのローカル環境でのステップ実行やブレークポイントの設定などのデバッグ操作などが可能になります。 そして開発したアプリケーションをAWSの任意のリージョンへのデプロイもVisual Studio Codeから手軽に行えるようになります。 AWS Lambdaのローカルデバッグが可能 AWS Toolkit f
はじめに 今回の記事では、私たちプログラマーが開発や学習を進める中で必ず確認しておくべきGitHubリポジトリを20紹介する。今回の記事の対象は主に以下の通り。 開発・学習に必要な情報を収集しているプログラマー GitHubを開発・学習の参考にしたいプログラマー 情報収集の方法がわからないプログラマー freeCodeCamp 世界最大規模のプログラミングメディアであるfreeCodeCampのGitHubリポジトリ。扱う内容はWeb開発、モバイルアプリ開発やデータサイエンスなど非常に幅広い。特にPythonやReact、Node.js、Flutterを実務で扱うプログラマーは必見。 最大の特徴はGitHubリポジトリの名前にあるように完全無料で学べることだ。初心者から上級者まで毎日確認するべきGitHubリポジトリ。 free-programming-books ネット上にあるすべての無
この記事は 「Develop fun!」を体現する Works Human Intelligence Advent Calendar 2020 21日目の記事です。 昨日の記事は@sparklingbabyさんのStream API がもっとわかる記事でした。 あらすじ 私は2019年にWorks Human Intelligence(正確には分社前の会社)に新卒入社し、 19年10月からプロダクト開発部門に配属され、SETエンジニアとしてとある製品のJava開発環境の改善に取り組んでいます。 ざっくりとプロダクト開発を紹介するとこんな感じです。 3万クラス程度ある大規模Java Webアプリケーション 開発環境はEclipseを使用 開発者のOSはWindowsのみ Before 私が開発チームに参加した時点では 部門として新規開発に注力しており、足下の環境改善をやる担当者がおらず、 い
ハイクラス求人TOPIT記事一覧「がんばらないTypeScript」のための現実的な設定を考える ─ 4レベルの厳しさを使い分けてTypeScript疲れを克服しよう! 「がんばらないTypeScript」のための現実的な設定を考える ─ 4レベルの厳しさを使い分けてTypeScript疲れを克服しよう! エンジニアHubでは2019年に「がんばらないTypeScript」を紹介しました。JavaScriptに静的型付けなどを提供するTypeScriptは、今では実プロジェクトに採用されるプログラミング言語になっています。そこで現実的なTypeScriptの設定を、藤吾郎(gfx)さんに解説してもらいました。 2021年の現在、TypeScriptの価値はますます広く認められるところとなり、多くのJavaScriptプロジェクトがTypeScriptで開発されるようになってきました。またT
私はウンザリしています。 「○○対応」は曖昧なのでやめてください。「○○を修正した」の方が直接的です。 こんな指摘を新人が入ってくるたびにコードレビューやドキュメントレビューで繰り返しています。どうも、プログラマー(と言うか理系?)には独特の言語文化があり、みんな同じような分かりにくい表現をしてしまうようです。 「レビューを依頼する前にこれを読んどいて!」と言える記事なり本なりがあれば良かったのですが、良いものが見つけられなかった(ご存知なら教えてください)ので、とりあえずレビューでよく指摘する日本語の文章の問題点や変な表現ポイントを列挙しました。 なお「コメントは必要十分な量を書く」「チケット番号やWikiのURLを書く」といった、良く知られた・日本語に限定されない話題は省略しています。 (※コメント欄などの指摘を受け「補足」を追加) (※タイトル変更。「コードレビュー前に直して欲しい日
こんにちは。モノタロウでフロントエンド寄りの開発をしている、陳です。 今回はモノタロウの新フロントエンドのメインフレームワーク選定についてお話しします。 選定結果から言うと、モノタロウ独自の7つの選定基準をもとに、Reactを選ぶことになりました。 背景 新フロントエンドプロジェクトの立ち上がり Vue.jsとReactの比較検討をしてみた 俯瞰して改めて選定基準を考えた 一般的な視点 モノタロウの社内事情 7つの選定基準 選定結果 技術選定を通して得た3つの学び 背景 まず、モノタロウの現フロントエンドについてざっくり説明します。 モノタロウは2002年から、PythonとJavaScriptでECサイトを開発してきました。 基本構成として、サーバサイドのPythonでHTMLを生成し、クライアントサイドのJavaScriptでカートインなどの動的処理を補完する形ですが、実はこの構成で違
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く