はじめに 今回は無料でWeb制作周りの技術を学ぶことができるサービスをまとめました。 これからWeb制作の学習を始めていきたい人やプログラミングの基礎学習をしていきたい人におすすめのサービスなのでぜひ参考にしてみてください。 この記事の対象者 プログラミング初心者~中級者 Web制作を学びたい人 HTMLやCSSをより深めたい人 ポートフォリオを作りたい人 無料コーディング練習所 まずはじめに紹介するのはWebサイトを制作しながらコーディングスキルを身につけることができる無料コーディング練習所です。 こちらのサイトではデザインカンプが用意されており、基本的なコーディング方法から応用的な手法まで実際にWebサイトを制作しながら学ぶことができます。 準備編でがエディタの設定方法や拡張ツールといったコードを書くための基礎の基礎から丁寧に解説をしてくれています。 入門編~上級編ではWebサイトを作

LINE株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。 LINEヤフー Tech Blog TL;DR:2022にフロントエンド開発で最も考慮すべきユーザー環境は、パフォーマンスでは低スペックのAndroid端末、標準仕様では2年前のSafari、そしてネットワークでは４Gです。それに対してはJSへの過剰依存などが原因で主にパフォーマンスの面でのウェブ全体の対応がよくありません。 こんにちは！LINEフロントエンド開発室のダバロス アランです。この記事のタイトルを見て「釣りタイトルですね〜」と考えている方がいると思いますが今回に限ってはそれを大目に見てください。それはなぜかと言いますと、2021年から2022年にかけて私たちフロントエンドエンジニアが全体的に考え方を改める必要が出るほど大きな変化がありました。 その変

どうも、まさとらん（@0310lan）です！ 今回は、フロントエンド開発者およびこれから学習をしようと考えている人に最適な無料リソースを厳選してご紹介します。 学習コンテンツばかりでなく、開発に便利なサービスやツールなども紹介しつつ、初心者から中級者くらいまで役に立つドキュメントもまとめています。すべて無料なのでWeb開発にご興味ある方はぜひ参考にしてみてください！ ■何を学習したらいいのかをロードマップで確認する 【 Developer Roadmaps 】 フロントエンドの学習といっても意外に広範囲なので、まずは何から勉強をすればいいのか迷う人も少なくありません。この「Developer Roadmaps」はWeb開発者が勉強するための学習内容をロードマップとして無償公開しています。 さまざまな種類が用意されていますが、例えばフロントエンドの場合は以下のような感じです。 有名なロードマ

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ライセンスで、商用でも完全に無料

プログラミング勉強日記 2020年11月28日 昨日の記事でPrettierについて扱ったが、Prettierと合わせて使用することのできるESlintについて紹介する。 ESlintとは ESlint(読み方：「イーエスリント」)は、JavaScriptやTypeScriptなどの静的解析ツールである。ESlintを導入することで、単純な構文エラーやプロジェクト固有のコーディング規約を定義することができる。厳密なルールを定義することで、複数人で開発する場合でもシステム全体のコードの一貫性を維持することができる。 ESlintの特徴 自由に多くのルールを設定できる 独自ルールを作成するAPI 固有のライブラリー、フレームワーク、および実践のルールを持つ多数のプラグイン ES6、ES7、JSXの内蔵サポート 迅速に開始できるように、推奨ルールだけでなくサードパーティの設定利用が可能 Subl

