個人開発で 賃貸物件の検索サービス Comfy を作りました1。グラフや地図でサクサク絞り込める UI が特徴のサービスです。とにかく気持ち良い使い勝手を実現するために色々工夫しています。 既にリリースからは 4 ヶ月以上経っているのですが、改めてサービスの概要や、システム構成及び使用した技術・サービスをご紹介しようと思います。2。 サービスの概要 Comfy は日本全国の賃貸物件を検索できる Web サービス です。画面 UI は上の GIF 画像のような感じです。 こだわったポイントを色々書くよりも実際にさわって頂いた方が新感覚の UI や気持ちよさを体感頂けるかと思いますので、 実際のサービス をぜひお試し頂ければ幸いです！ システム構成 図の通り、システムは大きく 3 つに分けられます。 フロントエンド バックエンド データ基盤 使用技術は図の通りではあるのですが、フロントエンドと
Udemyで新春セール開催！ 2020年にUdemyで最も興味を集めたカテゴリートップ5と人気コースを紹介 - はてなニュース
2020年は新型コロナウイルスの流行、それに伴うリモートワーク（テレワーク）やワーケーション、オンライン授業での学習といった大きな社会的変化がありました。 意図せず起きた変化ではありましたが、働き方や学び方の変化は、自分次第で何かを大きく変えられるチャンスでもあります。内閣府の調査*1によると、在宅勤務などで生じた空き時間を新たな挑戦に充て、オンライン学習でプログラミングなどIT関連の学習に取り組む社会人が増えているとのこと。 めまぐるしく変わる社会へ適応するためには、自分にとって必要な情報を見極めるだけでなく、時代と共に学び続ける姿勢も必要。新しい学びはきっとあなたの強い味方になってくれることでしょう。ちょうどオンライン学習プラットフォーム「Udemy」では、2020年12月30日（水）～2021年1月7日（木）の間、対象の講座を1,200円から受講できる新春セールを開催。講座は買い切り
転職活動の面接でいただいた質問集 - Qiita
この度転職活動を行って無事内定をいただいたので、記念に面接の中でいただいた質問をまとめてみました。 某大手金融のフィンテックエンジニアに転職します！！ 転職活動当初は、レガシー、ジョブホッパー、経験少でダメ出しの嵐🍃 でも諦めずNuxt+Firebaseでのサービス開発、マイクロサービス化ポートフォリオ、CTFの取組、GitHub毎日コントリビュート、個人活動も頑張って内定頂けて本当よかった😁 — bindingpry (@bindingpry) November 19, 2021 基本的に技術面接では、履歴書や実務経験の技術、ポートフォリオで扱っている技術、自分で口にした技術を深ぼられることが多かったです。 そこはしっかり技術を扱えるだけでなく説明できるようにすることも必要だと思いました。（自分は最初ボロボロでしたが笑） また正社員の面接では技術と同等に、仕事への姿勢、性格、事業への
エンジニアのための Figma 知識
本記事の多くは Inspect モードを前提に解説しています。 下記に Dev Mode に対応した解説を書いてみたのであわせてご参照ください。 https://codezine.jp/article/detail/18000 エンジニアにデザインツールの知識・習熟は必要か？ しなくても仕事はできると思うのですが、あるとよりクオリティの高い仕事ができることは間違いありません。 という訳でエンジニアがエンジニアとしての仕事をしていく上で「Figma のこういうことを知っておくと良さそう」という知識をまとめてみました。 ユースケースを考える まず始めにデザインは作らないはずのエンジニアが Figma を使う時にどんなユースケースがありそうかを考えてみます。 デザインを元に実装する時 デザインから何かを生成したい時(コードとか画像とか) 自分でちょこっとデザイン修正しちゃう この辺りがあるかな〜
テストの学習へようこそ！ コレクションでコンテンツを整理 必要に応じて、コンテンツの保存と分類を行います。 このコースでは、ウェブ用のテストの概要と探索について説明します。 このコースで学習する内容は次のとおりです。 テストの基礎 自動テストと手動テスト テストを実施する場所と方法 ベスト プラクティス 何をテストすべきか、誰に責任があるのか、目的そのものとしてではなく、目的を達成するために手段をテストすることを検討する方法など、テストの理念。 このコースには、学習に役立つ簡潔で実用的なサンプルコードも含まれています。 コースのスコープには、Node.js などの環境で実行される、フロントエンドの JavaScript とドキュメント モデル、バックエンドでのライブラリ テストが含まれます。テストの経験はありませんが、JavaScript の基礎知識と Node.js などに関する経験が必
SPAセキュリティ超入門 | ドクセル
スライド概要 SPA(Single Page Application)の普及が一層進んでおり、従来型のMPAを知らないウェブ開発者も生まれつつあるようです。SPA対応のフレームワークでは基本的な脆弱性については対策機能が用意されていますが、それにも関わらず、脆弱性診断等で基本的な脆弱性が指摘されるケースはむしろ増えつつあります。 本セッションでは、LaravelとReactで開発したアプリケーションをモデルとして、SQLインジェクション、クロスサイトスクリプティング、認可制御不備等の脆弱性の実例を紹介しながら、現実的な対策について紹介します。LaravelやReact以外のフレームワーク利用者にも役立つ説明を心がけます。 PHPカンファレンス2022での講演資料です。 PHPカンファレンスでの動画URL https://www.youtube.com/watch?v=jZ6sWyGxcCs
toyokeizai.net satoru-takeuchi.hatenablog.com 全然レイヤーが違うが、自分が何に悩んで、どういう風に理解したか、思い出しながら書き出してみる。 プログラミング歴 20歳からなので、現時点で10年ぐらいだが、中学生の時ちょっと触ったことがあった。 14 歳: 病気で入院したときに暇すぎて、2 週間ほど VBA を触った 大学 1 年: 大学の選択科目で Java, 夏休みに Python と Ubuntu の独習 大学 3 年: Python で自然言語処理のバイト 大学 4 年: Android アプリを作るバイト、就活ポートフォリオとして node/Websocket で MMO 一社目: Unity, ActionScript, Haskell, JavaScript 以降~: JavaScript/CoffeeScript/TypeScri
はじめに ChatGPTをはじめとしたLLMを使いこなすための必須スキル、プロンプトエンジニアリング について解説します。 最近は動きが早すぎてキャッチアップが難しくなっていますが、特に以下のような手法が注目されているようです。 In-context Learning (ICL) Chain-of Thought (CoT) Zero-shot CoT ReAct Self-Consistency Program-aided Language Model (PAL) 今回は、6つのテクニックの中からPart1として、ICL、CoT、そしてZero-shot CoTの3つを紹介します。 これらのテクニックは、ChatGPTをはじめとするLLMのポテンシャルを最大限に引き出すために必要不可欠です。 さらに、各テクニックを詳しく解説した論文も紹介していますので、是非ご一読ください。 In-con
以下はSimon Holdorf( dev.to/ Twitter / GitHub )による記事、9 Projects you can do to become a Frontend Master in 2020の日本語訳です。 9 Projects you can do to become a Frontend Master in 2020 Introduction あなたがプログラミングの初心者であるか、既に経験豊富な開発者であるかにかかわらず、この業界では、急速な変化に追いつくために新しい概念と言語・フレームワークを学び続けることが必要です。 たとえばFacebookが4年前にオープンソース化したReactは、既に世界中のJavaScript開発者にとって第一の選択肢になっています。 もちろんVueとAngularにも多くのフォロアーがついています。 さらにはSvelte、Next
2021/02/21 10選 => 12選に更新 2021/04/12 おまけを追加 2022/01/04 おまけにThe Modern JavaScript Tutorialを追加 こんにちは、WEBエンジニアのhedrallです。 もう一歩踏み込んでプログラミングに関して勉強をしようと思った時、 世の中には学習のためのレポジトリが存在していて、しかも世界的にはものすごい数のStarを獲得しているものも少なくないことを知りました。 今回はピックアップしてご紹介いたします。 [⭐️ 96.6k]: javascript-algorithms プログラミングで使用されるデータ構造や、一般的なアルゴリズムがまとめられており、全てjsで実装が例示されています。 [⭐️ 149k]: developer-roadmap webやinfraなど各分野のエンジニアになるために知っておくべき技術がロード
.app 1 .dev 1 #11WeeksOfAndroid 13 #11WeeksOfAndroid Android TV 1 #Android11 3 #DevFest16 1 #DevFest17 1 #DevFest18 1 #DevFest19 1 #DevFest20 1 #DevFest21 1 #DevFest22 1 #DevFest23 1 #hack4jp 3 11 weeks of Android 2 A MESSAGE FROM OUR CEO 1 A/B Testing 1 A4A 4 Accelerator 6 Accessibility 1 accuracy 1 Actions on Google 16 Activation Atlas 1 address validation API 1 Addy Osmani 1 ADK 2 AdMob 32 Ads
【注意！】 2024年4月末にこちらの本の内容を大幅リニューアルしました！ https://note.com/terry10/n/nf0674af97617 ※こちらのZennのBookも5/7を目安にリニューアル内容を反映する予定です 多くの人に手に取って欲しいので、リニューアル後は期間限定で無料配布も検討しています。 こちらのツイートで無料配布について告知しています！ ↓ https://x.com/teriteri_code/status/1783358352447414464 --- React+TypeScriptを使ったNetflixの映画一覧を表示するアプリケーションのチュートリアルです。 学べる事 - ReactのFunctionComponent（関数コンポーネント）とTypeScriptの使用 - React Hooksによるstate管理 - TypeScriptで外
同じTypeScriptという言語を利用する場合においても、トランスパイラによってTypeScript自体の機能制限がかかったり、思わぬトラブルを招く場合があります。それぞれのトランスパイラの特徴を踏まえた上で、それにより生じる問題も見ていきましょう。 1-1. tsc TypeScriptの開発元であるMicrosoft純正のTypeScriptトランスパイラです。TypeScriptを利用する際に typescript パッケージをインストールする必要がありますが、それに同梱されています。 公式ツールなだけあって最も早く最新バージョンのTypeScriptに対応したり、言語すべての機能を利用することができる一方で、バンドラではないためminifyやchunkの設定はできません。また、Path Aliasesの未解決や旧ESへの互換性が不完全であることが欠点として挙げられます。 tsco
Web制作者必見！ VS Codeのおすすめ機能拡張のまとめ、HTMLやCSSやJavaScriptのコードを書く時に便利
Visual Studio Code（以下、VS Code）が素晴らしいエディタである理由の一つは、デベロッパーの生産性を向上させるVS Codeの機能拡張の巨大なライブラリがあることです。 その中から、HTMLやCSSやJavaScriptのコードを書く時に便利なVS Codeの機能拡張を紹介します。 My 12 Favorite VSCode Extensions by Katherine Peterson 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 VS Codeとは VS Codeの機能拡張 VS Codeのおすすめ機能拡張 VS Codeとは VS Code(Visual Studio Code)は、Microsoftが提供する統合ツールを備えた強力で軽量なコードエディタです。MITライセンスで、商用でも完全に無料
大幅にリニューアルされた Next.js のチュートリアルをどこよりも早く全編和訳しました - Qiita
数日前（4/21頃）に Next.js のチュートリアルが一新されました。 Next.js は 3 月頭に ver 9.3 がリリースされ、ビルド時に静的に HTML を生成する関数などが追加されるなど、今までよりもかなりパワフルになり、いわゆる JAMstack と呼ばれるようなアプリケーションを作りやすくなりました。 そのバージョンアップに対応するかたちで、チュートリアルも大幅に書き直されました。 参考（開発チームの @chibicode さんのツイッター） Next.jsの公式チュートリアルを最新版に沿ってゼロから書き直しました! 🎓英語ですが初心者向けです! ⚛️最近導入されたgetStaticProps等の関数や、 🎨CSS Modulesの解説をしています! 🗣ブログを作りながら学びます 🤗ご感想お待ちしております!https://t.co/R4j9vpAQoc — S
はじめに 某プログラミングスクールで二年間講師をしてました。 受講生の方からの評価点は平均より高く、最終的には全インストラクターの中から代表に選ばれる立場にまでなりました。 始めた経緯 もともと、プログラミングスクールをいつか開きたいと思っていたこともあり、業務委託契約で経験が積めそうなところに応募。 即採用していただき、正社員で働く傍、副業としてプログラミング講師に。 エンジニア歴は当時は5年 得意な言語はPHPのみでした。 コロナ禍で全てが変わった 特定を避ける為に細かな時期は記述しませんが、この復業を始めてから今も尚世界を苦しめているウイルスの流行で事が大きく変貌していきました。 というのも、私が請け負っていたプログラミングスクールでは生徒様が作成したいと言う物をベースにプログラミングを教えるスクールでした。 その中で、コロナ禍前までの生徒様達は明確に、 「ECサイトが作りたい」 「
DX意味わからん。「IT革命」と何が違うの？という話｜広木大地（日本CTO協会理事/レクター取締役）
はじめにこの記事は、Engineering Manager Advent Calendar 2020の24日目の記事す。 職種を越えた働き方を模索するWeb Engineerのtrebyさんと、技術を突き詰めたいiOS Developerのbanjunさんの二人のパーソナリティをつとめるpodcast「きのこるエフエム」でお話してきた今話題のキーワードDXについてのお話を再編して記事にしたものです。 実際のpodcastについては以下からどうぞ。 いつの間にか"DX"がデジタルトランスフォーメーションにとられてた。trebyさん(以下敬称略) これは、我々のマイブームというか、最近、「DXっていいよね？」っていうふうに私が謎掛けをしますと、banjunさんが、「DX、わからん!」というふうに返すんです。 banjunさん(以下敬称略) 「DXって何ですか？何がいいんですか？」っていう話です
見ているサイト上に露出している機密情報(APIトークン、IPアドレスなど)を見つけるブラウザ拡張を作りました SecretlintというAPIトークンなどの機密情報がファイル内に含まれているかをチェックできるツールを書いています。 Secretlintはコマンドラインツールとして動くので、主にCIやGitのpre-commit hookを利用して、リポジトリに機密情報が入るのを防止できます。 SecretlintでAPIトークンや秘密鍵などのコミットを防止する | Web Scratch 一方で、実際のウェブサービスなどは機密情報がファイルにハードコードされているわけではなく(Secrelint自体がこういうハードコードを防ぐツールです)、環境変数やDatabaseに保存していると思います。 このような場合にも、コードのミスなどによって公開するべきではない情報(秘密鍵、APIトークン、Sl
こんにちは丸山@h13i32maruです。つい先日、devchat.fmというポッドキャストに出演して、「ドキュメント」というお題について話しました。なぜこんなニッチなお題について話したかというと、Ubie Discoveryに入社して5ヶ月の間にいくつか*1まとまったソフトウェアドキュメントを書いたので、自分の中でホットな話題だったからです。 #devchatfm 33回目は、Ubie DiscoveryのSWE @h13i32maru にドキュメントを書くことで得られるメリットや、ポイント・工夫などを聞きました！ #33 チームの生産性を上げるドキュメントのすすめ with@h13i32maruhttps://t.co/TrmZd13D91— 久保 恒太 / Ubie CEO (@quvo_ubie) 2021年8月12日 これらのドキュメントは個人的にわりと良く書けたと思ってますし、
最小限のコードで動く最も汚いコードから始める
最小限のコードで動く最も汚いコードから始める 2023.09.02 コードを書く際の重要な要点は、読みやすく他人に理解される「良いコード」を書くことです。しかし、完璧を目指して最初から書こうとすると行き詰まります。代わりに、荒削りながらも動くコードを作成し、徐々にリファクタリングして完成度を高めます。型エラーやリントエラーを無視しても構わないので、まずは動くものを作成しましょう。それからリファクタリングして「良いコード」を作成できます。 コードを書くときに最も大切なことってなんだろう？聡明な読者諸君ならご存知だろうが、コードは書く時間よりも読む時間のほうが長い。だから他人に読まれることを意識して、読みやすい「良いコード」を書かなくっちゃならない。コンポーネントは適切な粒度で分割されていて、適切な名前がつけられている。型システムに安全性だって守られてるし、最新のなんとかアーキテクチャにも準拠
Ajaxから始まった一つの時代の終わり
最近の流れを見ていての感想文なので、ideaとして投稿します。筆者のバックグラウンドとしては、Remixの商業記事を書いたり、App Routerの商業記事を書いたりしている人です。 さて、筆者は2022年の秋から、社内システムではありますがRemixをプロダクション運用しています。また、Next.jsのApp Routerについても、パラダイムとしてはRemixにインスパイアされた部分が多い[1]おかげで、順調にキャッチアップできています。 RemixとApp Routerは、ルーティングとデータフェッチを高度に統合しており、Progressively Enhanced SPA（PESPA）と呼ばれることもあるそうです。PESPAについては、次の記事が話題になりましたね。 このPESPAであるRemixを実運用する中で、フレームワークの手触りが近年触ってきたものと大きく違っている点があっ
ブラックフライデー＆サイバーセール開催！ Udemyでは何を買う？ 編集部の2021年イチ押しトピック10選 - はてなニュース
新型コロナウイルスの影響で、リモートワーク（テレワーク）やオンラインでの学習といった働き方・学び方の大きな変化は2021年も続いています。そんな2021年もあとわずか。やり残したことや学び残したことはありませんか？ オンライン学習プラットフォーム「Udemy」では、2021年11月19日（金）～2021年12月1日（水） の間、年間最大のセール「ブラックフライデー＆サイバーセール」 を開催します！ 対象の講座がなんと1,200円から購入可能になります。 ブラックフライデーセールは11月19日（金）～11月26日（金）、サイバーセールは11月29日（月）〜12月1日（水）の開催です。11月27日（土）〜11月28日（日）はセール対象外なので、ご注意ください。 講座は買い切りなので、おトクなこの期間に気になる講座を購入しておいて、時間ができたときに自分のペースで学んでみるのもいいかもしれません
Vite（ヴィート＝フランス語で「速い」の意味）は2020年に発表された新しいフロントエンドのビルドツールです。 開発者がVue.jsの作者であるEvan You氏であるため、Vue.jsのツールであると誤解されることもありますが、プレーンなJavaScript（バニラJS）からVue.js・React・Svelteといった流行のフレームワークまで、さまざまな環境で利用できる汎用的なツールです。 位置付けとしてはwebpackのようなバンドラーと呼ばれるものに近い存在ですが、それだけではありません。この記事では、Viteを導入してプレーンなJavaScriptから、TypeScript+Vue.js・Reactといったフレームワークまで、快適な開発環境を手に入れる方法を紹介します。 この記事で紹介すること： Viteの特徴と基本の仕組み 基本の使い方 Vite + SCSS Vite +
しずかなインターネットの技術構成
こんなWebサービスをリリースしたので、技術的な話をまとめておこうと思います。 元々このサービスは、趣味の延長線のような感じで開発を始めました。競合にあたるnoteやはてなブログなどのサービスが確固たる地位を築いているということもあり、「お金にはならないだろうけど、自分の趣味を詰め込んだものにしよう」というゆるい気持ちで開発を続けています（楽しい）。 選定の方針 趣味と言っても文章投稿サービスなので、ユーザーが少数であったとしても長期間運営しなければなりません。そのため、ユーザー数が少なければランニングコストが数千円/月以下、ユーザー数が増えたときは段階的にコストが上がるように選定を行いました。 アプリケーション フルスタックNext.jsアプリケーションをCloud Runにデプロイしています。各APIエンドポイントはNext.jsのAPI Routesで生やしています。 Next.js
思わずWeb開発で使いたくなる便利機能をAPIで提供するサービスを厳選してみた！ - paiza times
どうも、まさとらん（@0310lan）です！ 今回は、Webサービスやアプリ開発などで便利に使える機能をAPIで提供しているサービスを厳選してみたのでご紹介いたします。 画像系、ストレージ、CMS、認証系、APIモック…など、さまざまな用途に使えるサービスの特徴や基本的な使い方も合わせて解説しています。いずれも無料で使えるものばかりなので、ご興味ある方はぜひ参考にしてみてください！ ■イラスト風のアバター画像を取得できるAPI 【 Joe Schmoe 】 Webサイト、ブログ、SNSなどに利用可能なアバター画像を取得できるAPIです。 イラスト風の人物画像を取得できるのが特徴で、Webサイトのチームページにアバターとして利用できるほか、自分のプロフィール画像やブログに挿入する画像など無料で利用できます。 使い方は簡単で、以下のような構成のエンドポイントを実行するだけです。 https:/
こんにちは！CX事業本部の片岡です。 エディタ戦争が終息して5年たった今、無血革命と呼ばれたVisual Studio Codeをご存知でしょうか？皆様ご愛用のことと存じます。 そんなVisual Studio Codeの便利なショートカットと拡張機能を紹介します！ よく使うショートカットの紹介 拡張機能「Sublime Text Keymap and Settings Importer」をインストール前提の話です。 https://marketplace.visualstudio.com/items?itemName=ms-vscode.sublime-keybindings 編集時によく使うショートカット 文字選択 Command + D ：文字を選択（入力するたび選択中の文字を複数選択できます） Command + U ：文字選択のUndo（選択前に一つ戻ります） Command +
2020年のフロントエンドエンジニアの技術スタックの一例
年の瀬なので、私自身が今年利用した技術をベースに技術スタックをまとめてみようと思います。 とはいえ Web Standard といった広い対象から、フレームワークやライブラリまで、粒度の違うものを全て言及するのは無理があるというもの。特に強く言及できるものは個別で説明しつつ、最後に利用する機会がなかったものも最後に記載する形で。 以下常体。 追記: マイナー企業のようなので一応書いておきますが、筆者は本業ではLINE株式会社という組織でいわゆるエンジニアリングマネージャーと言われるような業務とその採用に関わる仕事をしています。 利用した技術一覧 HTML/CSS/JS みたいなことを書いてるとキリがないので、独断と偏見で区分けして適宜漉いています。特に利用する機会が多かったものは太字でピックアップ。 Frontend Language/Platform TypeScript JavaScr
（年収270万で）プログラマーを引退して、医学部にきた俺が真面目に考えてやろう。 ① 言葉は正しく使おう真面目に読んでいて、ちょっと気になる箇所がある。たとえば PostgreSQL を postgre とか書くヤツは現場では嫌われるぞ。少なくとも postgres と書いてくれ。お里が知れるぞ。 ② プライドが高い消えていくエンジニアの特徴だけど、叱責されたり馬鹿にされるのが嫌で VCS にコミットしないヤツ、または貪欲にコードレビューをされるのが嫌がるやつは、成長しない。 ③ エリート意識この業界は数年前には『デジタル土方』と揶揄される業界でした。ちなみに、アメリカでも「テック系はハードだから避ける」という雰囲気でした。つまり何をいいたいのかというと、ソフトウェアの開発者っていうのは「泥臭い領域」なんだよ。エリートとは程遠い場所にあるというね。 ④ 「某天市場の先輩には，ここ仕事量少な
Magic UI
UI library for Design Engineers20+ free and open-source animated components built with React, Typescript, Tailwind CSS, and Framer Motion. 100% open-source, and customizable.
フロントエンドコーディング試験
RESAS(地域経済分析システム) APIの「都道府県一覧」APIから取得するAPIレスポンスから都道府県一覧のチェックボックスを動的に生成する都道府県にチェックを入れると、RESAS APIから選択された都道府県の「人口構成」を取得する人口構成APIレスポンスから、X軸:年、Y軸:人口数の折れ線グラフを動的に生成して表示する「総人口」の他に「年少人口」「生産年齢人口」「老年人口」も切り替えるUIを何らかの形で用意し表示できるようにすること（同時に表示する必要はない） React/Vue.jsのいずれかを用いてSPAを構築すること（バージョンはできるだけ最新版をご使用ください）ReactVueNuxt.jsやNext.jsなどの、これらを内包したフレームワークの利用も許可する都道府県一覧および総人口情報はRESAS APIのデータを用いることグラフは Highcharts や Rechar
Discordの有料読み上げBotを運営している高校3年生です。公開2年目で月に12kほど利益が出ています。 最大4つのボイスチャットで読み上げ可能 可用性99% Webダッシュボード などの機能があります。Discordを使っている方がいれば、ぜひ導入していただけるとうれしいです。 コミュニティの宣伝 未踏ジュニアに採択された採択者で、未踏ジュニアに挑戦したい方向けのコミュニティを始めました！約12人の採択者と話をしたり、質問できます！ぜひ共有していただけると幸いです🙏 なぜ作ることにしたのか？ 昔（4年前）頃から無料のDiscordの読み上げBotは存在していましたが、どれも使う人数が多すぎて制限があったり、読み上げが遅くなったりするという問題がありました。そこで、有料の読み上げBotを運営することにしました。 料金体系 一律で月500円/20万文字のサブスクリプションにしました。g
React, Redux, GraphQLを学べるオンライン教材「Full Stack Open 2019」がとても良かった - FRTKL
この記事はコネヒト Advent Calendar 2019の11日目の記事です！ qiita.com はじめに 半年ほど前から新規事業のチームで仕事するようになり、主な技術スタックもPHPからGo, Next.jsへと変わりました。 その中で、特にフロントエンドのテスト周りにおいてキャッチアップ不足を感じていたのですが、たまたま見つけた*1「Full Stack Open 2019」という教材がとても良かったので紹介したいと思います。 「Full Stack Open 2019」とは fullstackopen.com フィンランドのヘルシンキ大学で実際に使われているテキストベースのオンライン教材です。 Nodeで作られたREST APIとReactを使ったSPAの実装を通して、React・Redux・Node.js・MongoDB・GraphQLが一度に学べる教材となっています。 教材
はじめに こんな人が役に立つ記事 コーディング業務の効率を上げたい。 コーディングに関するチートシートを知りたい。 打つのもめんどいからコピペでなんとかしたい（笑） 今回は、コーディングに役立つチートシートをまとめました。 VSCODEチートシート エンジニアなら必ず使うであろうVsCodeのショートカットチートシート。これはよく使ってます！ HTML系のチートシート集 HTMLに関するチートシートをまとめてみました。 HTML5 タグチートシート HTML5 のタグチートシート。サイトには 5 から廃止になった避けるべきタグなどもまとめてられており、 PDFでダウンロードできます。 HTML5 入れ子チートシート HTML の入れ子の可否を視覚的に分かりやすく、色づけしてくれます。対象要素の親、子を選ぶだけで、簡単に調べることが出来ますので便利なチートシート 特殊文字一覧：HTMLで使え
フロント開発を炎上させてしまった話
はじめに お久しぶりです、皆様のサンドバックが帰ってまいりました。 投稿ができていない期間、Nuxtにボコボコにされて裸足で逃げ出し、逃げた先のReactにも強烈な左カウンターをお見舞いされました。 本来であれば、このような場所に投稿することすらはばかられる内容ですが、敢えて書きましょう。 私はフロント開発を炎上させた愚か者です。 なぜ今懺悔するのか Twitterでこんな投稿を見ました。 確かに、実務で得られる経験は、とても大きく得難いものです。 当然、ご迷惑をおかけしてしまうことは、だれであろうとあるでしょう。 ただし、その「ご迷惑」の大きさについて、我々は知っておかなくてはなりません。 見えている地雷を踏んでしまうようなモノ好きもいないでしょう。 特に、この手の地雷は強力ですからね。 塵となって吹き飛んだ私の命が、新たな浅瀬の民の糧となることを祈っています。 具体的に何が起こったのか
これはなに 自分がここ2年ほど趣味として競技プログラミングをやった経緯と感想です。いわゆるプログラマの定年と呼ばれる35歳を過ぎてから始めたのですが、思ったよりも楽しめました。自分のようなシニアと呼ばれるプログラマが競プロに興味を持ってくれたらいいなと思って書きました。 競技プログラミング（競プロ）とは 競技プログラミング（以後、競プロ）は、プログラミングをして順位を競うコンテストです。コンテストはたいていオンラインで毎週のように開かれており、誰でも参加できます。形式としては、与えられた時間内にいくつかの問題を解くコードを提出して、その正解数と提出までにかかった時間を競うというものです。たいていは、コードの実行時間および使用メモリに制限があり、その制限内で実行できるコードを書く必要があります。またコードが正解かどうかは出題者が用意したテストケースをパスするかどうかで判定されます。 多くのコ
ウェブ制作で React(Next) や Vue(Nuxt)、jQuery が最近どれぐらい使われているのか調べてみたdate2022.9.4(Sun.)tagsweb developmentFrontendJavaScript ウェブアプリケーション開発で React や Vue を使うのはよくある話かなと思うのですが、マーケティングや広報活動など広告クリエイティブ系のウェブサイト制作ではどれぐらい使われているのかなと思い、暇つぶしにリサーチしてみました。 調査方法母集団ウェブギャラリーサイトをいくつか見て比較的国内系のセレクトが多そうな https://io3000.com/ さんから 2022 年に紹介されている 175 件と、ウェブサイトのアワードサイトとして有名な https://www.awwwards.com/websites/ さんで 2022.8 以降に Winner と
【2019年版】バックエンドエンジニアが React でモダンなフロントエンド開発を始めるまで - Feedforce Developer Blog
id:daido1976 です。入社してからあっという間に1年が経っていました。 直近3ヶ月ほどプライベートでフロントエンド開発の勉強をしていたのですが、ここ数年で CSS の Grid や React の Hooks が新しく導入されたことなどもあり、少し古いコンテンツだと教材として役立たない1 と感じることが多かったので、本記事では私が実際にやってみた中で 2019年時点で オススメできると判断した教材や学び方を皆さんにご紹介したいと思います。 はじめに やったこと JavaScript MDN の JavaScript の部分を読む & 手を動かす JavaScript Primer を読む YouTube 動画で Promise を学ぶ デバッグ方法を学ぶ React React 公式のチュートリアルを2周する egghead.io の動画で Redux を学ぶ ヘルシンキ大学の
0から始めるNode.jsパフォーマンスチューニング
近年の Node.js は API のサーバとしてはもちろん、Nuxt.js や Next.js といった SSR や BFF などフロントエンドのためのバックエンド言語としての人気が高まっています。 フロントエンドエンジニアがコンテキストスイッチ少なくバックエンドの整備ができることは非常に大きな利点です。 ですが、フロントエンド（ブラウザ側）とバックエンド（サーバ側）ではパフォーマンスチューニングで見るべき点が大きく違います。 しかし Node.js アプリケーションのパフォーマンスイシューの見つけ方などがまとまっている資料は少ないです。 そこで、本記事ではフロントエンドエンジニアが Node.js でパフォーマンスイシューを見つけ、改善するため自分が普段パフォーマンスチューニングを依頼されているときにみている基礎的なポイトをまとめていきます。 1. 計測ステップlink Node.js
新しい記事もよろしくやで！ 5歳娘「パパのReact、めっちゃ遅いね！」 とある平日 娘（5歳）「パパ、今日は何のお仕事してるの？」 ワイ「おお、娘ちゃん」 ワイ「今日はな、ショッピングサイトを作ってんのや」 今日のお仕事内容 ワイ「↓このデザインの通りに、コーディングをせなあかんのや」 娘「なるほどー」 娘「このショッピングサイトで商品を売りたい！っていうお店があったとして」 娘「そのお店の人が、最初にお店の情報を登録するためのページだね！」 ワイ「せやせや」 まずはデザインを眺めてみる ワイ「この店舗登録ページにはなぁ」 ワイ「↑こんな感じの」 ワイ「項目名と入力欄がセットになったパーツが何度も登場するから」 ワイ「そのためのコンポーネントを作ろうかなー、って」 ワイ「そう思ってたとこなんや」 娘「ふーん」 娘「ラベル付きテキストフィールド的なコンポーネントってことだね」 娘「どこまで
はじめに inspired mogaさんのブラウザで動くサービスを作るときの技術選定が素晴らしい記事だったので、自分も書いてみる事にしました。 幸いにも技術選定からのお仕事をする機会が多くて、自分の中でパターンが大体決まってきているので言語化してみます。前提が同じサービスは無いので絶対的な正解は無いですが、なんかしらの参考になれば幸いです。 ※2022/02時点 私/よくあるお仕事について Web系のサービスなんかいい感じにするマンとして、フリーランスとして働いています。 準委任という形でスタートアップ企業をお手伝いする事が多いです。 MVPを作りたい、もしくはMVPは行けたのでちゃんと作り直したい、という要望があって参画して、まるっと作ってそのまま運用をします。作って終わりではなくて、運用や拡張性を考えてやってます（サービスに必要なのはもちろん、運用する自分が楽だから）。 前提 エンジニ
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
【個人開発】爆速な賃貸物件の検索サービスを作った - Qiita
テストの学習へようこそ！ | web.dev
プログラミングを学ぶにあたって詰まったことと、そこから学んだこと - mizchi's blog
ChatGPTは馬鹿じゃない！ 真の実力を解放するプロンプトエンジニアリングの最前線
2020年のフロントエンドマスターになりたければこの9プロジェクトを作れ - Qiita
Webエンジニアが勉強できるGit Repository 10選 - Qiita
コードの健全性: 礼儀正しいレビュー == 役立つレビュー
【React+TypeScript】Netflixのクローンを作るチュートリアル
TypeScriptをプロダクト開発に使う上でのベストプラクティスと心得 - Qiita
プログラミングスクールの講師を2年間続けて限界が来て辞めた話 - Qiita
見ているサイト上に露出している機密情報(APIトークン、IPアドレスなど)を見つけるブラウザ拡張を作りました
ソフトウェアドキュメント作法 - maru source
jQueryからTypeScript・Reactまで - Viteで始めるモダンで高速な開発環境構築 - ICS MEDIA
VSCodeの秘伝のワザを大公開！ | DevelopersIO
（年収270万で）プログラマーを引退して、医学部にきた俺が真面目に考えて..
高校生が作った有料サービスがちょっと儲かったのでいろいろ書く
【サボりたいエンジニア向け】コーディングに役立つチートシートまとめ - Qiita
中年プログラマの競プロ事始 - hydrakecat’s blog
ウェブ制作で React(Next) や Vue(Nuxt)、jQuery が最近どれぐらい使われているのか調べてみた - feb19
5歳娘「パパ、余分なpropsいっぱい書くんだね！」 - Qiita
とりあえずWebサービス作る時の私の技術選定ポイント@2022/02