独力でWebサービスを開発・構築できるフルスタックエンジニアへのロードマップ─幅広いスキルを「Udemy夏のビッグセール」で学ぶ！ - はてなニュース
Webで新規サービスを立ち上げる際に、UIからインフラ周りまで一人で面倒を見られるエンジニアは、少人数のスタートアップでなくとも非常に頼れる存在です。どんな課題に直面しても技術力で乗り越える、そんなスキルフルなエンジニアに憧れる方も多いでしょう。 この記事では、フロントエンドのプログラミング（JavaScript周辺）からサーバーサイド、インフラ、さらに開発手法まで、Web開発で必要になるさまざまなレイヤーのフルスタックなスキルの現在地と、関連するUdemyの講座を紹介します。 株式会社ヘンリーでVPoEを務める松木雅幸（@songmu）さんの執筆です。 フルスタックエンジニアに必要なスキル さまざまな講座でまとめて学習してみよう Udemyでは夏のビッグセールを開催中！ ※この記事は、株式会社ベネッセコーポレーションによるタイアップ広告です。記事末に、はてなブックマークした方にAmazo
次世代Web認証「パスキー」 / mo-zatsudan-passkey
モニクル社内3分LTで発表しました。技術職以外の人向けに話したので、抽象度高めにしてあります。
それでも私が<wbr>でなくinline-blockで改行調整をする、たった1つの理由
inline-block を使う理由、それは 入れ子構造を作れることにより、改行位置の優先順位をつけられるから！ 詳しくは以降で説明します。 （前提）そもそも改行調整ってなんの話？ このタイトルを見て記事を開いた方であれば知っていると思いますが、一応説明です。 スペースで単語が区切られる欧文とは違い、日本語は単語の区切りがないので、改行すべき位置を機械的に判断できず、不自然な位置で改行されてしまうことがあります。そこで、見た目を整えるため、改行すべき位置を指定するための手法が必要になります。 他に詳しい記事がいくつもありますので、詳細はそちらを参照してください。 代表的な改行調整の手法 <wbr> 要素 <wbr>要素は、改行してよい位置を表す要素です。 親要素に対して word-break: keep-all; を指定して基本的には改行されないようにすることで、<wbr>要素がある位置で
ヤフーのユーザー5,400万人から"同意"を得るための技術（HTML/CSS/JavaScript）
こんにちは。SWATチームの今谷と、LY会員サービス統括本部の木所です。 LINEとヤフーの会社合併に伴って、LINEヤフー株式会社が提供するサービスを利用するユーザーに「新プライバシーポリシーへの同意」をいただくためのモジュールを開発しました。本記事では、ヤフーのユーザー5,400万人から”同意”を得るための工夫について、実装上の不具合も交えてご紹介します。 なお、ご紹介する内容は、UIT × Bonfire Front-end Meetup #1 での発表が起点となっています。詳細についてより深く知りたい方は、発表資料 や Podcast をあわせてご参照ください。 会社合併と、新プライバシーポリシーのご案内 LINEとヤフー、それぞれで同意モジュールがあります。Web向けのほか、iOS・Androidアプリ向けにも提供しました。 Webの同意モジュールでは「Modal版」と「Ful
WebAssemblyでOpenJDKのJavaランタイムを実装、JarファイルをそのままWebブラウザで実行できる「CheerpJ 3.0」正式リリース
WebAssemblyでOpenJDKのJavaランタイムを実装、JarファイルをそのままWebブラウザで実行できる「CheerpJ 3.0」正式リリース Webブラウザ上で実行可能なWebAssembly製JavaVM 前バージョンのCheerpJは、Javaのバイトコードを事前コンパイルによりJavaScriptコードに変換することで、Webブラウザ上でJavaアプリケーションを実行可能にするコンパイラを中心とするツール群でした。 今回の新バージョン「CheerpJ 3.0」では、WebAssemblyによってOpenJDKのJavaランタイムを完全に実装したと説明されています。これにより、JITコンパイラなどを含むJavaVMの機能をWebブラウザ上で実行できるようになりました。 Javaアプリケーションのソースコードは不要で、ビルド済みのJarファイルをそのままWebブラウザで実行
Tailwind CSSを使う時の疑問と解決方法
2024年1月24日 CSS, Webサイト制作 制作時に「CSSファイルをこれ以上増やしたくない…」「クラス名を考えるのしんどい…」なんて思ったことはないでしょうか？私はあります！あれこれ試した結果、Tailwind CSSが使いやすかったので、導入時につまづいたポイントと解決方法をまとめてみます。 ↑私が10年以上利用している会計ソフト！ Tailwind CSSとは Tailwind CSSは、あらかじめ多くのクラスが用意されているCSSフレームワークです。Webサイトを制作する時に、HTMLの要素に直接、定義済みのクラスを付与して使用します。基本的に1つのクラスに1つのスタイルが当てられていて、例えば「m-0」というクラスをつけると margin: 0px; が、「w-full」というクラスをつけると width: 100%; が加えられます。 実際にどんなものか見たほうが早そうで
htmxとは何なのか？ その背景にある思想について - Qiita
先日、Qiitaに投稿された一つの記事が注目を集めました。 元記事では、htmxというJavaScriptライブラリが英語圏で認知を獲得しているとして、インストールの仕方から使い方について公式のドキュメントの全体にわたって簡単に説明が行われています。 さまざまなプラットフォームでこの記事に対する反応を観察してみると、どちらかというと懐疑的な見方のほうが優勢のように見受けられます。ただ、多くのコメントは誤解に基づいているように見受けられました。「JSが要らない」といった元記事のミスリードによるところも大きそうですが1、なぜhtmxが大きく支持を得つつあるのかを理解するには、背景情報を含めて理解することが必要です。 htmxは、最近の複雑化するフロントエンド技術に対する単なる逆張りではありません。これまで30年ほどのあいだウェブ上のシステムを支え続けた「ハイパーメディア」の持つ強力さに今一度目
Webアプリケーションのパフォーマンス・チューニングの勘所 / web tuningperformance
# 参考資料 - https://speakerdeck.com/hanhan1978/purohuairawoshi-tutaphpapurikesiyongai-shan-falsekan-suo - https://speakerdeck.com/hanhan1978/web-application-tuning-guildline - https://speakerdeck.com/soudai/basic-of-rdb - https://speakerdeck.com/soudai/shi-xing-ji-hua-falsehua - https://fortee.jp/phpcon-2021/proposal/1e11a6b1-08d9-4044-9909-4c90105ea726 - https://fortee.jp/phperkaigi-2021/proposal/1d
AWS Lambda×Fargate×PlanetScaleを組み合わせれば、超絶スケールするWebアプリを作れる 約2ドルから作れる“ニッチで俺得な”環境の布教
自分がニッチだと思っているテーマについて発表する「Qiita Engineer Festa 2023〜私しか得しないニッチな技術でLT〜」。ここで株式会社SonicGardenの遠藤氏が登壇。LambdaとFargateを組み合わせた実行環境について話します。 遠藤氏の自己紹介 遠藤大介氏：今日は「AWSのLambdaとPlanetScaleを組み合わせると、超絶スケールするWebアプリを作れちゃうぜ」という話をしていこうと思っています。 最初に自己紹介です。遠藤と申します。SonicGardenという会社で、プログラマーと執行役員をやっています。インフラと機械学習などが好きで、趣味もプログラムで仕事もプログラムな感じの人間なんですが、最近は機械学習周りが盛り上がっているので、そっちもいろいろやっています。 あと、ロードバイクに趣味で乗っているのですが、最近ちょっと乗れていません。それから
静的サイトジェネレータ「Astro 3.0」正式リリース。JavaScriptなしでSPAのようなアニメーションの画面遷移など新機能
静的サイトジェネレータ「Astro 3.0」正式リリース。JavaScriptなしでSPAのようなアニメーションの画面遷移など新機能 オープンソースで開発されている静的サイトジェネレータ「Astro」の最新バージョンとなる「Astro 3.0」が正式にリリースされました。 Astro 3.0 is out now! 30% faster and more powerful than ever. View Transitions, Image Optimization, JSX Fast Refresh, and so much more. https://t.co/vOi44246Hg — Astro (@astrodotbuild) August 30, 2023 Astroは、ReactやVue、Svelte、Alpine.js、TypeScriptなどのさまざまなフレームワークやライ
遊べるWebサイトを240秒で作る方法――DeployScriptを試そう
まずは、軽くカレンダーソフトを作ってみる またまた、ChatGPTで「ここまでやるか？」というプラグインが登場した。「こんなサイトが欲しい」と伝えると、たちどころにHTML、CSS、JavaScriptを自動生成して、サイトまで立ち上げてしまうDeployScriptである。 ここのところ「endoGPT」や「パングラムの生成」など、プロンプトプログラミングからちょっと離れてしまっていた。今回は、そのDeployScriptを使ってChatGPTでコード生成するお話に戻ってみたいと思う。 DeployScriptは、「ChatGPT plus」（20ドル／月の有料ユーザー）なら使うことができる。無料枠は、この原稿を書いている2023年8月中旬で1カ月に12件までの編集とリクエスト。15ドル／月で編集とリクエストが無制限となる。使い方は、ChatGPTを起動したら画面上からGPT-4を選んで
無料Webクローラー「EasySpider」 プログラミングスキル不要、マウスクリックだけで操作可能
このコーナーでは、2014年から先端テクノロジーの研究を論文単位で記事にしているWebメディア「Seamless」（シームレス）を主宰する山下裕毅氏が執筆。新規性の高い科学論文を山下氏がピックアップし、解説する。 Twitter: ＠shiropen2 シンガポール国立大学と中国の浙江大学に所属する研究者らが発表した論文「EasySpider: A No-Code Visual System for Crawling the Web」は、Excelを使用するように視覚的にWebスクレイピングタスクを設計し、実行できるカスタマイズ可能なWebクローラーシステムを提案した研究報告である。公式ページはこちら。 このシステムは、マウス操作のGUI（Graphical User Interface）を使用して提供されており、コーディングの経験がなくても使えるため、ノンプログラマーでも簡単にタスクを設
Spring Boot 3の新機能を使ってみよう！ 2からアップグレードする手順、Observability機能、ネイティブイメージ化｜ハイクラス転職・求人情報サイト AMBI（アンビ）
ハイクラス求人TOPIT記事一覧Spring Boot 3の新機能を使ってみよう！ 2からアップグレードする手順、Observability機能、ネイティブイメージ化 Spring Boot 3の新機能を使ってみよう！ 2からアップグレードする手順、Observability機能、ネイティブイメージ化 Javaの開発フレームワークであるSpringの最新バージョンとして、Spring Boot 3が2022年11月にリリースされました。この記事ではSpring Boot 2で書かれたサンプルコードをSpring Boot 3にアップグレードしながら、考慮点や新機能を体感していただきます。ヴイエムウェア株式会社の星野真知さんによる解説です。 Javaのエコシステム、その中でも世界で一番の人気を誇るのが（JetBrains社の調査によると）Spring FrameworkおよびSpring B
これは便利すぎる！ Webページを1クリックで編集可能なFigma用に変換できるプラグイン「html.to.design」が神アップデートされました
WebページのURLを入力し、1クリックするだけで、そのページの編集可能なFigmaファイルに変換できる無料プラグインを紹介します。 去年紹介しましたが、先日ver.2にアップデートされました！ 一括インポート、マルチビューポート、マルチテーマ、テキストとカラーのスタイル生成ができるようになり、さらに便利になりました。 AppleなどのWebページを1クリックで変換するのはもちろん、日本語のWebページでも問題なく動作しました。Webデザインの勉強用に、既存サイトをリニュアールする用にも便利ですね。 html.to.design -Figma デスクトップとスマホも同時に！ 1クリックでWebページをFigmaに変換 html.to.designの利用方法 html.to.designの使い方 1クリックでWebページをFigmaに変換 html.to.designは、URLを入力して1ク
Webブラウザ上で3D/2Dモデルをぬるぬる動かせる「Babylon.js 6」正式版に。レンダリング性能が最大50倍、WASM化した物理演算エンジン搭載、液体のレンダリングも
マイクロソフトは、Webブラウザ上で2Dや3Dモデルの高速なレンダリングなどを可能にするオープンソースのJavaScriptライブラリ「Babylon.js」の最新版「Babylon.js 6.0」正式版をリリースしました。 We are thrilled to officially announce the release of Babylon.js 6.0! The web just got a WHOLE lot more exciting!https://t.co/q0JVsQaTSd#babylonJS6 #gamedev #indiedev #webdev #Metaverse #3D #webgl #gamedevelopment #IndieGameDev #webdeveloper pic.twitter.com/owV6YLp1zc — Babylon.js (@bab
2015年Webサーバアーキテクチャ序論 - ゆううきブログ
2023年03月31日追記：この記事を基に、@sadnessOjisanさんより、コードレベルにより踏み込んだ、かつ、グリーンスレッドベースの新しいWebサーバアーキテクチャも含めて整理された記事 Webサーバーアーキテクチャ進化論2023 | blog.ojisan.io が公開されました。 主に新卒のWebエンジニア向けに、古典的なWebサーバアーキテクチャを学ぶ道のりと代表的な実装モデルの概要を紹介します。 この辺りの話題がWeb界隈で流行っていたのは数年以上前というイメージですが、Webサービスは相変わらずWebサーバの上で動いているので、流行り廃り関係なく学ぶべき内容だと思っています。 また、HTTP/2がいよいよRFC化し、既にh2oやtrusterdなどのHTTP/2のサーバ実装があり、今後Webサーバアーキテクチャを再訪することが増えるような気がしています。 ところが、We
Webサーバーアーキテクチャ進化論2023
はじめに 最近プログラマーとしてのキャリアに一区切りつけようと思っており、これまでのプログラミングの勉強の集大成となるブログを書きたくなったので書く。初めてプログラミングをして、フロントエンド開発をして、サーバーから値が返ってきたときは「どういう仕組みで値が返ってきたんだ？」と疑問に思っていた。ずっと理解したくて理解できていなかった。だからずっと勉強していた。そして最近になってようやく自分の言葉で説明できるようになった気がしたのでブログを書きたい。 2015 年版が自分の原点であり、この記事を書くモチベーションになった このような記事は実は過去に存在している。 FYI: https://blog.yuuk.io/entry/2015-webserver-architecture その記事はサーバーがどういう仕組みで動いていて、どのように進化し、2015 年に至るかを解説してくれた記事だ。自
[書評] ハッキングAPI ―Web APIを攻撃から守るためのテスト技法
サマリ ハッキングAPI―Web APIを攻撃から守るためのテスト技法（2023年3月27日発売）を読んだ。本書は、Web APIに対するセキュリティテストの全体像と具体的なテスト方法を記載している。ペンテスターは、APIの検出、APIエンドポイントの分析、攻撃（テスト）を行う必要があり、そのために必要な情報がすべて記載されている。また、実習のためのツールと「やられサイト」を複数紹介し、具体的なトレーニング方法を解説している。単にツールやサイトの使い方の説明にとどまらず、本格的なペネトレーションテストの考え方を説明している。 本書の想定読者はAPIのペネトレーションテストを実施するペンテスター及びペンテスターを目指す人であるが、API開発者やウェブアプリケーション脆弱性診断員にとっても有益な内容を多く含む。 重要事項説明 本書の監修者の一人（洲崎俊氏）と評者は知人関係にある 評者が読んだ書
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Figmaで作ったデザインをWebサイトに即反映「STUDIO」 | 進化が止まらない！ 最新ツール
Webやアプリの日本語を読みやすく折り返す「BudouX」。GoogleがGitHubで公開
