Reactを関数型プログラミングの文脈で理解する｜こわくない関数型プログラミング
フロント学習の最高の教材集 - Qiita
はじめに 今回はフロント学習で重宝できる教材をまとめました。 軽く自己紹介として、自分は新卒でフロントエンジニアとして入社し2022年で2年目になります。 実際に実務を通す中で「この教材のおかげで実装がスムーズにできた」「この教材をやってたおかげで理解ができた」といったような場面が2年の間で多々ありました。 今回紹介する教材は自分自身が実際に使ってよかったものかつ、そのほとんどが無料で学べるor低価格の教材になっています。 「フロントエンドを網羅的に学べかつ実務の基礎作り」という目的で教材を紹介します。 この記事の主な対象者 フロントエンドの学習をこれからしていきたい人 何を学べばよいのかがわからない人 HTMLとCSSはある程度かける人 この記事の目標 フロント学習の指針が立てられる 実務現場でも活用できるスキルを学べる教材を知れる JavaScript ドットインストールのJavaSc
【Docker】初心者向けDocker基礎編 | バシャログ。
こんにちは。nakagiriです。 今年は梅雨が明けるのが早くて毎日真夏並みに暑いですね。( ´∵｀) みなさんも熱中症にならないように気をつけてください。 今回からDockerについて全四回に分けて解説していきます。 一回目の本記事では、「Dockerって何だろう？」、「Dockerを使うとどんなメリットがあるのだろう？」といった疑問を解決するDockerの基礎編です。 Dockerに関する記事はたくさんありますが、難しい言葉が多く羅列されていてなんとなく難しいイメージを持たれている方もいるかもしれません。そこで、イラストを使ってなるべくわかりやすく噛み砕いてお伝えしていきたいと思います。 二回目以降の記事では、実際にDockerを使って解説していくので、ぜひ一緒にやってみてください。（※実際の構築は、Docker Composeを使用して解説する予定です。） Dockerとは？ Doc
【React】イラストで基礎を解説してみる（初心者向け） | バシャログ。
はじめまして。去年の9月にコーダーとして入社したnakagiriです！ 今日は、勉強中のReactについて解説します。 勉強する前は、先輩がReactをつかって開発をしているのは知っているけど、実際よく分からない。 そんな状態だったので、この機会にReactについてどのような特徴があるのか一つ一つ整理してまとめてみます。 この記事のゴール Reactにはどのような特徴があるか理解すること この記事の対象となる方 HTML、CSS、jQueryを使ってWEBサイトを作ってみたことがある方 Reactの特徴を知りたい方 そもそもReactとは？ Facebookが開発しているUIに特化したJavaScriptライブラリです。 FacebookやInstagram、Netflix やYahoo!にも使われている技術。 Vue.jsやAngular.jsと比較されること多い。 Reactの特徴 R
駆け出しデザイナー・エンジニアにこそ見ていただきたいWordPressの脆弱性とセキュリティ - Qiita
WordPressは世界で1番使用されているCMSかつオープンソースであるが故に、悪意のある第三者やプログラムから世界で1番攻撃されやすいCMSと言われています。 私自身も何度か攻撃を受けていて、実害に及ばなかったものから及んだものまで様々でした。クライアントの稼働しているWEBサイトに実害があった場合は、原因究明や報告、一次対応から恒久的対策までを行い、安全性を確保した上で再度稼働させる必要があり、その作業は簡単なものではありません。 被害があるのはクライアントだけではなく、そのサイトにアクセスしたユーザーに及びます。たとえ納品後の保守契約を結んでいなかったとしても、実装者の責任としてクライアント、ユーザーに安心して利用できるWEBサイトを目指さなければいけません。 私はセキュリティの専門家ではないもののWordPressを10年以上触っている中で様々な問題に当たり、対応してきました。そ
Web Animations APIのcompositeが凄過ぎてすごいからみんな見てくれ - Qiita
この記事はようやくSafariでもフルサポートされそうなWeb Animations APIのcomposite（効果の組成）って機能がすごいよ！！って、ただそれだけを伝えたい記事です。平たくいうと複数のアニメーションを簡単キレイに合成できる機能なのですが、通常のWebのコーディングでもよく出てくる辛さを解決してくれる結構すごいヤツなのです。 ▼ こういうアニメーション作るのもだいぶん楽になります Web Animations APIで星空パーティクル 単にCSSのアニメーションをJSで描けるよってだけではあるんだけど、ライブラリなしでそこそこ簡単にインタラクティブなもの作れるって意味ではうれしい。主要ブラウザ全部で使える。https://t.co/8H8zXfc5NL pic.twitter.com/bfTERJPxIX — ゆき＠ティアF47a (@yuneco) October 11
Web制作者はしっかりと理解しておきたい！ CSSにおけるレイアウトアルゴリズムを解説
CSSを理解するには、プロパティや値を知っているだけでは不十分です。CSSのレイアウトアルゴリズムがどのように機能するかを理解する必要があります。 ブログやツイートで便利なCSSスニペットが紹介されていても、なぜ機能するのか、レイアウトアルゴリズムがどのように使用されているのか説明されていないことはよくあります。CSSにおけるレイアウトアルゴリズムについて解説します。 CSSの初学者をはじめ、長く携わっている人にも、気づきや学びがあると思います。 Understanding Layout Algorithms by Josh W. Comeau 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに CSSにおけるレイアウトのアルゴリズム レイアウトアルゴリズムの確認 インライン要素の不思議なスペース 終わりに はじめに 数年
新しいGoogleアナリティクス「GA4」、変化とその価値 - Media × Tech
アクセス解析ツールである「Google アナリティクス」。多くの企業で利用されており、皆様の会社も導入しているのではないでしょうか。そんなGoogle アナリティクスに新しいバージョン、「Google アナリティクス4 （以下：GA4）」が登場して1年半経ちました。また今までのGoogle アナリティクスの計測停止が2023年7月1日（有償版は2023年10月1日）とアナウンスされました。 「GA4って聞いたことはあるけどなんか全然画面が違うんだって？」「今までのGAと何が違うの？」「導入することのメリットは？」と疑問に思っている方も多いのではないでしょうか。本記事ではメディアサイトにとってのGA4導入の価値や注意点を、HAPPY ANALYTICSの代表取締役で、Googleアナリティクス関連の著書も複数上梓している、小川卓氏が紹介いたします。（編集部） GA4は今までのGoogle ア
httpとhttpsの違いとは？Webセキュリティの基本となる「SSL」を解説 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
うどん県出身・Webディレクターのセイタです。最近ポケモンカードの大会に出場しました。結果は惨敗でしたが、すごく楽しかったです。ポケモンカードは心身ともに健康になります。ポケモンカードをやっていきましょう。 さて、今回はSSL通信とは？です。 最近は社内の体制変更に伴ってWebサイトの保守業務に取り組んでいます。保守と言えばWebサイトのコンテンツ追加からABテストによるUIの改善、企画LPの新規制作など、様々な領域がありますが、忘れてはならない基本のキとしてSSL証明書の更新があります。 Webサイトを保守運用していくなかでとっても大切なSSLについて、今回まとめました。 SSL通信とは？ SSLとはSecure Sockets Layerの略称です。インターネット上におけるWebブラウザとサーバ間でのデータの通信を暗号化し、送受信させる仕組みのことです。 暗号化させる情報としては、 氏
Googleアナリティクス初心者が見るべき「セッション」を解説 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、エディターのあっきーです。LIGではパートナー企業様のオウンドメディアの運用、記事制作を支援しています。 Webメディアに携わる人であれば、Googleアナリティクスはほぼ100％ふれるツールと言っても過言ではありません。しかし、Web業界に初めて転職した人など、これまで一度もGoogleアナリティクスに触れたことのない人にとっては何をどう見ればいいのかわからない、とっつきにくいツールとも思われがちです（実際、僕がそうでした）。 そこで今回の記事はマーケターではない方でも最低限知っておきたい、オウンドメディアで見るべきGoogleアナリティクスの指標を1つに絞って解説します。LPや採用サイトなどの分析とは異なるお話も多々ありますので、あしからず。 この記事はこんな人におすすめ！ ・自社メディアにGoogleアナリティクスを設置しているけど、サイト全体のPV数くらいしか見ていない
実は違う！請負契約と準委任契約の会計上の売上タイミングの違いについて解説 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
財務・経理部のなおきです。 LIGは設立から14年ほどの企業ではありますが、Web制作に限らず、セブの人材をお客様へ提供しシステムなどの開発を行うBiTT開発、メディアの記事・広告の制作、デザインスクール運営などなど、多岐にわたる事業を運営しています。 もちろん、各事業の運営を継続していくためには、より良いサービスを提供し、お客さまに満足いただき、その結果として売上が立ち、利益が得なければいけません。 では、この「売上」が会計上ではいつのタイミングで認識されているのか？ 会社で数字を管理されている方だけでなく、日々業務に取り組まれている社員一人ひとりが理解していることはとても大切だと思います。 そこで今回は、契約形態ごとの収益認識（売上計上）基準について解説します。 請負契約と準委任契約について まず、LIGが請け負っている仕事の中では大きく2つの契約が存在しています。それが「請負契約」と
JavaScriptのイベントの仕組みが一発で理解できるウェブアプリ「Explore DOM Events」レビュー
JavaScriptには、特定の動作が発生した際にそれに応じてコードを実行する「イベント」という仕組みが存在しています。そのイベントがDOM内でどのように伝わるのかについて、「Explore DOM Events」というウェブアプリがイベントのオプションに応じて視覚的に表示してくれるとのことなので、実際に使って分かりやすさを確かめてみました。 Explore DOM Events https://domevents.dev/ ページにアクセスすると、「親(PARENT)」「子(CHILD)」「孫(GRANDCHILD)」というDOMの親子関係が表示されており、そのうち1つめの孫(オレンジ)がイベントのターゲットに設定されていることが分かります。このまま「Dispatch」をクリックしてみると…… イベントが伝わっていく様子がアニメーションで表示されました。まだ何もイベントリスナーを追加して
知っておきたいWebサイトまわりのセキュリティ対策について | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、むむです。 Webサイト周りのセキュリティってどんなものがあるかご存じですか？ Webサイト自体に使用しているアプリケーション、ミドルウェア、OS、サーバー、それらをつなぐ通信、通信を行う場所に入るための物理的なセキュリティなど……案外いろんな方面からの対策が必要だったりします。 今回は、Webサイトを制作する際に知っておきたいセキュリティの知識をざっくりとまとめます。 大きく以下の4つの視点から対策を行うことができます。 Webサイトのセキュリティ対策 サーバーのセキュリティ対策 ネットワークのセキュリティ対策 建物 / 部屋のセキュリティ対策 それでは詳しくみていきましょう！ Webサイトのセキュリティ対策 まず初めに、Webサイトのセキュリティ対策についてです。 Webサイトを作るには、OSやミドルウェア、アプリケーションを使用し構築されることがほとんどです。そして、使用
ウェブサイトのさまざまな「認証方式」をまとめて比較した結果がコレ
ユーザーごとに異なるデータを提供するため、ログイン機能を搭載しているウェブサイトは多数存在します。しかし、ユーザー側はウェブサイトに搭載されたログイン機能の「認証方式」まで気にすることはあまりないはず。そんなウェブサイトの認証方式について、代表的な6つの方式をエンジニアのAmal Shaji氏が解説しています。 Web Authentication Methods Compared | TestDriven.io https://testdriven.io/blog/web-authentication-methods/ ◆ベーシック認証 HTTPの中に組み込まれているベーシック認証は、最も基本的な認証方式です。ベーシック認証に暗号化機能はなく、Base64でエンコードされたユーザーIDとパスワードをクライアントからサーバーに送信するとのこと。 認証フローはこんな感じ。まずクライアントはサ
TypeScript の概要 - Qiita
概要 AltJS としての言語 TypeScript の特徴をかいつまんで説明します。 対象者 JavaScript でコードを書いたことがある。 JavaScript でプログラムを書くのが辛い or もっと楽したい。 TypeScript ってなに？聞いたことはあるけど・・・ ・・・な人。 TypeScriptの参考資料 TypeScript - JavaScript that scales. (公式サイト) TypeScriptってどんなもの？ プロ生ちゃんと始めてみよう！ - Build Insider Insider.NET > TypeScriptで学ぶJavaScript入門 - ＠IT TypeScriptの型入門 - Qiita ワイ「いうても型なんて面倒くさいだけやろ？」 - Qiita TypeScriptの型入門 - Qiita AltJS (Alternative
TypeScriptの型入門 - Qiita
TypeScriptは型がついたJavaScriptです。プログラミングにおいて型があることの恩恵は大きく、近頃AltJSの代表格として人気を集めています。TypeScriptはもともと型のないJavaScriptで書かれるコードに型を付けることを使命としていることもあり、たまに変な型が追加されます。例えばTypeScript2.8で追加されたconditional typesはずいぶん注目を集めました。これによってTypeScriptの型システムの表現力が広がりましたが、一方でTypeScriptを書いている人の中には、よく分からない型が増えてついて行けない、一部の人たちが長くてよく分からない型定義を書いて喜んでいるだけと思っている方もいるのではないでしょうか。実際、健全にJavaScriptを書いていれば、自分でそのような変な型を書くことはあまり多くありません。 そこで、この記事ではT
知らないで使うとトラブルになるかも…プログラム・画像のライセンス（概要編） - ICS MEDIA
フロントエンド界隈に限らず、ITの世界は誰かが作った優れたライブラリーやプログラムによって支えられている側面があります。それらを利用することで車輪の再発明を防いだり、より低コストで開発が進められたりします。一方で何気なく使っているそれらにもライセンスがあります。思わぬトラブルの前に、ライセンスについて今一度振り返っておきましょう。 ※本記事では一般的な考え方にもとづいた解説をしています。個別の事案については専門家にご相談ください。 著作権とライセンス 人が創作したものについては著作権が発生します。絵や小説など芸術的な分野だけでなく、ソースコードやプログラムにも当然ながら著作権は発生します。著作者の許諾なく、勝手にプログラムをコピーして使うことは著作権侵害の恐れがあります。著作者による「これこれの条件のもとに使っていいよ」という許諾にあたるものがライセンスです。 つまり利用者はライセンスに定
JavaScript入門: 基礎知識をGIFアニメで分かりやすく解説 -総まとめ
JavaScript QuestionsのLydia Hallie氏の「JavaScript Visualized」シリーズすべての翻訳を完了したので、まとめて紹介します。 JavaScriptエンジンの仕組みをはじめ、イベントループ、スコープチェーン、プロトタイプ継承、非同期処理、ジェネレータ関数、Hoisting（巻き上げ）など、GIFアニメを使用して詳しく解説しています。 シリーズ7本すべてと、プラス1として楽しく学べるクイズもあります。 JavaScript イベントループの仕組み JavaScriptでエラーの原因となるHoisting（巻き上げ）の仕組み JavaScriptのスコープチェーン・変数参照の仕組み JavaScriptエンジンの仕組み JavaScript プロトタイプ継承の仕組み JavaScriptのジェネレータ関数とイテレータの仕組み JavaScriptの
Vue 3の新しい機能と変更点・全11件
さてさて、前回「Bootstrap v5がどうなるのか調査してみた」という記事を公開しましたが、実は今後のリリースでもうひとつ気になるものがあります。 それは、JavaScript開発の強力な味方、 「Vue.js」の新バージョン（v3） です。 Vue 3については、以前からたびたび情報が出てましたがついにアルファ版が利用できるようになりました。（2020.3.26現在） そこで❗ 今回は、近い将来リリースされるであろう Vue 3の使い方をまとめてみることにしました。 ぜひ参考にしていただけると嬉しいです😊✨ 【追記：2020.09.20】2020年9月18日に正式リリースされ、変更点があったので、記事を加筆・修正しました。 【追記：2020.10.30】「refの使い方が変わった」を追加しました。 「ついに来ました Vue 3 🎉」 Vueインスタンスの作り方が変わった これまで
フロントエンドのデベロッパーが2021年に向けてチェックしておきたいこと
フロントエンドのデベロッパーが2021年に向けて何に注目すべきかを紹介します。 特に上級職や転職など、ステップアップを目指す人は要チェックです！ 10 Things Front-End Developers Should Learn in 2021 by Simon Holdorf 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 1. フレームワーク 2. 静的サイトジェネレーター（SSG） 3. JAMstack 4. プログレッシブウェブアプリ（PWA） 5. GraphQL 6. コードエディタ/IDE 7. テスト環境 8. クリーンなコード 9. Git 10. ソフトスキル 終わりに はじめに 2021年は、フロントエンドの開発がテクノロジー業界で最もホットなトレンドの1つになることは間違いないでしょう。フ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
