はじめに Webシステムの開発に携わりたくて転職して9か月，知らない事ばかりで日々勉強しております。 自分の勉強用メモとして知っておくべき技術をまとめようと思いました。 (こちらの記事にインスパイアされたものです) 技術用語について，なるべく2～3行で概要を説明できる事を目指しています。 情報が多過ぎるので，主流な技術は見出しを赤字にしています。(主観強め) また，今後需要が増えそうな技術は青字にしています。(かなり主観強め) とはいえ，新しい技術が登場すれば，数年でトレンドが変わってしまう事も多々あると思います。 ほとんどはあくまでも初心者がネットで情報をかき集めた程度のものです。 誤りがあればご指摘，ご意見など頂きたいです。 ※2023/2/6追記 不正確・不十分だと思った記載はひっそりと随時修正しています。 また，「そういえばこんなんあったな」という項目も追記しています。 あと，自分
みなさん初めまして！ 株式会社ゆめみでサーバーサイドエンジニアとして働いている、りょーきです！！ 最近、エンジニア向けのイベントの登壇資料を作成している中で、 「この技術の公式ロゴ、どこにあるねん！！！！」と何度も思ったので、 よく使うプログラミング言語やクラウドサービスなど、とにかく公式ロゴがあるかどうか調査して、集めてみました。 発表用資料作ってるけど、 なるべく公式のロゴを使用したい ロゴ探しに時間を費やしたくない そもそもどれが公式のロゴか分からない 上記のような方の参考になれば幸いです。 自分がよく使う・馴染みがある技術に偏ってしまっているので 「この技術もよく使うから記載してほしい！」といった要望や 「URL間違い・公式ロゴ存在するよ！｜しないよ！」などの指摘があれば、 どんどんコメントで教えてください！！ この記事では、公式のロゴがある場合は「公式」、無いまたは見つけられなか
エンジニア1人で4年間プロダクトを開発。ミニマムな体制で効率的な価値検証を行う知見 - what we use（技術スタックデータベース）
「サービスがPMFするまで、どのような体制で開発を進めるか」というテーマに、わかりやすい正解は存在しません。企業の創業メンバーの内訳や各々のスキル、会社の資金、世の中や他社の動向など、さまざまな変数が「開発組織のあり方」に影響します。CTOやVPoEといった企業の技術リーダーたちは、そうした変数を鑑みつつ自社の方針を決める重要な役割を担っています。 営業活動支援のSaaS事業およびコンサルティング事業を展開するSALESCORE株式会社のCTOを務める成澤克麻さんは、MVP開発開始から4年間は「エンジニア1人でフルスタックにサービス開発すること」を選びました。そして事業が軌道に乗った現在は方針転換をし、人を増やしながらスケール可能な体制作りを目指しているのです。今回は成澤さんに、SALESCOREがこれまで選択してきた開発組織の方針について聞きました。 KPIを可視化し、営業組織の実行力を
20 年代のフロントエンド - Qiita
これはなに 高円寺.dev #3 用の資料 https://koenji.connpass.com/event/160886/ フロントエンド専門じゃない人向けの、フロントエンドの最先端〜やや未来の話です このレイヤーでは Node.js を使うべき/使うと強いという部分がありますが、他言語を否定しているわけではありません。むしろ他言語でこのアーキテクチャを模倣してほしいという話です。 10 年代のフロントエンドのポストモーテム 10 年代まとめ IE が死ななかったので各種ポリフィル、メタ言語からのトランスパイルが発達。しかしモダンとレガシーの乖離が深刻に。 node と npm エコシステムの成立 仮想 DOM がフロントエンドライブラリの標準的な状態管理手法に モジュールシステム需要が ES Modules(ES2015)に結実。しかし webpack は死ねなかった。 モダンとレガ
フロントエンドエンジニアの小林和弘です。 去年の 4 月に「Web アプリを 3 つ使ったサービスを 3 ヶ月でつくりたい」という話が降ってきて、無茶を現実にした話をします。 新規サービス「やくばと」で Workspaces のモノレポを使って、医療機関画面、薬局画面、患者画面の 3 つの Nuxt を構築しました。 やくばととは 医療機関、薬局、患者さまの間でやり取りされる医療機関起点の薬局向け処方せん画像事前送信サービスです。処方せんに関する業務負荷を軽減すると共に、患者さまの大きな負担である医療機関、薬局での待ち時間を軽減するということを主な目的としたサービスです。 医療機関、薬局の DX を進め、患者さまの負荷軽減に貢献できる素晴らしいサービスになっています。 開発チームでは医療機関、薬局、患者さまに提供している Web 画面をそれぞれ医療機関システム、薬局システム、患者システムと
はじめに 今回の記事では、学習・開発でTypeScriptを使ううえで絶対に確認するべきGitHubリポジトリ、サイトや書籍を33も紹介する。TypeScriptで生計を立てているプログラマーはもちろん、これからTypeScriptを学習するプログラマーはぜひ確認しておきたい。 GitHubリポジトリ awesome-typescript TypeScriptの学習・開発に役立つツール、サイトや書籍を一つにまとめているGitHubリポジトリ。TypeScriptを使っているプログラマーは全員確認するべき。 awesome-react Reactの学習・開発に役立つツール、サイトや書籍を一つにまとめているGitHubリポジトリ。 awesome-vue Vueの学習・開発に役立つツール、サイトや書籍を一つにまとめているGitHubリポジトリ。 awesome-nextjs Next.jsの学
次世代バンドルツールの競争の今 Turbopack vs Vite - GMOインターネットグループ グループ研究開発本部
こんにちは。グループ研究開発本部 次世代システム研究室のH.Oです。 生産的なアプリケーション開発において欠かせないものの一つにフロントエンドのJavaScriptバンドルツールがあります。 これまで、長年に渡ってJavaScriptのバンドルツールはwebpackがデファクトスタンダードとなり、Next.jsやNuxt.jsなどフレームワークにもデフォルトで組み込まれていました。その高機能性と安定性から現在も多くのWebサービスで利用されています。 一方で近年、webpackに続く次世代バンドルツールの開発競争が大きな注目を集めています。その中で特にwebpackに取って代わる勢いを見せているものにViteとTurbopackがあります。これらは、開発するアプリケーションの肥大化に伴って処理が遅くなってしまうwebpackの問題点を解決することが主要目的となっています。 今回はViteと
はじめに おはようございます、加藤です。現在AWSには223個（2022/01/05時点）のサービスがあります。コンピューティングのカテゴリだけでも10数個のサービスが存在し、WebアプリケーションをAWS上に構築するエンジニアは要件に応じて利用するサービスを選定しアーキテクチャを決定しなければなりません。 動くだけならばともかくアジリティ・スケーラビリティ・コストパフォーマンスを高水準で満たすアーキテクチャを設計するにはスペシャリストの存在が必要不可欠です。プロジェクトチーム内にスペシャルが存在しない場合は多くの会社がAWSのコンサルティングサービスを提供しているので外注で解決する事ができます。（もちろん、弊社もAWSコンサルティングサービスを提供しております、お気軽にお問い合わせください！） しかし、コスト・スケジュール・組織的な都合で外注が出来ないことやまずはノウハウを蓄積するために
2021年のVueは結構動きが大きかったので、スナップショット代わりにちょっと振り返りのまとめを書こうと思います。 後半は2022年はVueとどうやって付き合うのが良さそうか、超個人的な見解を書きます。 ここ何年かのVueを使った個人開発をおさらい まずはここ何年かの個人制作からVueを使ってそうなものをリストアップして変遷を見てみます。ここ3年くらいのリポジトリから拾って並べたら、何となくVue3導入の歴史っぽくなりました。 なんか思ったほど作ってないけどそれは仕方ない。 2019.2 初代メザシアタック（ゲーム） リポジトリ： https://github.com/yuneco/mezashi 解説： VueとSVGを使ってシューティングゲーム『ネコ🐱メザシ🐟アタック🌟』を作ったのでソースと解説 開発環境: Vue CLI 言語: JS Vueのバージョン vue: 2.5.22
仕事でVueというかNuxtを選んで使っているんですけど、なんでだっけという部分を思い出してみる Reactも使っているので評価してどちらかを選定する話ではないです まずLaravelで構成されたソースコードがあってここにどうやって機能を後付けするかという部分を考えた 要件として特定のUIを実現するJavaScript SDKがあったのでこの時点でSPA+APIにした 次にその時点でVueがLaravelでJSを書く時のデフォルト選択肢だったのでVueにした SSRは不要なことが分かっていたのでvue-cliで構築して、複数画面への遷移が必要になった段階でルーターを試しNuxtへ移行した 私の中ではReactもVueも期待する同じDXを提供する高度で自作できないもの、という位置付けなので、Laravel側の選択肢に偏りがあるのならそれに従って問題ないという認識だった 仮に別のフレームワーク
Vue.js でファイルベースルーティングを実現する「Unplugin Vue Router」の紹介
Web アプリケーション開発において、ファイルベースルーティングはコードの可読性向上や開発効率化に大きく貢献します。本記事では、Vue.js アプリケーションでのファイルベースルーティングをシンプルかつ型安全に実現できる「Unplugin Vue Router」をご紹介します。Nuxt のような大規模なフレームワークは少し大げさだと感じる場合や、Vue Router をより効率的に活用したい方はぜひ参考にしてください。 Unplugin Vue Router 概要 ファイルベースルーティングによってファイルのパスと URL を直接対応させることで、コードの構造を直感的に理解できます。 TypeScript との連携によりコンパイル時にルーティングのミスを検出でき、より安全な開発が可能になります。 Nuxt のようなフルスタックフレームワークと比較して軽量であり、小規模なプロジェクトに最適で
7/25に発売されたばかりの、TypeScript/React/Next.js本読んでみた感想（随時更新） 9/4 moleculesの実装進める、問題点解決？ 9/3 どーしても直せないので方針変更。一度styled-components導入。 8/29 6.6途中。ドロップダウンまで実装。 8/26 わからんところ復習したり。 8/25 6.5章完了まで。しかしわからんことだらけ 8/24 6.5章途中まで。Atoms/TextAreaまで実装。 8/23 6.5章途中まで。Atoms/Buttonの実装に苦戦中。 8/22 5章完了、昨日放置した問題の解決。 8/21 5章途中、storybookインスコした直後まで 8/20 コンポーネントテスト追加、コメント指摘反映 8/19 4章途中(4.4コンポーネントテスト直前まで完了） 8/18 3章完了 8/17 3章途中（React全
Webアプリケーションの需要が高まるにつれ、その価値をユーザーに提供する直接のインターフェースとなる「フロントエンド」を構成する技術への関心も高まっています。一方で、フロントエンドは短期間で次々と技術的なトレンドが移り変わっていく領域でもあり、プロダクトの中で、どの技術を、どのように使っていくかが、ビジネスの拡大や、関わるエンジニアのキャリアに少なからず影響を与えます。今回は、ヤフーと、メルペイ／メルカリという、ともに多くのユーザーに支持されているプロダクトに関わる3人のフロントエンドエンジニアに、時流に流されず、ユーザーにより多くの価値を届けられる「フロントエンド」のあり方と、それに向き合う際に必要な考え方について語ってもらいました。 日本最大規模のWebサービスでフロントエンドに関わる3人のエンジニア 橋本：ヤフーの橋本です。本日はよろしくお願いします。私は2011年にデザイナーとして
フロントエンドの爆速な開発サーバを実現する Vite がバージョン2.0になったので変更点を眺めてみる - SMARTCAMP Engineer Blog
こんにちは、スマートキャンプでBALES CLOUDを開発している中川です！ 昨年の 9 月に Vue.js のメジャーバージョンが 3 になりかれこれ半年ほど経ちますが、みなさんのプロジェクトでは移行が進んでいますか？ 私が普段開発している前述のプロダクトにも Vue.js の 2.x 系を採用しているのですが、利用している UI ライブラリが Vue3 に対応するのを待っている関係でまだ移行には至っておらず、 先んじて Lint のルールを Vue3 のものに切り替えて準備だけ進めているような状況です。 さて、Vue3 といえば Vue.js の発起人である Evan You 氏が始めた高速な開発用フロントエンドサーバーを実現する OSS である Vite が昨年話題になりました。 話題になったタイミングで私も記事を書いたのですが、その時点ではまだ Beta ですぐに本番投入できる段階
こんにちは、23卒の新卒エンジニアのfujinoです。今回は弊社のサービスでReactのフレームワークであるRemixを使い始めた話をしようと思います。 背景 弊社では今までVue.jsのフレームワークであるNuxt.jsを用いてフロントエンドを実装していました。 これは、採用当時は生のhtmlが使えるのが良いと思っていたことや、Vue.jsの経験のあるフロントエンジニアがチームにいたことが理由でした。 しかし、最近ではTypescriptとの親和性や、コミュニティの大きさなどの理由からReactの方が勢いがあるように感じます。 弊社でも少し前からReactに移行することを決定し、現在進行形でNuxt.jsからReactへの移行プロジェクトを進めています。 Reactの主要なフレームワークとして、Next.jsとRemixが挙げられます。 両者の違いとして、Next.jsはSSG（Stat
ペイトナー請求書のフロントエンドにスナップショットテストを導入した話 - Paytner Tech Blog
はじめに ペイトナー請求書のフロントエンドを主に担当している @fuqda です。 本稿では、ペイトナー請求書のフロントエンドの品質改善の一つとして、最近実施したスナップショットテストの導入についてご紹介させて頂ければと思います。 この記事の対象読者 Vue.js / Nuxt.jsでJestのスナップショットテストを実装する方法について関心がある方 テストコードがないフロントエンドにこれから自動テストを導入しようとしている方 スナップショットテストとは？ スナップショットのテストはUI が予期せず変更されていないかを確かめるのに非常に有用なツールです。 https://jestjs.io/ja/docs/snapshot-testing Jestの公式ドキュメントにも記載があるようにHTML要素の差分を検査し、違いがあれば失敗にするテストのことです。 なお、CSSのスタイル崩れなどの検知
独学で未経験のモダンな技術を学習してポートフォリオを作るまで【Rails / Next.js / AWS / Docker / GitHub Actions】 - Qiita
独学で未経験のモダンな技術を学習してポートフォリオを作るまで【Rails / Next.js / AWS / Docker / GitHub Actions】RailsAWS初心者個人開発Next.js はじめに こんにちは！きいな(@keynyaan)と申します。 今回、モダンな技術を使って初めてポートフォリオを作ってみたので、開発背景や学習教材などを紹介します。 ポートフォリオを作るにあたって、色々な方の素晴らしいポートフォリオ作成記事が参考になったので、今度は私の記事が誰かのためになることを祈ってます。 自己紹介 大学卒業後、新卒でSIer企業に入社し、3年ほどJavaやJavaScriptなどを使って、バックエンドやフロントエンドのシステム開発を行っていました。 そんな私が自社開発企業に興味を持ち、退職を機に、2023年1月からポートフォリオ作成に向けて学習を始めました。 学習期間
The No-Hassle CMS for GitHub Tired of juggling Git and YAML to update your Next.js, Astro, Hugo or Nuxt website? Make it easy on you and your team, get a user-friendly CMS running straight on top of GitHub.
技術ブログをNuxt + Netlify + Contentfulから、はてなブログ for DevBlogに移行しました - もふもふ技術部
こんにちは。出口です。 タイトルにある通り、技術ブログをはてなブログに移行しました。 この記事では、なぜ移行することになったのか、どうやって移行したのか、移行で苦労したところなどをまとめておきたいと思います。 もし脱セルフホストブログ、脱Contentfulや、はてなブログへの移行をお考えであれば参考になるのではないかと思います。 なぜ移行したのか Nuxt 3への移行が大変すぎる Contentfulへの不満が募ってきた 当初の計画 改めて移行を考える 移行について 記事移行 インポート機能を使ってWXRを取り込む場合 AtomPubを使ったパターンの場合 サブディレクトリオプション Netfilyのリバースプロキシ設定 robots.txtを設置 NetlifyのPrerenderingオプション設定 検証ツールで1つだけ検証失敗する まとめ なぜ移行したのか まずそもそもなぜ移行した
祝 🎉 両方とも正式リリース！ GitHub Codespaces と Nuxt3 で次世代開発体験 / codespaces-nuxt3
GEEKERS NITE #2 で発表したスライドです。 https://geekersnites.connpass.com/event/265046/
特定保健指導"フィッツプラス"事業を支えるモノリシック Rails + VIPER Swift アーキテクチャ - メドピア開発者ブログ
みなさんこんにちは。フィッツプラス開発エンジニアの福本（@terry_i_）です。 早いもので入社して半年が経ちました。普段はRailsを中心に色々と書いてます。 リモートワークが長く続いていることもあって、最近は自宅の開発環境を（過剰に）整備するのがマイブームです。先日はlogicoolのPCスピーカーを買いました。所得がゴリゴリ削られていってツラい。 さて今回は、これまで忙しくて紹介する機会のなかったフィッツプラスの事業概要や、アーキテクチャおよび使用する技術についてお話しします。 アーキテクチャに悩むエンジニアの方の参考になったり、皆さんのフィッツプラスへの事業理解が深まれば幸いです。 特定保健指導とは？ アーキテクチャ モノリシック Rails ActiveModelSerializers OpenAPI Houston(プッシュ通知) Banken(権限管理) VIPER Swi
【Laravel】画像の直アクセスを禁止して、特定の条件を突破した場合のみ画像を表示する方法 - Hajimari Tech Blog| 株式会社Hajimari
こんにちは！Hajimariの新卒エンジニアの稲葉です。 2020年4月1日に新卒エンジニア2期生として入社しました！ 普段は、自社プロダクトであるスタートアップ向けマッチングサイト構築パッケージPIECE（https://crowd.itpropartners.com/piece/）の開発や受託開発を行っています！ 今回はログインしていない場合に画像の直アクセスを禁止する方法について書いていきます。 htaccessで直アクセスを制限する方法も考えられますが、ログインしている場合は直アクセスの許可するため、Laravel、Nginxで実装していきます。 直アクセス storage/files配下に設置した画像が、 /storage/files/画像名でアクセスした際に画像が表示されます。 特定の条件を突破した場合のみ表示させたい画像がある場合は、直アクセスを禁止してみてください。 万が一
はじめに Rustと言語処理系の勉強のため、簡易的なマークダウンパーサーをスクラッチで実装し、生成したWASMをNuxt3+Viteの環境で動かしてみました。 言語処理系の概要 マークダウンパーサを実装する前に、一般的な言語処理系について考えてみます。 コンパイラやインタプリタに代表される処理系の構成は以下のようになっています。 字句解析 テキストを字句の列(トークン)に分解すること 字句解析を行うプログラムを 字句解析器(lexerまたはtokenizer) と呼びます。 構文解析 トークン列を 抽象構文木(abstract syntax treeまたはAST) に変換する。抽象構文木とは、言語の構文を解釈し、データ構造を取り出した(抽象化した)木構造のこと たとえばDOMツリーは、HTMLの構文を解釈(構文解析)し、要素(タグ)を木構造で表現したものです。 How browsers w
プログラミング言語やフレームワークに関する疑問をググるとだいたいQiitaの記事がヒットして、開くたびにアカウント登録しろしろとうるさいのでキレながらアカウント作りました。サブカルメンヘラクソ女の@hg0です。折角なのでアカウント登録のついでに書こうと思います。 大学は芸術系で、デザインやメディアアートをかじっていた程度なのですが、縁があってWebエンジニア業界に就職することが出来ました。 2年ほど、フロントエンドのお仕事・勉強をさせて頂いて思ったこと、躓いたこと、各言語やフレームワークを使って思ったことを振り返りながら書いてみようと思います。 言語・フレームワークについて HTML/CSS/JavaScript 「Webサイト制作」「フロントエンド」の勉強をするにあたって、誰もが一番最初に学ぶのは間違いなくこれだと思います。どれも国際的な団体が、仕様や書き方を中立的に定めている、Web業
シンシアが向き合う不動産業界の課題とアーキテクチャ基盤について - Xincere Technology Blog
こんにちは、エンジニア兼社長の徐です。 日々、不動産の課題とはなにかについて考えサービスのシステム改善・新規開発に取り組んでいます。 residence.xincere.jp 先月、「テックブログはじめました 」と言いつつも、一切技術要素に触れなかったので今日はシンシアが不動産におけるどのような課題に対して、どのような技術を使い何を開発しているのかについて紹介致します。 tech-blog.xincere.jp 不動産における課題 自分は、大学院を卒業して以来ずっとソフトウェアエンジニアをしていましたが、不動産仲介の会社を始めて実際に初めて自ら物件予約・内見・契約締結などなどを行って来ました。 実際に自分で遭遇した課題・お客様から聞いた過去の課題は お客様がメールを見逃す お客様が問い合わせた物件がすでに申し込み済みだった お客様が物件相談・鍵の引き渡しなど店舗に行くことが多かった お客様
STORES フロントエンドエンジニアの wattanx です。 2022/11/16、ついに Nuxt 3 が正式リリースされましたね。 nuxt.com 私たちのプロダクトである STORES でも Nuxt を利用しており、絶賛 Nuxt 3 への移行中です。 本記事では、私たちのプロダクトにおいてどのようにNuxt 3 に移行しようとしているのか紹介します。 また、これは STORES Advent Calendar 2022 の 11日目の記事です。 移行の基本方針 Nuxt 2 を利用しているプロダクトを Nuxt 3 に移行する場合、以下の2とおりの方法が一般的だと思っています。 Nuxt 2 から Nuxt 3 に直接移行する。 Nuxt 2 から Nuxt Bridge に移行する。その後 Nuxt Bridge から Nuxt 3 に移行する。 Nuxt Bridge
UnoCSS を知る、まずは経緯から
👋 はじめに ナイトウ(@engineer_naito)と申します。 今回は CSS フレームワーク Atomic CSS エンジンである UnoCSS について紹介したいと思います。 🧐 想定読者 Tailwind CSS などの CSS フレームワークを利用したことのある開発者であればスラスラ読めると思いますが、初学者の方であっても問題なく読めると思います。 (なぜならばぼく自身が CSS フレームワークを使ったモダンフロントエンド開発の経験がないからです 🙋♂️) 🗾 UnoCSS と日本 UnoCSS は軽量かつ柔軟な Atomic CSS エンジンであり、現在最も注目を集めている CSS ツールの一つです。 人気調査サイトの結果によると、ここ 2, 3 年で確かに人気や知名度が上昇しています。 しかし、日本ではどうでしょうか？ Zenn で「UnoCSS」と検索してみま
面倒な仕事やサイト作成がたった2日でマスター可能！人気のPythonやWordPressでスキルアップできる「Udemy」初夏のビッグセール
「新たなスキルを身につけて年収UPを目指したい」「プログラミングで仕事を自動化して楽に稼ぎたい」と日々思っている人は少なくないはず。しかし、いざ学習を始めようとしても忙しい毎日の中から時間を確保するのは難しいものです。ちょうど講座をムービー形式で受講できる学習プラットフォームの「Udemy」が5月27日(木)まで初夏のビッグセールを行っており、丁寧で分かりやすい解説講座が1270円～受講可能とのことで、忙しい毎日を送っていても週末の2日間だけで学習を完了できそうな短期集中型の講座をピックアップしてみました。外出がおっくうになる梅雨の季節や、ステイホームをうまく活用するために、この機会に買いだめしておくのがオススメです。 オンラインコース -世界最大級のオンライン学習プラットフォーム- Udemy https://www.udemy.com/ ・目次 ◆1：WordPressの使い方を習得し
JavaScript / TypeScript全体研修を実施 ~歴史あるサービス保守からモダンフロント開発まで幅広く手掛ける為に~ | NIJIBOXのフロントエンドエンジニア
フロントエンドグループ JavaScript / TypeScript全体研修を実施ニジボックス フロントエンド開発室の高橋です。 3月4日、3月11日の2日間にかけて弊社、株式会社ニジボックスのフロントエンドグループ全体を対象にJavaScript, TypeScriptの全体リモート研修を実施しました。講師にはリクルートから３名のプロフェッショナルをお招きしました。参加者は総勢で50名近くになりました。 今回この研修の企画運営メンバーの一人として携わりましたので、研修当日の雰囲気や研修後の成果を含めてご紹介させていただきます。 ニジボックスフロントエンドグループの現状と課題ニジボックスフロントエンドグループはSUUMO, ゼクシィをはじめとしたリクルート内のWebサービスのフロントエンド業務に幅広く関わっています。 業界も様々ですが、使用している技術や開発フローもプロダクトによって大き
この記事は GraphQL Advent Calendar 2020 14 日目の記事です。 前回の記事は @joe-re さんの 「ライブラリの実装からCursor-based paginationにおけるcursorのフォーマットのベストプラクティスを探る」 でした。 前置き GraphQLは2010年代後半に出てきた技術の中でも個人的に特に強力なアプリケーション実装パターンの一つだと思っているのですが、シンプルな実装なのに利用用途が豊富にあることと利用する立場が違うと全く印象を抱く事から全体像を掴みづらく、本来持つべきポテンシャルに対してまだ認知が広がっておらず利用されていないように感じます。 今回はサーバーサイドからの視点を中心にGraphQLを構築する要素を分解して解説するのとともに、それを利用した際にWebアプリケーション開発やそれに関わるエンジニアに起きうる変化について書いて
AstroとmicroCMSでつくるブログサイト
=== 更新履歴 2024/1/10: MicroCMSQueriesをインポートするときにType-Only Imports and Exportを使用するように変更しました。 === こんにちは、microCMSの松田です。 今回は2022年8月に1.0バージョンを公開したAstroを使ったチュートリアルをお届けいたします。 Astroとは？Astroは静的サイトジェネレーターの一つです。 そのGitHubリポジトリには2022年9月時点で2万弱のスターが付けられています。 https://astro.build/ 数ある静的サイトジェネレーターの中でなぜAstroを選ぶのか公式のドキュメントで解説されています。 https://docs.astro.build/en/concepts/why-astro/ ここで書かれていることを簡潔にまとめると以下のような内容です。 Astroはウ
2022年9月の、これだけは押さえておきたいWeb関連の動き
「Web系の最新情報を知りたいけど、日々業務が忙しくて追いかけられない」という方のために、1ヶ月のWeb系ニュースの中で「これだけは押さえておきたい」というものを1つの記事にまとめています。 デザイン AdobeのFigma買収とAdobe XDのこれから 9月の大きなニュースは、やはりAdobeによるFigma買収だと思います。このブログでも記事にしています。 関連: Adobe、Figmaを約2.9兆円で買収へ デザインコラボツール大手 フォトショップの作業が楽になる、覚えておきたい小技テクニック18選 とても有益ですが、レイヤーの複製はoption+ドラッグではなくcommand+Jの方が速いと思います。 ちょうどいいWebデザインギャラリー そのWebサイトのいいところが言語化されているギャラリーサイトです。 Screen Sizes iPhone・iPadなどのスクリーンサイズま
3年くらい前にWEB屋の自分が機械学習株価予想プログラムを開発した結果 | マサムネットって記事を書いたっきり、機械学習にも株にもあんまり手を付けていなかったのですが、この年末年始、思い切っていろいろ進めてみました。 それで、なかなかに良い感じの結果が得られたので、そのままサービスとして稼働するまでに至った技術的経緯を書いていきます。 サービスそのものへのリンクは、有料サービスですので宗教上の理由などでリンクしたら見られない人もいるかと思いますのでここには張りません。個人的な考えとしては、技術者が適切に稼げる仕組みを作っていくことは重要だと思いますが、つまりは有料だろうと成果物であるサービスへの案内くらい張ったらええやんと思うんですがここではそういうことを論じる場ではありませんのでとにかくサービスそのもののリンクは控えておこうと思います。とはいえ、実際のサービスを見ないと判断しようが無いと
Vuex ストアに TypeScript の型を付ける（2020年12月版） - STORES Product Blog
業務委託で STORES の開発をしている @inouetakuya です。 下記の記事（2020/09/14）にあるように、STORES では TypeScript の導入を進めています。 プロダクトに途中から TypeScript を導入した話 - STORES Tech Blog 現状、新規に記述するコードについては TypeScript で書いていっているのですが、既存のコードではまだ JavaScript のままになっているものも残っています。 今回の記事ではそれらの既存のコードのうち、Vuex ストアに関するコードをどのように TypeScript で書き換えていったかをお伝えしたいと思います。 環境 対象とした環境は下記のとおりです。 TypeScript v3.9.7 NuxtJS v2.14.5 Vue.js v2.6.12 Vuex v3.5.1 Vuex Type H
Vue/Vite 関連のライブラリー名の読み方は間違えられやすいものが多く、混乱を招くことがあります。この記事では、2024 年現在における Vue/Vite 関連ライブラリーの正式な読み方や由来をまとめ、正しい知識を共有することを目的としています。 Vue フロントエンド UI フレームワークのひとつ。 「ヴュー」と読む（口語だと「ビュー」と発音することが多い）。 Vue（発音は /vjuː/、view と同様） https://ja.vuejs.org/guide/introduction.html#what-is-vue Pinia Vue 公式の状態管理ライブラリー。 「ピーニャ」と読む。スペイン語で「パイナップル」を表す単語 piña に由来。 「ピニア」ではない。 Pinia (pronounced /piːnjʌ/, like "peenya" in English) htt
心配性の僕がユビーに入社するまで｜issei
3月からソフトウェアエンジニアとしてUbie（ユビー）株式会社にジョインしたissei(@igreenwood)です。現在はAI受診相談ユビーの開発を担当しています。入社してそろそろ1ヶ月が経とうとしているので、入社エントリ的なものを書いてみます。 こんな人に読んで欲しい・ユビーに興味があるけど、持っているスキルがマッチしてないので今一歩踏み出せない人 ・ユビーに興味があるけど、強い人たちの中に飛び込むことに不安を感じている人 自己紹介ソフトウェアエンジニアになって2021年で約9年になります。スタートアップを中心に、いくつかの会社でtoC向けのAndroid/iOSアプリケーションを開発してきました。ユビーではAI受診相談ユビーの開発を担当しています。 心配性でアガリ症の33才です。 10年目にして未経験の分野に移るのは不安がいっぱい10年近い間Androidメインのエンジニアとしてやっ
最近Sassを使ってないなぁって話
2023年10月26日 Webサイト制作 初学者向けの記事やSNSの投稿で「Sassはマジで必須！」なんて書いているのを見かけますが、私の場合、そういえば最近は素のCSSばかりでSassは使っていないなーと思ったので記事にしてみます。私自身Sassが大好きでずっとお世話になっていましたが、CSSの進化も著しく、使い所があまりなくなってきているんですよね。 ↑私が10年以上利用している会計ソフト！ 変数やネスト、計算はCSSだけでOK 過去記事「Sass不要！CSSだけでも変数やネスト、演算子が使えるよ！」でも書いたとおり、Sassのメリットでもある変数やネスト、数値の計算はCSSだけでも可能です。 変数は過去記事「CSSで変数（カスタムプロパティ）を使ってみよう」で紹介したように、メディアクエリーによって柔軟に変化させたい時は、SassよりもCSSのカスタム変数の方が便利です。計算式を使い
実際にコードを用いてスタック領域とヒープ領域の概念を説明します。 person オブジェクトを宣言した時、JavaScript エンジンはオブジェクトの実体をヒープ領域にメモリ割り当てを行い、ヒープ領域にある実体への参照をスタック領域にメモリ割り当てを行います。 const person = { name: 'Taro', age: 24 }; 次のように新しい変数(newPerson)に再代入をすると参照がコピーされ、newPerson も person もヒープ領域に割り当てられた同じ実体に対する参照を持ちます。 const newPerson = person; Object.assign を使って新しいオブジェクトを生成するのは、参照コピーをしないための方法の一つで、よく使われる手法の1つです。 function getName(person) { return person.na
気づいたら個人開発5周年なので振り返ってみた - Crieit
どうもきらぷかです。 この記事は、Crieitのアドベントカレンダー、なんでもの13日目の記事です。 「なんでも」と言われると何を書けばいいかわからなくなってしまう 典型的日本人なので、徒然に振り返ってみようかと。 ふと思うと、最初の個人開発から5年も経っていたらしい。。 (徒然に書いたら、オチもなく、長くなってしまいました...ごめんなさい...) はじまりは5年前 昔のコミットを見てみたら、初アプリの初コミットは2014年9月17日だった。 はてなブログの最初の記事は2014年2月8日。 ちょうど、入社3年目のおわり。 社会人がどんなものか、会社がどんなところかなんとなくわかってきたころ。 IT企業ではあったけど、技術の話題で盛り上がることなく、 最新の技術動向はRSSで受け取るだけだったあの頃。 3年目あるあるな漠然とした不安と焦りだけあった。 「最近コード書いてないな...なまって
「Svelte」はWebページ用UIフレームワークで、コンパイル時にプレーンなJavaScriptを生成するといった特徴があります。本連載ではSvelteの活用方法を順を追って説明していきます。初回となる今回は、Svelteの概要と特徴を説明するとともに、実際にプロジェクトを作成して実行させ、Svelteを体験します。 はじめに WebページのUIを構築するためのライブラリやフレームワークは、ReactやVue.js、Angularといったさまざまなものが存在します。本記事で取り上げるSvelteも、そのようなフレームワークの1つです。 図1 Svelteの公式ページ 他のライブラリやフレームワークでは、それ自体のコードがブラウザーに読み込まれて実行されるのに対して、Svelteでは、Svelte自身のコードを含まないプレーンなJavaScriptをコンパイルで生成するため、実行ファイルサ
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Webシステム開発で関わる技術のまとめ(2022年に知った物) - Qiita
よく使う技術・サービスの公式ロゴのURLをまとめてみた！ - Qiita
2ヶ月半で Nuxt サービスを 3.5 個つくった話 - メドピア開発者ブログ
【TypeScript】学習・開発で必ず確認するべきリポジトリ・サイト・書籍 33
AWSアーキテクチャ for beginner（Webアプリケーション・コンピューティング編）
ここ3年くらいの個人制作を振り返って2022年のVueを考える（超私見）
なんでVueを使っているか｜laiso
7/25に発売されたばかりの、TypeScript/React/Next.js本読んでみた感想（随時更新）
エンジニアに求められるのは「品質に向き合う力」――ユーザー価値向上のためにフロントエンドができること
Remixを使い始めた話 | Money Forward Kessai TECH BLOG
Pages CMS: The No-Hassle CMS for GitHub
Rustでマークダウンパーサーを自作して、WASM+Nuxt3+Viteで動かしてみた
未経験者がフロントエンドの仕事を2年やって、各言語や仕事に抱いた感想 - Qiita
Nuxt 3 への移行に向けて頑張ってます - STORES Product Blog
GraphQLはサーバーサイド実装のベストプラクティスとなるか - Qiita
機械学習したデーターを爆速で販売するサービスをDockerで構築してみた - Qiita
Vue / Vite 関連ライブラリー名の読み方 2024
JavaScriptがブラウザでどのように動くのか | メルカリエンジニアリング
Webページ用UIフレームワーク「Svelte」とは？ プレーンで軽量なJavaScript生成を体験しよう！