ウェブ上で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の任意の行にブレークポイントを設定することで実行を一時停止して変数やコールスタックの中身を確認できます。ブレークポイントを

なぜ書いたか 筆者もWebサイト制作をそこそこ長くやってきておりいまは業務でVueを書いたりちょっとReactを書いたりSvelteを書いたりしていますが、2年前くらいまではReactやES6の構文すら書いたことがありませんでした。 WordPressでのサイト制作が多く、機能が少ないサイト制作会社ではjQueryで充分なことも多く、恥ずかしながら業務時間外での学習や外部の情報を追うこともしていなかったため、開発系の技術スタックに慣れるのにかなり時間がかかりました。 まずはよく使うコードを見て解説しながら答えの一つを示し、よく出てくるコードをざっくり理解して書けるようにすることで、実務でReactを取り入れる取っ掛かりになればいいなぁという思いでこの記事を書いています。 続編は多分今月中に書きます。 こちらは基礎編です。 対象者 普段jQueryでWebサイトを制作している 生のJSはあん

mizdra.icon が社内向けに発表した資料なのですが、折角なので一般向けに書き直して公開します。

１．はじめに 2020年8月からプログラミング勉強を勉強していますが、約１ヶ月かけてWebアプリを開発しました。勉強する前はこんな状態でした。 ・HTML、CSSはうっすらと名前を聞いたことがある ・現職ではWord、Excelぐらいしか使用していない ・寿司打で３０００円コースすらクリアできない この状態から１ヶ月半学習しほぼ独学でWebアプリを開発をしました。 (一応10月から侍エンジニア塾にレッスンを受けていますが、アプリ開発前の基礎的な部分は独学で学習したこと、アプリ開発においては技術的な質問の回答、コードのレビューをインストラクターにしていただきましたが、アプリの方向性など大半は独自で考えたことを考慮してほぼ独学という言葉を使いました。) 学習歴１ヶ月半の実力を記録として残したくて記事にしました。 ２．自己紹介 年齢：32歳 職業：プラント設計 未経験からエンジニア転職目指して勉

Webアプリやスマホアプリ、オンラインショップ、オンラインサービスなど、Web開発における一通りの需要に応えられるような知識・スキルを練習するのに役立つプロジェクトを紹介します。 8つのプロジェクトにはそれぞれ異なる課題が設定されており、開発者が行う実際のタスクが反映されています。 バックエンドが中心ですが、フロントエンドのCSSのテクニックなども磨けます。 8 Projects with modern designs to become a Full-stack Master 2020 by Thu Nghiem 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに Image Uploader My Unsplash CatWiki Authentication App Shoppingify Chat Group Tw

こちらの記事は、Indrek Lasn 氏により2019年 7月に公開された『 9 Useful Browser Extensions for Developers — 2020 edition 』の和訳です。 本記事は原著者から許可を得た上で記事を公開しています。 著者Twitter https://twitter.com/lasnindrek Web開発者として、私達はブラウザの拡張機能を存分に利用することができます。ブラウザの拡張機能は、作業環境とコーディングの生産性の向上にとても役立ちます。 2020年に近づき、数多くの新しい拡張機能が登場しました。そこでWeb開発者にとって最も便利な拡張機能を紹介します。 「私がかなたを見渡せたのだとしたら、それは巨人の肩の上に乗っていたからです。」 アイザック・ニュートン Refined GitHub Refined GitHubはGitHub

そろそろWebエンジニア3年目の折り返しになるので、Webエンジニアとして働く中でこれまで読んできた情報たちをまとめようと思い立ちました。 エンジニア3年目の今だからこそまとめられる情報として、「エンジニア1年目の１年間で読んでおきたかったな〜。」という本と記事をまとめておきます。 まとめ始めたら楽しくなってしまい、情報量が多くなってしまった...。全部手に取るのは不可能だと思うので、サーっと目を通して見て興味が湧いた本や情報を手にとっていただけると良いかと。 これからWebエンジニアになる人、Webエンジニア1年目の人の参考になれば幸いです。 これは何？ Webエンジニア1年目が仕事を進める上で絶対に求められるであろう知識を、技術力・Web知識・仕事の進め方・キャリアの観点からまとめました。 「これだけ読んでおけば絶対大丈夫！！」という安易なものではありませんが、「どんな知識を学べばいい