この記事は、ウェブ技術の開発者（Java, PHP, Ruby, Go... 全て含む）のうち、少しでもJavaScriptを触ったことがあるけど、現代ウェブフロントエンドというか、特にウェブアプリケーション —— React, Vue, Angular など—— が分からない人に向けて、たったひとつの理解方法を提示するものです。 追記: ちなみに果てしなくどうでもいいですが、今回の記事が記念すべき100記事目らしいです。（Noteさん！その手のヤツはいっそ自動で記事にバッヂを表示するとかしてくれるとうれしいです！） 対象読者は、Java, PH(以下略）などのコードと一緒に、ほんの少しでもJSのコードを触った、見たことがあるというレベル感の人なので、既にReact, Vue, Angular などでガリガリコードを書いている人は対象ではありません。 あとホームページ屋さんとかウェブコーダ

Intro Cookie は、ブラウザに一度保存すれば、次からその値を自動的に送ってくるという、非常に都合の良い仕様から始まった。 State Less が基本だった Web にセッションの概念をもたらし、今ではこれが無ければ実現できないユースケースの方が多い。 冷静に考えればふざけてるとして思えないヘッダ名からもわかるように、当初はこのヘッダがこんなに重宝され、 Web のあり方を変えるかもしれないくらい重要な議論を巻き起こすことになるとは、最初の実装者も思ってなかっただろう。 そんな Cookie が今どう使われ、 3rd Party Cookie (3rdPC) の何が問題になっているのかを踏まえ、これからどうなっていくのかについて考える。 Cookie のユースケース Web にある API の中でも Cookie はいくつかの点で特異な挙動をする 一度保存すれば、次から自動で送る

DIST.31の公演スライドです。

PayPayカードのメリット・デメリット|怖いと言われる理由と評判レビュー。ゴールドと一般どっちがおすすめ?

はじめに 新しいサービスにはじめて触れるとき、どうやって学べば良いかが分からずに困ることってありませんか？ 特にパブリッククラウドは、サービス数が非常に多い上にアップデートが早いため、キャッチアップするのが大変ですよね。 本記事では、Microsoft Azure を学びたいと思っている方を対象に、オススメの学習方法についてまとめていきます。 想定読者 本記事が以下の皆様の Azure 学習の一助になれば幸いです。 これから Azure を学ぼうと思っている方 既に Azure を使っており、もっと学びたい方 AWS (Amazon Web Services) 経験者の方で Azure に興味がある方 GCP (Google Cloud Platform) 経験者の方で Azure に興味がある方 主要な学習リソースの概要 色々な学習リソースがありますが、Azure 公式ドキュメント と

ブラウザで動くWebページのプログラミング実装をフロントエンドと呼びます。 最近はJSON色つけ係と呼ばれてたりしますが、 Web開発未経験・初心者向けに最低限知っておいたほうが良い基礎知識とテクニックに関して体系的にまとめておきます。 （CodePenによる動作例付き） 環境構築に関しては（兎に角）早くプロトタイプを作る技術（初心者向け）を参考にしてください。 HTML、CSS、JavaScriptはブラウザ自体の実装に依存します。 この記事では比較的汎用的に使える書き方やHTML、CSS、JSを記載したつもりですが 最新のJavaScript APIやCSS3の機能によってはブラウザによってサポートされていない機能もあります。（特にIE） 各機能に関してはCan I useで現在のブラウザの対応状況を確認することができます。 HTML HTML(Hyper Text Markup La

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

ここ数年、PWA（プログレッシブウェブアプリ）が非常に注目されています。通常のWebページとスマホアプリそれぞれの利点を兼ね備えており、導入したサイトではコンバージョンやユーザーエクスペリエンスの改善が大きく見込めます。 WebサイトをPWAにする手順とその必要性を紹介します。 Turn Your Website into a PWA by Luca Spezzano 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 PWA（プログレッシブウェブアプリ）とは なぜPWAを構築する必要があるのですか？ すでにPWAを採用しているのはどこですか？ PWAを作成する時に必要なもの Web App Manifest Service Worker PWAを5分で構築しよう 静的キャッシュ 動的キャッシュ 静的と動的のどちらを使用すべきですか

このリストは何？ MDN web docs を、あたかも書籍の目次かのごとく整理しなおしたものです。それぞれ MDN web docs の記事へリンクしています。 なぜこれが必要になったかというと、人材市場でフロントエンドエンジニアが少なすぎる現状をどうにかするべく教育体制を整えるところから考え始めたのですが、それならまずは日頃お世話になっている MDN web docs を教材として扱いたいなと思ったからです。慣れてきてもよく参照するし「アレどこだっけなぁ？」を軽減もしやすいかなって。 MDN web docs は内容そのものはかなり充実しているものの、リンクがあらゆる方向に張り巡らせられており ある一定の流れに沿って読む ということが少々難しい側面もあります。特に初学者にとっては、迷子になりやすいかもしれません。 ですので、初学者でも学習しやすいように MDN web docs 全体の

最終更新日： 2023年2月17日 AIツールは多くの種類があって何を選んだら良いのかわからない方も多いのではないでしょうか。AIはデータの傾向から未来や現在を分析することができます。 ツールの中でも何ができるのか、何を基準に選べば良いのかがはっきりすると選びやすいですよね。 今回は、AI分析のツールの選び方や、GUIツールが注目されている理由、おすすめのGUIツールを紹介するとともに、「AI分析」についてご紹介します。 AIツールおすすめ10選 AI構築ツール AI構築ツールとはAIを開発するためのツールです。従来はAIの開発には高度なプログラミング知識などが必要でしたが、AI構築ツールを使えば、マウス操作だけで手軽にAI開発に取り組めます。 Amazon SageMaker Amazon SageMakerはAmazonが提供している機械学習モデルを構築して使える状態にまでするツールで

こんにちは。谷口です。 プログラミング学習の目標として「Webアプリを作れるようになりたい！」と考えている初心者の方は多いですよね。 ただ、初心者の場合「どんな勉強が必要なのか」「どうやって勉強すればよいのか」で迷うこともあるかと思います。 今回は、「paizaラーニングを使ってどんな勉強をすればWebアプリを作れるようになるか」ご紹介します。 実際に、paizaラーニングを使ってプログラミングの勉強を始め、Webアプリやサービスを作れるようになったり、それをもとにエンジニアとしての就職・転職された方はたくさんいらっしゃいます。 プログラミングやWeb開発に興味のある方、エンジニアを目指している方の参考になればと思います。 各プログラミング言語の入門編 プログラミング自体が初めて、もしくは勉強したけど途中で挫折した、勉強したけど忘れている部分が多い、プログラミング経験はあるけど別の言語を勉