DOMはHTMLの木構造(あとXMLも）やイベント等をプログラムから操作するためのAPIです。DOMの実装者として有力なのがウェブブラウザであり、ブラウザが提供するDOMのAPIを用いてJavaScriptプログラムからウェブページを制御するというのがDOMの極めてメジャーな使い道です。 近年知名度を増してきたReactやVueなどのライブラリも、もちろんこのDOMを用いて実装されています（Reactだとreact-domというあからさまな名前のパッケージがDOMを扱う部分を担当しています）。 この記事では、DOMで提供されるAPIを用いて木構造にノードを挿入する方法全38種類を列挙します。 ノードの挿入とは DOMにおいて基本的な操作のひとつがノードの挿入です。ノードというのは木構造の最小構成単位であり、要素ノードやテキストノードなどの種類があります。例えば<u>は</u>というのはu要

JavaScriptのデバッグは、ウェブ開発の必須スキルのひとつです。プログラムの実行をデバッグすることで、現在の変数の値や、処理がどのように進んでいるのかを確認できます。デバッグによってプログラムが意図した動作になっているかの分析に役立てられます。 本記事ではGoogle Chromeブラウザーの「Chrome Developer Tools」（以下「デベロッパーツール」、「DevToolsデブ・ツールズ」という略称もあります）を使用してJavaScriptをデバッグする際の基本的な使い方を解説します。「今までデベロッパーツールを使ったことのない」という方でもこの記事を読めば理解できるよう、チュートリアル形式になっています。20分ほどで理解できるようまとめているので、順番に試しながら読み進めてください。 この記事で学べること デベロッパーツールの使い方 JavaScriptのブレークポイ

はじめに この記事は自分のための備忘録も兼ねた、新人による新人のための新人の教材リンク集です。 新年度になりましたので、少し更新をしました。よろしくおねがいします。 ターゲット この記事はこんな人に向けて書いています。 これからWebプログラマを目指す人 Webプログラマになったばかりの人 コーディングだけでなくデザインやマーケティングにも興味がある人 早く一人前のWebプログラマになりたいと思ってる人 つまりわたしのようなへっぽこのこと 1. コーディングを身につける ▼まずはここから 何から始めて良いかわからない！新しい言語を学びたい！という方に。 ドットインストール https://dotinstall.com/ 動画付きで解説してくれる学習サイト。とにかくカバーしている範囲が広いのも特徴。無料プランでも十分勉強になります。早口ながら丁寧でわかりやすく、時々ちょっと間違える田口先生の

この記事では、プログラミングをしてWebサービスを個人＆独学で開発するときに役に立つ＆役に立ったWebサービス、Webサイトを紹介します。 全般 質問サイト チュートリアル サーバー・データベース 開発環境 API フロントエンド・デザイン 配色 HTMLをHAMLに変換 フレームワーク CSSジェネレーター 背景 ロゴ 全般 質問サイト Qiita、stackoverflow(英語版)を使えばプログラミング初心者が頻繁に陥りがちなバグやエラーの解決法を見つけることができます。 Qiitaは最近は記事の質が下がっているようにも感じますが、初歩的な情報はまとめられているので問題ないでしょう。 より理論に踏み込んだ知識を得たいなら専門書を読み込むことが必要です。しかしウェブサービスを開発する目的を果たすだけなら「どのように？（HOW）」がわかれば「なぜ？（WHY）」は後からでもいいと思います。

そんなおりに舞い込んだ待望のWebサービスの案件がありました。しかもシングルページアプリケーション。S.P.A！ S.P.A！ いままでSPA案件なんてやったことなかったし、やってみたかったしで、恐怖と歓喜の入り混じったゾワゾワとした感覚につつまれました。 ってことで、今回はいろいろと考えて準備した構成をご紹介します。 使用するフレームワークなど 世の中の流行りと僕の趣味で選びました。 Nuxt（フレームワーク） Pug（テンプレートエンジン） Stylus（CSSプリプロセッサ） ESLint（JavaScript静的検証） Prettier（自動整形） Stylus Supremacy（Stylus自動整形） Jest（ユニットテスト） Storybook for Vue（コンポーネント） Nuxt（フレームワーク） 言わずと知れた、巷でも話題のアプリケーションを作成するためのフレーム

どうも、まさとらん（@0310lan）です！ 今回は、Web開発を効率化したり便利にしたりしてくれるWebサービスを厳選してご紹介しようと思います。 プログラミング系、グラフ・チャート系、画像系、サイト構築系、分析・ログ系…など、幅広いジャンルから今すぐ活用できるサービスをまとめているので、ご興味ある方はぜひ参考にしてみてください！ ■GitHubのサイトから高機能なオンラインIDEを起動できるサービス！ 【 Gitpod 】 GitHubのリポジトリページから本格的な統合開発エディタを起動させて、ブラウザ上からプログラミングできるサービスが「Gitpod」です。 IDEにはターミナルも搭載されているので、コマンドの実行やGitの制御なども行えるうえGitHubのコードレビューにも対応しています。 使い方は簡単で、GitHubのリポジトリURLの前に「gitpod.io#」を付与するだけで

偉大なるリポジトリ 昨年に引き続き、Webエンジニアのためのロードマップが2019年版へ更新されています。2018年の間に大きく様変わりしていて、他の投稿者による翻訳記事がQiitaにもあがっているので詳しくはそちらをご覧ください。 この記事では2018年版と2019年版を比較して、技術トレンドの推移をそれなりに把握する事を目的としています。また、技術選択の際に迷った時も指針として活用していただければ幸いです。前回書いた記事はこちら 内容が充実しすぎていることもあり、すべてに触れたくても触れられません。一部ピックアップをしながら進めていきます。 ではさっそく見ていきましょう！疲れるので今回はあまりふざけません。 🚀Introduction 2018 2019 Choose your path に変化はないですが、左右の四角に変化があります。2019年版にはlicenseやSOLID,KI

8/19(開始から0日目) 議題 : 「何をやるか決める」 時間 : 3時間 初日の会議は何をやるか決めました。作ってみたいもの、やってみたいこと、アイディアをとにかく雑多に書き出していきました。 その時に出たアイディアがこんな感じです(原文ママ) リアルタイムに腹筋バトル ツイッターのその人のイラストだけを収集して表示 飲食店のメニューのweb化 スピード合コン jsのアニメーションをフル活用したブログ 目標達成を対戦化(対人) バーチャルユーチューバーの情報を集める 自分の宣伝してほしいものを提示して、ツイートをしてもらう 同じ料理をどれ程うまく撮れたか投稿し合って投票でランキングするアプリ。 youtubeライブ&チャット + twitter CMの間に溜まったツイートを見るサイト 飯を食べるとカーリングのストーンが投げられる 「自分たちでも作れる」「作ってて楽しいもの」「ユーザ投稿

って海の向こうの人が言ってました。 私はjQueryさえあれば概ね生きていけるので全然知らないけど、 あなたは全部知ってるフロントエンドエンジニアなんだね。すごーい！ 以下はFront-End Developer Handbook 2017の第三部、Front-end Developer Toolsからリンクされているツールと、その簡単な紹介です。 ドキュメントツール Dash 150以上のライブラリのAPIリファレンスを検索できる。有料、Mac専用。 DevDocs 200以上のライブラリをオンラインで検索できる。無料。 Velocity 中身はDashと同じ。 有料、Windows専用。 Zeal 200以上略 無料のオフラインドキュメント。 SEOツール Keyword Tool 検索ワードを入れると関連キーワードを教えてくれる。 Google Webmasters Search C

Transcript 30代から始めるwebフロントエンド入門 コネヒトマルシェ #2〜webフロントエンド市〜 @itosho 1 ▪ 自己紹介 ・伊藤 翔 / @itosho 　・所属：コネヒト株式会社 / Supership株式会社 ・野球とアイドルが好きです。 ・最近のオススメ：sora tob sakana 先日メジャーデビュー ▪ 自己紹介 ・伊藤 翔 / @itosho 　・所属：コネヒト株式会社 / Supership株式会社 ・野球とアイドルが好きです。 ・最近のオススメ：sora tob sakana 先日メジャーデビュー ・主にサーバーサイドエンジニアをやっています。 　・よく書く言語：PHP / Ruby / Golang ＿人人人人人人人人人人人人人人＿ ＞　サーバーサイドエンジニア　＜ ￣Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y￣ 4 ▪ 今日話すこと

転職ナビのフロントエンドを担当しています、@sueshinです。 Livesense - 関 Advent Calendar 2017、22件目をお送りします。 どうぞ宜しくお願いします。 はじめに フロントエンドでよく注目されるJavaScriptではなく、 地味で渋いまるで関節技のような、Google Chrome Devtoolsを使った技術をtipsの形式でまとめました。 免責事項 ショートカットなどは全てMacのキーボード操作にしています。Windowsユーザーは適宜読みかえてください。 Chromeのバージョンは63系に基づいて紹介しています。 52の関節技！！ Elements 1.hover時のコンポーネントのCSSルールを表示 使い方 ①DOM要素を選択 ②Stylesペインを開く ③:hovをクリック ④hoverフィルタを適用 2.対応するCSSファイルを開く 使い方

本記事では、 チームによる持続的に変更可能なWebアプリケーションの開発を目標に、フレームワーク導入時に考慮すべき22の観点を紹介する。 フレームワークによって特徴は異なるが、本番導入にあたって、考慮すべきポイントはあまり変わらないので、極力フレームワーク1に依存しすぎないよう配慮する。また、話をシンプルにするため、REST APIを提供するアプリケーションを題材とする。 前提 ソフトウェアのエントロピー ソフトウェアがエントロピー増大の法則を避けられないことを、体感している開発者は多いだろう2。普通にアプリケーション開発を続けると、開発スピードは鈍化し、品質は低下してバグが増え、開発者からは技術的負債への怨嗟の声が聞かれるようになる。エントロピー増大というフォースは極めて強力で、意思を持って立ち向かわなければ、容易にダークサイドに堕ちてしまう。 関心事の分離 大規模Webアプリケーション

Webサービスの初期開発とマイクロサービス・BFF Microservices Meetup vol.5 (API Gateway & BFF) 2017/3/30 @FiNC